Tutoriál k vytvoření webové aplikace pomocí React.js

React.js je populární vývojová knihovna pro front-end, která se používá k vytváření interaktivních uživatelských rozhraní (UI). React.js, vyvinutý společností Facebook, používá mnoho velkých společností, včetně Instagramu, Airbnb a WhatsAppu. Pokud chcete vytvářet efektivní, rychlé a responzivní webové aplikace, React.js by pro vás mohl být tou správnou volbou.

Úvod

Než začneme, ujistěte se, že máte v počítači nainstalovaný Node.js a npm (Node Package Manager). Node.js a npm jsou nezbytné, protože poskytují prostředí a nástroje potřebné pro vývoj webových aplikací pomocí React.js.

Krok 1: Inicializace projektu React

Pro vytvoření nové aplikace React.js můžeme použít Create React App, nástroj pro tvorbu aplikací, který minimalizuje počáteční konfiguraci. Spusťte následující příkaz v terminálu nebo příkazovém řádku:

“, bash
npx create-react-app my-app
cd my-app
npm start
"."

Tento příkaz vytvoří nový adresář s názvem `my-app`, stáhne a nainstaluje všechny potřebné závislosti a spustí vývojový server. Nyní můžete otevřít prohlížeč a přejít na adresu `http://localhost:3000`, kde se zobrazí výchozí aplikace React.js.

Krok 2: Struktura složek

Podívejme se na strukturu složek, kterou vytvořila aplikace Create React App:

"."
moje-aplikace/
├── moduly_uzlů/
├── veřejná/
│ └── index.html
└── zdroj/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
"."

– `node_modules/`: Obsahuje všechny závislosti vašeho projektu.
– `public/`: Obsahuje statické soubory, včetně `index.html`, což je vstupní bod aplikace.
– `src/`: Místo, kde strávíte většinu času. Obsahuje komponenty Reactu, soubory CSS a další assety.

Krok 3: Smazání nepotřebných souborů

Abychom začali s čistým štítem, smažme několik nepotřebných souborů. Smažte soubory `logo.svg` a `App.test.js` ve složce `src/`. Poté otevřete soubory `App.css` a `index.css`, smažte veškerý kód CSS uvnitř nich a začněte s čistým stylovým listem.

Krok 4: Vytvoření první komponenty

React.js je založen na komponentách. Komponenty jsou stavebními kameny vaší webové aplikace. Upravme `App.js` a vytvořme tak naši první komponentu.

Otevřete soubor `src/App.js` a nahraďte jej následujícím kódem:

"Jsx
import Reagovat z 'reagovat';
import './App.css';

funkce Aplikace() {
vrátit se (

);
}

exportovat výchozí aplikaci;
"."

Inicializujte kód React uvnitř `App.js` pomocí JSX (JavaScript XML), což nám umožňuje psát syntaxi podobnou HTML v JavaScriptu. Uložte změny a prohlédněte si výsledky ve vašem prohlížeči.

Krok 5: Přidání nových komponent

Nyní přidejme nové komponenty. Vytvořte novou složku s názvem `components` uvnitř složky `src`. Poté ve složce `components` vytvořte nový soubor `HelloWorld.js`.

"Jsx
import Reagovat z 'reagovat';

funkce HelloWorld() {
vrátit se (

);
}

exportovat výchozí HelloWorld;
"."

Otevřete soubor `App.js` a importujte komponentu `HelloWorld`, kterou jsme právě vytvořili:

"Jsx
import Reagovat z 'reagovat';
import './App.css';
importovat HelloWorld z './components/HelloWorld';

funkce Aplikace() {
vrátit se (

);
}

exportovat výchozí aplikaci;
"."

Nyní `App.js` vykreslí komponentu `HelloWorld` na hlavní stránce.

Krok 6: Přidání správy stavu pomocí useState

React má velmi silné hooky pro správu stavu. Přidejme do naší aplikace nějaký stav. Například přidejme čítač, který se zvyšuje pokaždé, když je kliknuto na tlačítko.

Otevřete soubor `HelloWorld.js` a přidejte hook `state` a `useState`:

"Jsx
importovat React, {useState } z 'react';

funkce HelloWorld() {
const[počet, nastavitPočet] = použítStav(0);

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

vrátit se (

);
}

exportovat výchozí HelloWorld;
"."

Stav `count` je inicializován hodnotou 0 a pokaždé, když je tlačítko kliknuto, funkce `incrementCount` tuto hodnotu zvýší.

Krok 7: Přidání stylu

Pro přidání stylů můžeme použít CSS v souboru `App.css` nebo můžeme použít knihovnu CSS-in-JS, jako je styled-components. Prozatím se držme standardního CSS.

Otevřete soubor `App.css` a přidejte styl:

„css“
.Aplikace {
text-align: center;
}

.App-header {
barva pozadí: 282c34;
min-výška: 100vh;
displej: flex;
směr ohybu: sloupec;
Zarovnat položky: střed;
justify-content: center;
velikost-fontu: calc(10px + 2vmin);
barva bílá;
}

tlačítko {
polstrování: 10px 20px;
horní okraj: 20px;
velikost písma: 16px;
}
"."

Krok 8: Přidání směrování pomocí React Routeru

Pro přidání navigace mezi různými stránkami v naší aplikaci můžeme použít React Router. Nainstalujte React Router spuštěním následujícího příkazu:

“, bash
npm install reagovat-router-dom
"."

Poté vytvořte dvě nové komponenty: `Home.js` a `About.js` ve složce `components`.

`Home.js`:
"Jsx
import Reagovat z 'reagovat';

funkce Domů() {
vrátit se (

);
}

exportovat výchozí nastavení Domů;
"."

Soubor `About.js`:
"Jsx
import Reagovat z 'reagovat';

funkce About() {
vrátit se (

);
}

exportovat výchozí informace O nás;
"."

Dále otevřete `App.js` a nastavte směrování:

"Jsx
import Reagovat z 'reagovat';
import { BrowserRouter jako Router, Trasa, Propojení, Přepínač } from 'react-router-dom';
import './App.css';
importovat HelloWorld z './components/HelloWorld';
importovat Domů z './components/Home';
importovat O programu z './components/About';

funkce Aplikace() {
vrátit se (

);
}

exportovat výchozí aplikaci;
"."

Díky tomu jsme v naší aplikaci přidali základní navigaci mezi různými stránkami.

Zavírání

Toto je základní tutoriál pro vytvoření webové aplikace pomocí React.js. Probrali jsme nastavení projektu, vytváření komponent, správu stavů, styling a směrování. React.js má bohatý ekosystém s řadou knihoven a nástrojů, které vám mohou pomoci s tvorbou složitějších webových aplikací.

Hodně štěstí a doufám, že vám tento tutoriál pomůže začít s React.js!