Vadovėlis, kaip sukurti žiniatinklio programą naudojant React.js

„React.js“ yra populiari sąsajos kūrimo biblioteka, naudojama interaktyvioms vartotojo sąsajoms (UI) kurti. „Facebook“ sukurta „React.js“ buvo naudojama daugelio didelių įmonių, įskaitant „Instagram“, „Airbnb“ ir „WhatsApp“. Jei norite kurti efektyvias, greitas ir reaguojančias žiniatinklio programas, „React.js“ gali būti tinkamas pasirinkimas jums.

Pendahuluanas

Prieš pradėdami, įsitikinkite, kad jūsų kompiuteryje įdiegti „Node.js“ ir „npm“ („Node Package Manager“). „Node.js“ ir „npm“ yra būtini, nes jie suteikia aplinką ir įrankius, reikalingus žiniatinklio programoms kurti naudojant „React.js“.

1 veiksmas: „React“ projekto inicijavimas

Norėdami sukurti naują „React.js“ programą, galime naudoti „Create React App“ – programų kūrimo įrankį, kuris sumažina pradinę konfigūraciją. Terminale arba komandų eilutėje paleiskite šią komandą:

„bash
npx Create-React-app my-app
cd mano programa
npm pradžia
„“

Ši komanda sukurs naują katalogą pavadinimu „my-app“, atsisiųs ir įdiegs visas reikalingas priklausomybes ir paleis kūrimo serverį. Dabar galite atidaryti naršyklę ir pasiekti `http://localhost:3000`, kad pamatytumėte numatytąją „React.js“ programą.

2 veiksmas: aplanko struktūra

Pažvelkime į aplankų struktūrą, kurią sukūrė „Create React App“:

„“
mano-programėlė/
├── mazgo_moduliai/
├── viešas/
│ └── indeksas.html
└── šaltinis/
├── Programos.css
├── App.js
├── Programėlės.testas.js
├── index.css
├── index.js
└── logotipas.svg
„“

– `node_modules/`: Apima visas jūsų projekto priklausomybes.
– `public/`: Apima statinius failus, įskaitant `index.html`, kuris yra programos įėjimo taškas.
– `src/`: Čia praleisite daugiausia laiko. Čia yra „React“ komponentai, CSS failai ir kiti ištekliai.

3 veiksmas: nereikalingų failų ištrynimas

Norėdami pradėti nuo švaraus lapo, ištrinkite kelis nereikalingus failus. Ištrinkite `logo.svg` ir `App.test.js` aplanke `src/`. Tada atidarykite `App.css` ir `index.css`, ištrindami visą juose esantį CSS kodą ir pradėdami nuo švaraus stilių lapo.

4 veiksmas: pirmojo komponento kūrimas

„React.js“ yra komponentinis. Komponentai yra jūsų žiniatinklio programos statybiniai blokai. Pakeiskime `App.js` failą, kad sukurtume pirmąjį komponentą.

Atidarykite `src/App.js` ir pakeiskite jį šiuo kodu:

jsx
importuoti React iš 'react';
importuoti './App.css';

function App() {
grįžti (

);
}

eksportuoti defaultApp;
„“

Inicijuokite „React“ kodą faile „App.js“ naudodami JSX („JavaScript XML“), kuris leidžia mums rašyti HTML tipo sintaksę „JavaScript“ viduje. Išsaugokite pakeitimus ir peržiūrėkite rezultatus naršyklėje.

5 veiksmas: naujų komponentų pridėjimas

Dabar pridėkime keletą naujų komponentų. Sukurkite naują aplanką pavadinimu „components“ aplanke „src“. Tada sukurkite naują failą „HelloWorld.js“ aplanke „components“.

jsx
importuoti React iš 'react';

funkcija LabasPasaulis() {
grįžti (

);
}

eksportuoti numatytąjį „HelloWorld“;
„“

Atidarykite `App.js` ir importuokite ką tik sukurtą `HelloWorld` komponentą:

jsx
importuoti React iš 'react';
importuoti './App.css';
importuoti „HelloWorld“ iš „./components/HelloWorld“;

function App() {
grįžti (

);
}

eksportuoti defaultApp;
„“

Dabar „App.js“ pateikia „HelloWorld“ komponentą pagrindiniame puslapyje.

6 veiksmas: būsenos valdymo pridėjimas naudojant „useState“

„React“ turi labai galingus būsenos valdymo įrankius. Pridėkime prie savo programos būseną. Pavyzdžiui, pridėkime skaitiklį, kuris didėja kiekvieną kartą spustelėjus mygtuką.

Atidarykite `HelloWorld.js` ir pridėkite state bei `useState` modulius:

jsx
importuoti „React“, { useState } iš „react“;

funkcija LabasPasaulis() {
const [count, setCount] = useState(0);

konstanta prieaugioSkaičius = () => {
setCount(skaičius + 1);
}

grįžti (

);
}

eksportuoti numatytąjį „HelloWorld“;
„“

`count` būsena inicijuojama reikšme 0, ir kiekvieną kartą spustelėjus mygtuką, funkcija `incrementCount` padidins šią reikšmę.

7 veiksmas: stiliaus pridėjimas

Norėdami pridėti stilių, galime naudoti CSS faile `App.css` arba CSS-in-JS biblioteką, pvz., styled-components. Kol kas apsistokime prie standartinio CSS.

Atidarykite `App.css` failą ir pridėkite stilių:

"'css
.App {
text-align: centras;
}

.App-header {
fono spalva: 282c34;
min-aukštis: 100vh;
Ekranas: lankstytis;
lankstumo kryptis: stulpelis;
suderinti elementus: centrą;
pateisinti-turinys: centras;
šrifto dydis: calc(10px + 2vmin);
spalva: balta;
}

mygtukas {
padding: 10px 20px;
"margin-top": 20px;
font-size: 16px;
}
„“

8 veiksmas: Maršruto pridėjimas naudojant „React Router“

Norėdami pridėti navigaciją tarp skirtingų programos puslapių, galime naudoti „React Router“. Įdiekite „React Router“ paleisdami šią komandą:

„bash
npm įdiegti react-router-dom
„“

Tada sukurkite du naujus komponentus: `Home.js` ir `About.js` aplanke `components`.

`Home.js`:
jsx
importuoti React iš 'react';

funkcija Pradžia() {
grįžti (

);
}

eksportuoti numatytąjį pagrindinį puslapį;
„“

`Apie.js`:
jsx
importuoti React iš 'react';

funkcija Apie() {
grįžti (

);
}

eksportuoti numatytuosius nustatymus Apie;
„“

Toliau atidarykite `App.js` ir nustatykite maršrutizavimą:

jsx
importuoti React iš 'react';
importuoti { „BrowserRouter“ kaip maršrutizatorių, maršrutą, nuorodą, jungiklį } iš „react-router-dom“;
importuoti './App.css';
importuoti „HelloWorld“ iš „./components/HelloWorld“;
importuoti „Home“ iš „./components/Home“;
importuoti „Apie“ iš „./components/Apie“;

function App() {
grįžti (

);
}

eksportuoti defaultApp;
„“

Tuo pačiu pridėjome pagrindinę navigaciją tarp skirtingų programos puslapių.

Uždarymas

Tai yra pagrindinis vadovėlis, kaip sukurti žiniatinklio programą naudojant „React.js“. Aptarėme projekto nustatymus, komponentų kūrimą, būsenos valdymą, stilių parinkimą ir maršrutizavimą. „React.js“ turi turtingą ekosistemą su daugybe bibliotekų ir įrankių, kurie gali padėti kurti sudėtingesnes žiniatinklio programas.

Sėkmės ir tikiuosi, kad ši pamoka padės jums pradėti savo kelionę su React.js!