Lekce 2. - React - Instalace

V lekci 1 byla instalace Reactu provedena klasickým připojením potřebných souborů pomocí elementu < script >. Druhá a doporučovaná možnost je instalace pomocí nástroje CLI.

Instalace pomocí rozhraní příkazového řádku Create-React-App

Místo ručního načítání skriptů do elementu head nastavíme prostředí React instalací create-react-app pomocí nástroje CLI. Tento nástroj nainstaluje React i další knihovny třetích stran, které budeme potřebovat.

Chceme-li nainstalovat a používat toto rozhraní příkazového řádku, musíme mít ve svém počítači nainstalovaný Nodejs, abychom měli přístup k jeho nástroji npm (správce balíčků uzlů).

MV terminálu můžeme zkontrolovat, zda již máme Nodejs a NPM nainstalovaný a.to spuštěním příkazů node -v a npm -v v tomto pořadí. Ujistěme se, že verze NodeJS je 8.10 nebo vyšší a verze npm je 5.2 nebo vyšší.

Pokud jej, ale nemáme nainstalovaný, přejděte na Node.js, stáhněte a nainstalujte nejnovější stabilní verzi.

Poté otevřete terminál a přepněte se do adresáře, do kterého chcete projekt uložit (například cd Desktop). Potom spusťte následující příkaz.

OS Windows:

C:UsersYour Name> npx create-react-app react-todo-app

Pro OS Mac:

milannovak@Milan-MBP-1192 / % cd /Volumes/DataHD/Disk Google/localhost/React
milannovak@Milan-MBP-1192 React % npx create-react-app react-todo-app

Pokud použijeme příkaz npx, tak se aplikace nainstaluje lokálně a nebu se spouštět z globálního umístění.

Tím se vytvoří složka projektu s názvem react-todo-app, která zahrnuje všechny soubory startéru. Nyní otevřeme složku pomocí svého oblíbeného editoru kódu. Můžeme používat VsCode. Vaše počáteční struktura souborů by měla vypadat takto:

react-todo-app
    ├── node_modules
    ├── public
    │    ├── favicon.ico
    │    ├── index.html
    │    ├── logo192.png
    │    ├── logo512.png
    │    ├── manifest.json
    │    └── robots.txt
    ├── src
    │    ├── App.css
    │    ├── App.js
    │    ├── App.test.js
    │    ├── index.css
    │    ├── index.js
    │    ├── logo.svg
    │    ├── reportWebVitals.js
    │    └── setupTest.js
    ├── .gitignore
    ├── package.json
    ├── README.md
    └── yarn.lock

Pojďme se nyní podívat do složky projektu.

Složka node_modules obsahuje všechny knihovny třetích stran, jakož i samotný React. Bude také obsahovat balíčky, které budeme instalovat prostřednictvím npm později. Složka public obsahuje veřejné soubory projektu. Je to místo, kde jsou vaše statické soubory.

Ve veřejné složce public je soubor index.html, který je podobný tomu, co jsme vytvořili již v lekci 1. Má také element kontejneru div kontejneru, kde se zobrazí celá aplikace.

Složka src obsahuje pracovní soubory. Jedním z nich je i index.js který bude sloužit jako vstupní bod do naší aplikace. Nedělejme si starosti se všemi soubory v src, postupně budeme vytvářet své soubory vztahující se k projektu.

Nakonec package.json obsahuje informace o aplikaci. Má určité závislosti knihoven, které jsou aktuálně nainstalovány, a pokud nainstalujeme další balíčky, tak se zde zobrazí.

Spuštění instalovaného projektu

Spustíme jeden ze skriptů, který poskytuje CLI create-react-app. Pokud otevřeme soubor package.json v kořenovém adresáři a zkontrolujeme vlastnosti scripts, zobrazí se skript pro start.

To nám umožňuje spustit vývojový server a vytvořit náš projekt lokálně.

Zpět do počítačového terminálu změňme adresář uvnitř vaší složky projektu cd react-todo-app. Potom spusťte tento příkaz:

C:UsersYour Namereact-todo-app > npm start

Pokud nastane chyba ve spuštění projektu, tak to může být verzí node.js. Potom musíme provést jeho upgrade - brew upgrade node

Pokud používáte VsCode, můžete otevřít jeho integrovaný terminál z nabídky Pohled -> Terminál a spustit npm start.

V terminálu budete informováni o průběhu spuštění a jsou zde uvedeny adresy pro spuštění projektu.

Po dokončení příkazu se aplikace automaticky spustí v okně prohlížeče na portu 3000. Pokud se nic nestane, navštivte localhost: 3000 v adresním řádku prohlížeče. Měla by se zobrazit vaše výchozí aplikace.

Nyní, když provedeme jakékoli změny v našem projektu, tak se automaticky projeví v prohlížeči, kde máme aplikaci spuštěnou.

Psaní aplikace To-dos

V tomto okamžiku můžeme začít vytvářet naši aplikaci React. Soubory, které popisují, co vidíme v rozhraní, jsou ve složce src. Začněme tedy odstraněním všech souborů ve složce src. Frontend se okamžitě rozbije. Je to proto, že React potřebuje soubor index.js ve složce src. Tento soubor je vstupním bodem.

Ve složce src vytvořme nový soubor index.js a přidejme následující kód:

import React from "react"
import ReactDOM from "react-dom"

const element = <h1>Hello from Create React App</h1>

ReactDOM.render(element, document.getElementById("root"))

Jakmile soubor uložíme, zobrazí se v rozhraní frontend text.

Porovnáním tohoto kódu s tím, který jsme psali přímo do souboru HTML na začátku uvidíme, že jsme neudělali nic zvláštního, kromě toho, že importujeme React a ReactDOM místo načítání jejich příslušných CDN.

Poznámka: import je funkcí ES6, která nám umožňuje přivést objekty ( React a ReactDOM) z jejich příslušných modulů ( react a react-dom).
Modul je soubor, který obvykle obsahuje třídy nebo knihovnu funkcí. A create-react-app CLI má oba soubory nainstalované, abychom je mohli používat.

Všimněte si také, že nenačítáme Babel, abychom kompilovali JSX do JavaScriptu. Dodává se s tímto CLI.

V tuto chvíli vykreslujeme prvek JSX přímo ve skutečném DOM prostřednictvím ReactDOM.render. To není praktické. Představte si, že máte aplikaci se stovkami prvků, souhlasíte se mnou, že by bylo těžké ji udržovat.

Takže místo vykreslení jednoduchého prvku vykreslíme komponentu React.

Rychlý pohled na typy komponent

Dříve jsme se zmínili, že aplikace v React je postavena na kombinaci opakovaně použitelných komponent. Tato součást buď funkcí, nebo třídou.

Komponenta třídy je vytvořena pomocí syntaxe třídy ES6, zatímco funkční komponenta je vytvořena napsáním funkcí.

Před verzí React 16.8, pokud bude komponenta spravovat stavová data nebo metodu životního cyklu, byl vyžadován typ založený na třídě. Proto se nazývá jako stavová součást.

Na druhou stranu funkční komponenta před React 16.8 nemůže udržovat logiku stavu a životního cyklu. A jako takový se označuje jako součást bez stavové příslušnosti.

Tento typ je nejjednodušší formou komponenty React, protože se primárně týká toho, jak věci vypadají. Ale teď se věci změnily se zavedením React Hooks.

Nyní můžeme spravovat stavové funkce uvnitř funkční komponenty. To nám dává flexibilitu k vytvoření aplikace Reactu POUZE s funkční komponentou.

Takže bychom mohli jednoduše ignorovat typ založený na třídě a zaměřit se na moderní funkční komponentu. Ale ne!

Při práci na projektu můžeme narazit na třídu. Pochopení všech nástrojů, které máte k dispozici, je tedy prvořadé.

Začneme tedy pomocí komponenty třídy ke správě funkčnosti naší aplikace, jak uvidíme za okamžik. Později se naučíme, jak spravovat tuto logiku ve funkční komponentě pomocí React Hooks.

Co jsou React Hooks?

React Hooks (představené v React od verze 16.8) jsou funkce JavaScriptu, které nám umožňují vytvářet naši komponentu React POUZE s funkcí.

Zařazení má vyřešit některé komplikace spojené s logikou třídy.

Jedním z problémů, s nimiž se často setkáváme u metody životního cyklu třídy, je to, že související logiku často rozdělujeme do různých metod.

Pokud se aplikace zvětší, zjistíme, že metoda životního cyklu třídy může také obsahovat nesouvisející logiku. To může do aplikace přidat další vrstvu složitosti.

Nyní můžeme oddělit logiku podle účelu nebo podle toho, jak spolu souvisí, a nikoli na základě metod životního cyklu.

React poskytuje několik Hooků pro správu většiny případů použití logiky třídy. Také přichází s lepším způsobem, jak vytvořit vlastní hooky, kdykoli chceme znovu použít stavovou logiku mezi komponentami.

Rychlé příklady komponent

Komponenty jsou nezávislé a opakovaně použitelné části kódu. Slouží ke stejnému účelu jako funkce JavaScriptu, ale fungují izolovaně a vracejí HTML pomocí funkce render().

Jak bylo výše uvedeno, komponenty přicházejí ve dvou typech, komponenty třídy a komponenty funkcí.

Při vytváření komponenty Reactu musí název komponenty začínat velkým písmenem.

Komponenta musí obsahovat příkaz extends React.Component, tento zápis vytváří dědičnost React.Component a dává vaší komponentě přístup k funkcím React.Component.

Komponenta také vyžaduje metodu render(), která vrací HTML.

Příklad komponenty třídy

Nyní má vaše aplikace React komponentu nazvanou Car, která vrací prvek.

Příklad komponenty funkce

Jedná se o stejný příklad jako výše, ale místo toho byl vytvořen pomocí komponenty Function.

Komponenta Function také vrací HTML a chová se téměř stejně jako komponenta Class, ale komponenty Class mají některé doplňky.

Komponenty v komponentách

Můžeme se odkazovat na komponenty uvnitř jiných komponent:

Konstruktor v komponentách

Pokud je constructor() ve funkční komponentě, bude tato funkce volána, když bude komponenta spuštěna.

Funkce konstruktoru je místo, kde iniciujete vlastnosti komponenty.

V Reactu by měly být vlastnosti komponenty uchovávány v objektu s názvem state.

Funkce konstruktoru je také místem, kde ctíte dědičnost nadřazené komponenty zahrnutím super() příkazu, který provádí funkci konstruktoru nadřazené komponenty, a vaše komponenta má přístup ke všem funkcím nadřazené komponenty ( React.Component).

Vytváření komponent v souborech

Nezapomeňme, že na začátku jsme naši aplikaci rozložili na strom izolovaných komponent. V případě, že mateřská složka TodoContainer, má čtyři potomky ( Header, InputTodo, TodosList a Navbar). Poté TodosList obsahuje další komponentu nazvanou TodoItem.

To znamená, že vytváříme celkem šest komponent. Můžeme se opětovně pro připomenutí podívat na rozložení komponent.

Vytvořme následující soubory. Začněte tím, že vytvoříme složku s názvem components uvnitř adresáře src a vytvoříme tyto komponenty souborů - TodoContainer.js, Header.js, InputTodo.js, TodosList.js, Navbar.js a TodoItem.js.

Dále přidejme následující kód do souboru nadřazené komponenty TodoContainer.js a uložte jej:

import React from "react"
class TodoContainer extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello from Create React App</h1>
        <p>I am in a React Component!</p>
      </div>
    )
  }
}
export default TodoContainer

Také aktualizujme soubor index.js. Vložte do něj následující kód:

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
ReactDOM.render(<TodoContainer />, document.getElementById("root"))

Uložme soubor a zkontrolujme rozhraní. Na obrazovce bychom měli mít text záhlaví a odstavce.

Co jsme udělali

V nadřazeném souboru jsme začali vytvořením třídy komponenty React (pod názvem TodoContainer rozšířením třídy Component v knihovně React. Uvnitř této třídy máme metodu render(), kde vracíme JSX, který se vykresluje na obrazovce.

Tato metoda se liší od ReactDOM.render(), kterou jsem dříve použili, protože zde se render() používá pro vykreslení komponenty. Na rozdíl od ostatních nebere žádné argumenty a přímo neinteraguje s prohlížečem. Zaměřuje se na vrácení odpovídajících prvků React pro tuto komponentu. Nezapomeňme, že tyto prvky React jsou objekty Virtual DOM.

<React.Fragment>
  <h1>Hello from Create React App</h1>
  <p>I am in a React Component!</p>
</React.Fragment>

Okamžitě jsme měli vytvořenou rodičovskou komponentu < TodoContainer >, kterou jsme v index.js souboru vykreslili pomocí vlastní značky podobné HTML. Nyní místo vykreslení jednoduchého prvku JSX vykreslujeme komponentu React.

Několik dalších poznámek:

• Je dobrým zvykem používat UpperCamelCase jako název souboru komponenty (tj. TodoContainer.js).
• Názvy komponent v React musí být psány velkými písmeny. V našem případě TodoContainer.

To je nezbytné, aby jeho instance (např. < TodoContainer >) V JSX nebyla považována za značku DOM / HTML. Poznamenejte si také cestu k souboru komponenty použitou v index.js souboru. Ujistěte se, že vždy zadáváte relativní cestu k tomuto souboru z aktuálního adresáře.

V našem případě "./components/TodoContainer". To znamená, že soubor TodoContainer je umístěn ve složce components uvnitř aktuálního adresáře.

Výchozí přípona souboru je .js, takže ji nemusíme připojovat.

Povolení strict režimu v aplikaci React

Během fáze vývoje aplikace bychom chtěli dostávat oznámení o potenciálních problémech spojených s aplikací, abychom mohli problémy rychle vyřešit.

React nám umožňuje aktivovat tzv. StrictMode, který provádí kontrolu a protokoly pro varovné zprávy za běhu.

Abychom to povolili, jednoduše zabalíme naši komponentu < TodoContainer > takto:

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  </React.StrictMode>,
  document.getElementById("root")
)

Jak vidíme, zabalujeme kořenovou komponentu  v souboru index.js. To umožňuje kontrolu a varování nejen pro komponentu, ale také pro její potomky.

Pokud chceme aktivovat kontrolu konkrétní komponenty, měli bychom namísto kořenové komponenty zabalit tuto konkrétní komponentu. Stejně jako Fragment, StrictMode nevykresluje žádné uživatelské rozhraní ani se nezobrazuje v DOM.

Nyní se ve vaší konzole DevTools zobrazí upozornění.