React Pradžios Vadovas: Sukurkite Savo Pirmąją Vartotojo Sąsają Nuo Nulio

React yra JavaScript biblioteka, skirta vartotojo sąsajų kūrimui. Ją sukūrė ir prižiūri Facebook, ir ji tapo viena populiariausių priemonių front-end kūrime. Šis vadovas padės jums nuo nulio, žingsnis po žingsnio, suprasti pagrindines React sąvokas ir sukurti paprastą vartotojo sąsają.

Kodėl Rinktis React?

React turi šiuos privalumus:

• Komponentizacija: React suskaido vartotojo sąsają į nepriklausomus, pakartotinai naudojamus komponentus. Tai palengvina kodo priežiūrą ir supratimą.
• Deklaratyvumas: React naudoja deklaratyvų programavimo stilių, o tai reiškia, kad jums tereikia aprašyti, ką norite pateikti, o React automatiškai pasirūpins atnaujinimais ir atvaizdavimu.
• Efektyvumas: React naudoja virtualų DOM ir protingą diff algoritmą, kad efektyviai atnaujintų vartotojo sąsają ir sumažintų nereikalingą atvaizdavimą.
• Didelė bendruomenės parama: React turi didelę bendruomenę ir turtingą ekosistemą, galite rasti daugybę vadovėlių, bibliotekų ir įrankių, kurie padės jums kurti.
• Kelių platformų galimybės: React Native leidžia jums kurti gimtąsias mobiliąsias programas (iOS ir Android) naudojant React.

Pasiruošimas

Prieš pradėdami, turite įsitikinti, kad jūsų kompiuteryje įdiegti šie įrankiai:

• Node.js: Node.js yra JavaScript vykdymo aplinka, naudojama React kūrimo įrankiams paleisti. Ją galite atsisiųsti ir įdiegti iš https://nodejs.org/.
• npm arba yarn: npm (Node Package Manager) ir yarn yra JavaScript paketų tvarkyklės, naudojamos React priklausomybėms įdiegti ir tvarkyti. Paprastai npm įdiegiama kartu su Node.js. yarn galima įdiegti iš https://yarnpkg.com/.

Sukurkite Savo Pirmąją React Programą

Naudosime create-react-app, kad greitai sukurtume React projektą.

1. Sukurkite naudodami npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Sukurkite naudodami yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Įvykdžius aukščiau pateiktas komandas, create-react-app automatiškai sukurs katalogą pavadinimu my-first-react-app ir inicijuos React projektą tame kataloge. npm start arba yarn start komanda paleis kūrimo serverį, ir jūs galite pasiekti savo React programą naršyklėje adresu http://localhost:3000.

Katalogo Struktūra

create-react-app sukurto projekto katalogo struktūra yra tokia:

my-first-react-app/
├── node_modules/         # Projekto priklausomybių bibliotekos
├── public/               # Statiniai ištekliai (pvz., HTML failai)
│   ├── index.html        # Programos įėjimo HTML failas
│   └── ...
├── src/                  # React šaltinio kodas
│   ├── App.css           # App komponento CSS stilius
│   ├── App.js            # App komponentas
│   ├── App.test.js       # App komponento testavimo failas
│   ├── index.css         # Globalus CSS stilius
│   ├── index.js          # Programos įėjimo JavaScript failas
│   ├── logo.svg          # React logotipas
│   └── ...
├── .gitignore            # Git ignoravimo failas
├── package.json          # Projekto metaduomenys ir priklausomybės
├── README.md             # Projekto dokumentacija
└── yarn.lock             # Priklausomybių versijų fiksavimo failas (jei naudojamas yarn)

React komponentų supratimas

React aplikacijos yra sudarytos iš komponentų. Komponentai yra nepriklausomi, pakartotinai naudojami kodo blokai, skirti atvaizduoti specifines vartotojo sąsajos dalis.

src/App.js faile galite matyti numatytąjį App komponentą:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Kodo paaiškinimas:

• import React from 'react'; Importuoja React biblioteką.
• function App() { ... } Apibrėžia funkcijos komponentą pavadinimu App.
• return ( ... ) Grąžina JSX išraišką, apibūdinančią, ką komponentas turėtų atvaizduoti.
• export default App; Eksportuoja App komponentą, kad jį būtų galima naudoti kituose failuose.

JSX (JavaScript XML)

JSX yra JavaScript sintaksės plėtinys, leidžiantis JavaScript kode rašyti į HTML panašų kodą. Aukščiau pateiktame pavyzdyje ... yra JSX išraiška. JSX kodas yra konvertuojamas Babel į standartinį JavaScript kodą, kad naršyklė galėtų jį suprasti.

App komponento modifikavimas

Modifikuokime App komponentą, sukuriant paprastą skaitiklį.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Skaitiklis

      Dabartinis skaičius: {count}

      +
      -
    
  );
}

export default App;

Pakeitimų paaiškinimai:

• import React, { useState } from 'react'; Importuoja useState Hook. useState yra React Hook, naudojamas būsenai pridėti funkciniuose komponentuose.
• const [count, setCount] = useState(0); Naudojant useState Hook sukuriamas būsenos kintamasis pavadinimu count ir inicializuojamas į 0. setCount yra funkcija, naudojama atnaujinti count būseną.
• const increment = () => { setCount(count + 1); }; Apibrėžiama funkcija pavadinimu increment, naudojama count būsenai padidinti 1.
• const decrement = () => { setCount(count - 1); }; Apibrėžiama funkcija pavadinimu decrement, naudojama count būsenai sumažinti 1.
• Dabartinis skaičius: {count} Puslapyje rodoma count būsenos reikšmė. {count} yra JSX išraiška, naudojama JavaScript kintamiesiems įterpti į JSX kodą.
• + ir - sukuriami du mygtukai, atitinkamai susieti su increment ir decrement funkcijomis. onClick yra įvykių apdorojimo priemonė, naudojama nurodytai funkcijai vykdyti, kai paspaudžiamas mygtukas.

Išsaugojus src/App.js failą, naršyklė automatiškai atsinaujins ir pamatysite paprastą skaitiklį. Paspaudus "+" mygtuką, skaičius padidės, o paspaudus "-" mygtuką, skaičius sumažės.

CSS stiliaus naudojimas

Galite naudoti CSS, kad pagražintumėte savo React programą. create-react-app palaiko CSS Modules ir įprastus CSS failus.

CSS Modules naudojimas:

CSS Modules leidžia sukurti atskirus CSS stilius kiekvienam komponentui, kad būtų išvengta stilių konfliktų. Norėdami naudoti CSS Modules komponente, turite sukurti failą, kuris baigiasi .module.css.

Pavyzdžiui, sukurkite failą pavadinimu App.module.css ir į jį įtraukite šiuos CSS stilius:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Tada src/App.js faile importuokite CSS Modules:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importuoti CSS Modules

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Naudokite styles objektą, kad nurodytumėte CSS klases */}
      

# Skaitiklis

      Dabartinis skaičius: {count}

      +
      -
    
  );
}

export default App;

Naudojant įprastą CSS failą:

Taip pat galite naudoti įprastą CSS failą, kad apibrėžtumėte globalius stilius. Faile src/index.css galite apibrėžti globalius stilius.

Pavyzdžiui, pridėkite šį CSS stilių:

body {
  font-family: sans-serif;
}

Šis stilius bus pritaikytas visam programos body elementui.

Kitas žingsnis

Sveikiname, jūs baigėte savo pirmąją React programą! Toliau galite sužinoti daugiau apie React, pavyzdžiui:

• Komponentų komunikacija: Sužinokite, kaip skirtingi komponentai gali bendrauti tarpusavyje.
• Formų apdorojimas: Sužinokite, kaip kurti ir apdoroti formas.
• Maršrutizavimas: Sužinokite, kaip naudoti React Router, kad sukurtumėte kelių puslapių programas.
• Redux arba Context API: Sužinokite, kaip valdyti programos būseną.
• Hooks: Išsamiau susipažinkite su React Hooks, tokiais kaip useEffect, useContext ir kt.

Atminkite, kad React yra technologija, kurią reikia nuolat praktikuoti ir mokytis. Linkiu malonaus mokymosi!