Tutoriál o vytvorení webovej aplikácie pomocou React.js

React.js je populárna vývojová knižnica pre front-end, ktorá sa používa na vytváranie interaktívnych používateľských rozhraní (UI). React.js, vyvinutý spoločnosťou Facebook, používa mnoho veľkých spoločností vrátane Instagramu, Airbnb a WhatsApp. Ak chcete vytvárať efektívne, rýchle a responzívne webové aplikácie, React.js by pre vás mohol byť tou správnou voľbou.

Pendahuluan

Predtým, ako začneme, sa uistite, že máte v počítači nainštalované Node.js a npm (Node Package Manager). Node.js a npm sú nevyhnutné, pretože poskytujú prostredie a nástroje potrebné na vývoj webových aplikácií pomocou React.js.

Krok 1: Inicializácia projektu React

Na vytvorenie novej aplikácie React.js môžeme použiť nástroj Create React App, ktorý minimalizuje počiatočnú konfiguráciu. Spustite nasledujúci príkaz v termináli alebo príkazovom riadku:

„bash“
npx create-react-app my-app
cd moja aplikácia
npm štart
"`

Tento príkaz vytvorí nový adresár s názvom `my-app`, stiahne a nainštaluje všetky potrebné závislosti a spustí vývojový server. Teraz môžete otvoriť prehliadač a prejsť na adresu `http://localhost:3000`, čím zobrazíte predvolenú aplikáciu React.js.

Krok 2: Štruktúra priečinkov

Pozrime sa na štruktúru priečinkov, ktorú vytvorila aplikácia Create React App:

"`
moja-aplikácia/
├── moduly_uzlov/
├── verejné/
│ └── index.html
└── zdroj/
├── Súbor App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
"`

– `node_modules/`: Obsahuje všetky závislosti vášho projektu.
– `public/`: Obsahuje statické súbory vrátane `index.html`, ktorý je vstupným bodom aplikácie.
– `src/`: Miesto, kde strávite väčšinu času. Obsahuje komponenty Reactu, súbory CSS a ďalšie prvky.

Krok 3: Odstránenie nepotrebných súborov

Ak chceme začať s čistým štítom, vymažme niektoré nepotrebné súbory. Vymažte súbory `logo.svg` a `App.test.js` v priečinku `src/`. Potom otvorte súbory `App.css` a `index.css`, vymažte všetok kód CSS v nich a začnite s čistým štýlovým hárokom.

Krok 4: Vytvorenie prvého komponentu

React.js je založený na komponentoch. Komponenty sú stavebnými kameňmi vašej webovej aplikácie. Upravme `App.js` a vytvorme si náš prvý komponent.

Otvorte súbor `src/App.js` a nahraďte ho nasledujúcim kódom:

"`jsx
import Reagovať z 'reagovať';
importovať './App.css';

funkcia Aplikácia() {
vrátiť (

);
}

exportovať predvolenú aplikáciu;
"`

Inicializujte kód React v súbore `App.js` pomocou JSX (JavaScript XML), čo nám umožňuje písať syntax podobnú HTML v JavaScripte. Uložte zmeny a zobrazte si výsledky vo vašom prehliadači.

Krok 5: Pridanie nových komponentov

Teraz pridajme niekoľko nových komponentov. V priečinku `src` vytvorte nový priečinok s názvom `components`. Potom v priečinku `components` vytvorte nový súbor `HelloWorld.js`.

"`jsx
import Reagovať z 'reagovať';

funkcia AhojSvet() {
vrátiť (

);
}

exportovať predvolené HelloWorld;
"`

Otvorte súbor `App.js` a importujte komponent `HelloWorld`, ktorý sme práve vytvorili:

"`jsx
import Reagovať z 'reagovať';
importovať './App.css';
importovať HelloWorld z './components/HelloWorld';

funkcia Aplikácia() {
vrátiť (

);
}

exportovať predvolenú aplikáciu;
"`

Teraz `App.js` vykreslí komponent `HelloWorld` na hlavnej stránke.

Krok 6: Pridanie správy stavu pomocou useState

React má veľmi silné hooky na správu stavu. Pridajme do našej aplikácie nejaký stav. Napríklad pridajme počítadlo, ktoré sa zvyšuje pri každom kliknutí na tlačidlo.

Otvorte súbor `HelloWorld.js` a pridajte hook state a `useState`:

"`jsx
importovať React, {useState } z 'reagovať';

funkcia AhojSvet() {
const [count, setCount] = useState(0);

const incrementCount = () => {
nastavPočet(počet + 1);
}

vrátiť (

);
}

exportovať predvolené HelloWorld;
"`

Stav `count` je inicializovaný hodnotou 0 a pri každom kliknutí na tlačidlo funkcia `incrementCount` túto hodnotu zvýši.

Krok 7: Pridanie štýlu

Na pridanie štýlu môžeme použiť CSS v súbore `App.css` alebo môžeme použiť knižnicu CSS-in-JS, ako napríklad styled-components. Zatiaľ sa držme štandardného CSS.

Otvorte súbor `App.css` a pridajte štýl:

„css
.Aplikácia {
text-align: center;
}

.Hlavička aplikácie {
farba pozadia: 282c34;
min. výška: 100vh;
displej: flex;
smer ohybu: stĺpec;
Zarovnať položky: stred;
zdôvodniť-obsah: stred;
veľkosť písma: calc(10px + 2vmin);
farba: biela;
}

tlačidlo {
polstrovanie: 10px 20px;
horný okraj: 20px;
veľkosť písma: 16px;
}
"`

Krok 8: Pridanie smerovania pomocou React Routeru

Na pridanie navigácie medzi rôznymi stránkami v našej aplikácii môžeme použiť React Router. Nainštalujte React Router spustením nasledujúceho príkazu:

„bash“
npm install reagovat-router-dom
"`

Potom vytvorte dva nové komponenty: `Home.js` a `About.js` v priečinku `components`.

`Domov.js`:
"`jsx
import Reagovať z 'reagovať';

funkcia Domov() {
vrátiť (

);
}

exportovať predvolenú Domovskú stránku;
"`

`About.js`:
"`jsx
import Reagovať z 'reagovať';

funkcia About() {
vrátiť (

);
}

exportovať predvolené informácie;
"`

Ďalej otvorte súbor `App.js` a nastavte smerovanie:

"`jsx
import Reagovať z 'reagovať';
import { BrowserRouter ako smerovač, trasa, odkaz, prepínač } z 'react-router-dom';
importovať './App.css';
importovať HelloWorld z './components/HelloWorld';
importovať Domov z './components/Home';
importovať Informácie z './components/About';

funkcia Aplikácia() {
vrátiť (

);
}

exportovať predvolenú aplikáciu;
"`

Vďaka tomu sme v našej aplikácii pridali základnú navigáciu medzi rôznymi stránkami.

Zatváranie

Toto je základný návod na vytvorenie webovej aplikácie pomocou React.js. Prebrali sme nastavenie projektu, vytváranie komponentov, správu stavov, styling a smerovanie. React.js má bohatý ekosystém s množstvom knižníc a nástrojov, ktoré vám môžu pomôcť vytvoriť zložitejšie webové aplikácie.

Veľa šťastia a dúfam, že vám tento tutoriál pomôže začať s React.js!