Úvodní příručka k Reactu: Vytvořte si své první uživatelské rozhraní od nuly

React je JavaScriptová knihovna pro vytváření uživatelských rozhraní. Je vyvíjena a udržována společností Facebook a stala se jedním z nejoblíbenějších nástrojů pro front-end vývoj. Tato příručka vás provede od nuly krok za krokem základními koncepty Reactu a vytvoříte si jednoduché uživatelské rozhraní.

Proč si vybrat React?

React má následující výhody:

• Komponentizace: React rozděluje uživatelské rozhraní na nezávislé, opakovaně použitelné komponenty. Díky tomu je kód snáze udržovatelný a srozumitelný.
• Deklarativní: React používá deklarativní styl programování, což znamená, že stačí popsat, co chcete zobrazit, a React se automaticky postará o aktualizace a vykreslování.
• Efektivní: React používá virtuální DOM a inteligentní diff algoritmus, který efektivně aktualizuje uživatelské rozhraní a snižuje zbytečné vykreslování.
• Rozsáhlá podpora komunity: React má rozsáhlou komunitu a bohatý ekosystém, kde najdete spoustu tutoriálů, knihoven a nástrojů, které vám pomohou s vývojem.
• Multiplatformní schopnosti: React Native vám umožňuje vyvíjet nativní mobilní aplikace (iOS a Android) pomocí Reactu.

Přípravné práce

Před zahájením se ujistěte, že máte na svém počítači nainstalovány následující nástroje:

• Node.js: Node.js je běhové prostředí JavaScriptu, které se používá ke spouštění vývojových nástrojů Reactu. Můžete si jej stáhnout a nainstalovat z https://nodejs.org/.
• npm nebo yarn: npm (Node Package Manager) a yarn jsou správci balíčků JavaScriptu, kteří se používají k instalaci a správě závislostí Reactu. npm se obvykle instaluje společně s Node.js. yarn lze nainstalovat z https://yarnpkg.com/.

Vytvoření vaší první React aplikace

K rychlému vytvoření projektu React použijeme create-react-app.

1. Vytvoření pomocí npm:

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

2. Vytvoření pomocí yarn:

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

Po spuštění výše uvedených příkazů create-react-app automaticky vytvoří adresář s názvem my-first-react-app a inicializuje v něm projekt React. Příkaz npm start nebo yarn start spustí vývojový server a svou React aplikaci si můžete prohlédnout v prohlížeči na adrese http://localhost:3000.

Struktura adresáře

Struktura adresáře projektu vytvořeného pomocí create-react-app je následující: my-first-react-app/ ├── node_modules/ # Projektové závislosti (knihovny) ├── public/ # Statické zdroje (např. HTML soubory) │ ├── index.html # Vstupní HTML soubor aplikace │ └── ... ├── src/ # Zdrojový kód React │ ├── App.css # CSS styly pro komponentu App │ ├── App.js # Komponenta App │ ├── App.test.js # Testovací soubor pro komponentu App │ ├── index.css # Globální CSS styly │ ├── index.js # Vstupní JavaScript soubor aplikace │ ├── logo.svg # React logo │ └── ... ├── .gitignore # Soubor pro ignorování v Gitu ├── package.json # Metadata projektu a závislosti ├── README.md # Dokumentace projektu └── yarn.lock # Soubor pro uzamčení verzí závislostí (pokud se používá yarn)

Pochopení komponent React

Aplikace React se skládají z komponent. Komponenty jsou nezávislé, opakovaně použitelné bloky kódu, které se používají k vykreslení specifických částí uživatelského rozhraní.

V souboru src/App.js můžete vidět výchozí komponentu App:

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;

Vysvětlení kódu:

• import React from 'react'; Importuje knihovnu React.
• function App() { ... } Definuje funkční komponentu s názvem App.
• return ( ... ) Vrací JSX výraz, který popisuje, co má komponenta vykreslit.
• export default App; Exportuje komponentu App, aby ji bylo možné použít v jiných souborech.

JSX (JavaScript XML)

JSX je rozšíření syntaxe JavaScriptu, které vám umožňuje psát kód podobný HTML v kódu JavaScriptu. V příkladu výše je ... JSX výraz. JSX kód je transformován pomocí Babel do standardního JavaScript kódu, aby mu prohlížeč rozuměl.

Úprava komponenty App

Pojďme upravit komponentu App a vytvořit jednoduchý čítač.

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 (
    
      

# Počítadlo

      Aktuální hodnota: {count}

      +
      -
    
  );
}

export default App;

Vysvětlivky změn:

• import React, { useState } from 'react'; Importuje useState Hook. useState je React Hook, který se používá k přidání stavu do funkčních komponent.
• const [count, setCount] = useState(0); Používá useState Hook k vytvoření stavové proměnné s názvem count a inicializuje ji na 0. setCount je funkce pro aktualizaci stavu count.
• const increment = () => { setCount(count + 1); }; Definuje funkci s názvem increment, která slouží ke zvýšení stavu count o 1.
• const decrement = () => { setCount(count - 1); }; Definuje funkci s názvem decrement, která slouží ke snížení stavu count o 1.
• Aktuální hodnota: {count} Zobrazuje hodnotu stavu count na stránce. {count} je JSX výraz, který se používá k vložení JavaScriptové proměnné do JSX kódu.
• + a - Vytvoří dvě tlačítka, která jsou svázána s funkcemi increment a decrement. onClick je obslužný program událostí, který se používá ke spuštění zadané funkce, když je tlačítko kliknuto.

Po uložení souboru src/App.js se prohlížeč automaticky aktualizuje a uvidíte jednoduché počítadlo. Kliknutím na tlačítko "+" se hodnota zvýší, kliknutím na tlačítko "-" se hodnota sníží.

Použití CSS stylů

Můžete použít CSS ke zkrášlení vaší React aplikace. create-react-app podporuje CSS Modules a běžné CSS soubory.

Použití CSS Modules:

CSS Modules vám umožňují vytvářet nezávislé CSS styly pro každou komponentu, čímž se vyhnete konfliktům stylů. Chcete-li použít CSS Modules v komponentě, musíte vytvořit soubor s příponou .module.css.

Například vytvořte soubor s názvem App.module.css a přidejte do něj následující CSS styly:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Poté importujte CSS Modules do souboru src/App.js:

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

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

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

  return (
     {/* Použijte objekt styles pro odkazování na CSS třídy */}
      

# Počítadlo

      Aktuální počet: {count}

      +
      -
    
  );
}

export default App;

Použití běžného CSS souboru:

Můžete také použít běžný CSS soubor k definování globálních stylů. V souboru src/index.css můžete definovat globální styly.

Například přidejte následující CSS styl:

body {
  font-family: sans-serif;
}

Tento styl bude aplikován na celý element body aplikace.

Další kroky

Gratuluji, dokončili jste svou první React aplikaci! Dále se můžete naučit více o Reactu, například:

• Komunikace mezi komponentami: Naučte se, jak mezi sebou mohou komunikovat různé komponenty.
• Zpracování formulářů: Naučte se, jak vytvářet a zpracovávat formuláře.
• Routing: Naučte se, jak používat React Router k vytváření více stránkových aplikací.
• Redux nebo Context API: Naučte se, jak spravovat stav aplikace.
• Hooks: Ponořte se hlouběji do React Hooks, například useEffect, useContext atd.

Pamatujte, že React je technologie, která vyžaduje neustálé procvičování a učení. Přeji vám příjemné učení!