Úvodná príručka k React: Vytvorte si svoje prvé používateľské rozhranie od nuly

React je JavaScriptová knižnica na vytváranie používateľských rozhraní. Bola vyvinutá a je udržiavaná spoločnosťou Facebook a stala sa jedným z najpopulárnejších nástrojov vo front-end vývoji. Táto príručka vás prevedie od nuly, krok za krokom, základnými konceptmi React a vytvorí jednoduché používateľské rozhranie.

Prečo si vybrať React?

React má nasledujúce výhody:

• Komponenty: React rozdeľuje používateľské rozhranie na nezávislé, opakovane použiteľné komponenty. Vďaka tomu je kód ľahšie udržiavateľný a zrozumiteľný.
• Deklaratívny: React používa deklaratívny štýl programovania, čo znamená, že stačí popísať, čo chcete zobraziť, a React sa automaticky postará o aktualizácie a vykresľovanie.
• Efektívny: React používa virtuálny DOM a inteligentný diff algoritmus, ktorý efektívne aktualizuje používateľské rozhranie a znižuje zbytočné vykresľovanie.
• Obrovská podpora komunity: React má rozsiahlu komunitu a bohatý ekosystém, kde nájdete množstvo tutoriálov, knižníc a nástrojov, ktoré vám pomôžu pri vývoji.
• Multiplatformové možnosti: React Native vám umožňuje používať React na vývoj natívnych mobilných aplikácií (iOS a Android).

Príprava

Pred začatím sa uistite, že máte na svojom počítači nainštalované nasledujúce nástroje:

• Node.js: Node.js je JavaScriptové runtime prostredie na spúšťanie vývojárskych nástrojov React. Môžete si ho stiahnuť a nainštalovať z https://nodejs.org/.
• npm alebo yarn: npm (Node Package Manager) a yarn sú správcovia JavaScriptových balíčkov, ktoré sa používajú na inštaláciu a správu závislostí React. npm sa zvyčajne inštaluje spolu s Node.js. yarn si môžete nainštalovať z https://yarnpkg.com/.

Vytvorte si svoju prvú aplikáciu React

Na rýchle vytvorenie projektu React použijeme create-react-app.

1. Vytvorenie pomocou npm:

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

2. Vytvorenie pomocou yarn:

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

Po vykonaní vyššie uvedených príkazov create-react-app automaticky vytvorí adresár s názvom my-first-react-app a inicializuje v ňom projekt React. Príkaz npm start alebo yarn start spustí vývojový server a svoju aplikáciu React si môžete pozrieť v prehliadači na adrese http://localhost:3000.

Štruktúra adresárov

Štruktúra adresárov projektu vytvoreného pomocou create-react-app je nasledovná:

my-first-react-app/
├── node_modules/         # Knižnice, od ktorých projekt závisí
├── public/               # Statické zdroje (napríklad HTML súbory)
│   ├── index.html        # Vstupný HTML súbor aplikácie
│   └── ...
├── src/                  # Zdrojový kód React
│   ├── App.css           # CSS štýly pre komponent App
│   ├── App.js            # Komponent App
│   ├── App.test.js       # Testovací súbor pre komponent App
│   ├── index.css         # Globálne CSS štýly
│   ├── index.js          # Vstupný JavaScript súbor aplikácie
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Súbor ignorovaných súborov pre Git
├── package.json          # Metadáta projektu a závislosti
├── README.md             # Dokumentácia projektu
└── yarn.lock             # Súbor na uzamknutie verzií závislostí (ak sa používa yarn)

Pochopenie React komponentov

React aplikácie sú tvorené komponentmi. Komponenty sú nezávislé, opakovane použiteľné bloky kódu, ktoré sa používajú na vykreslenie špecifickej časti používateľského rozhrania.

V súbore src/App.js môžete vidieť predvolený komponent 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;

Vysvetlenie kódu:

• import React from 'react'; Importuje knižnicu React.
• function App() { ... } Definuje funkčný komponent s názvom App.
• return ( ... ) Vracia JSX výraz, ktorý popisuje, čo by mal komponent vykresliť.
• export default App; Exportuje komponent App, aby sa dal použiť v iných súboroch.

JSX (JavaScript XML)

JSX je rozšírenie syntaxe JavaScriptu, ktoré vám umožňuje písať kód podobný HTML v kóde JavaScriptu. V príklade vyššie je ... JSX výraz. JSX kód je preložený pomocou Babel do štandardného JavaScript kódu, aby mu prehliadač rozumel.

Úprava App komponentu

Poďme upraviť komponent App a vytvoriť jednoduchý počítadlo.

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álny počet: {count}

      +
      -
    
  );
}

export default App;

Vysvetlivky k úpravám:

• import React, { useState } from 'react'; Importuje useState Hook. useState je React Hook, ktorý sa používa na pridanie stavu do funkčných komponentov.
• const [count, setCount] = useState(0); Používa useState Hook na vytvorenie stavovej premennej s názvom count a inicializuje ju na 0. setCount je funkcia na aktualizáciu stavu count.
• const increment = () => { setCount(count + 1); }; Definuje funkciu s názvom increment, ktorá sa používa na zvýšenie stavu count o 1.
• const decrement = () => { setCount(count - 1); }; Definuje funkciu s názvom decrement, ktorá sa používa na zníženie stavu count o 1.
• `Aktuálny počet: {count}

Zobrazuje hodnotu stavucountna stránke.{count}` je JSX výraz, ktorý sa používa na vloženie premennej JavaScriptu do JSX kódu.

• + a - Vytvára dve tlačidlá, ktoré sú viazané na funkcie increment a decrement. onClick je obsluha udalosti, ktorá sa používa na vykonanie zadanej funkcie, keď sa na tlačidlo klikne.

Po uložení súboru src/App.js sa prehliadač automaticky obnoví a uvidíte jednoduché počítadlo. Kliknutím na tlačidlo "+" sa počet zvýši a kliknutím na tlačidlo "-" sa počet zníži.

Používanie CSS štýlov

Môžete použiť CSS na vylepšenie vzhľadu vašej aplikácie React. create-react-app podporuje CSS Modules a bežné CSS súbory.

Používanie CSS Modules:

CSS Modules vám umožňujú vytvárať nezávislé CSS štýly pre každý komponent, čím sa vyhnete konfliktom štýlov. Ak chcete používať CSS Modules v komponente, musíte vytvoriť súbor s príponou .module.css.

Napríklad, vytvorte súbor s názvom App.module.css a pridajte do neho nasledujúce CSS štýly:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Potom importujte CSS Modules do súboru src/App.js:

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

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

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

  return (
     {/* Použite objekt styles na odkazovanie na CSS triedy */}
      

# Počítadlo

      Aktuálny počet: {count}

      +
      -
    
  );
}

export default App;

Použitie bežného CSS súboru:

Môžete tiež použiť bežný CSS súbor na definovanie globálnych štýlov. V súbore src/index.css môžete definovať globálne štýly.

Napríklad, pridajte nasledujúci CSS štýl:

body {
  font-family: sans-serif;
}

Tento štýl sa použije na celý element body aplikácie.

Ďalšie kroky

Gratulujem, dokončili ste svoju prvú React aplikáciu! Ďalej sa môžete naučiť viac o Reacte, napríklad:

• Komunikácia medzi komponentmi: Naučte sa, ako umožniť komunikáciu medzi rôznymi komponentmi.
• Spracovanie formulárov: Naučte sa, ako vytvárať a spracovávať formuláre.
• Smerovanie (Routing): Naučte sa, ako používať React Router na vytváranie viacstránkových aplikácií.
• Redux alebo Context API: Naučte sa, ako spravovať stav aplikácie.
• Hooks: Ponorte sa hlbšie do React Hooks, ako napríklad useEffect, useContext atď.

Pamätajte, že React je technológia, ktorá si vyžaduje neustále cvičenie a učenie. Prajem vám príjemné učenie!