Tutoriál ReactJS pro začátečníky

Co je ReactJS?

ReactJS je open-source front-end JavaKnihovna skriptů pro vytváření uživatelských rozhraní. ReactJS je spravován společností Meta (dříve Facebook) a komunitou jednotlivých vývojářů a společností. Je široce používán jako základ pro tvorbu jednostránkových a mobilních aplikací. Je velmi snadno použitelný a umožňuje uživatelům vytvářet opakovaně použitelné komponenty uživatelského rozhraní.

Než napíšete první řádek kódu v Reactu, je užitečné vědět, co odlišuje knihovnu od prostého kódu. JavaSkript. Následující část se zaměří na jeho základní funkce.

Vlastnosti ReactJS

JSX: JSX je rozšíření pro JavaSkript. I když není povinné používat JSX v Reactu, je to jedna z dobrých funkcí a snadno se používá.

KomponentyKomponenty jsou jako čisté JavaSkriptové funkce, které pomáhají zjednodušit kód rozdělením logiky do opakovaně použitelného nezávislého kódu. Komponenty můžeme používat jako funkce a komponenty jako třídy. Komponenty mají také stav a vlastnosti, což usnadňuje život. Uvnitř komponenty třídy se stav a vlastnosti udržují.

Virtuální DOM: React vytváří virtuální DOM, tj. mezipaměť datových struktur v paměti. V DOMu prohlížeče se později aktualizují pouze finální změny, což zajišťuje rychlé vykreslování.

JavaVýrazy skriptu: JS výrazy lze v JSX souborech použít pomocí složených závorek, například {}.

Výhody ReactJS

Zde jsou důležité výhody/výhody používání ReactJS:

• ReactJS používá virtuální DOM, který využívá mezipaměť datových struktur v paměti, a v DOMu prohlížeče se aktualizují pouze poslední změny. Díky tomu je aplikace rychlejší.
• Komponenty dle vlastního výběru si můžete vytvořit pomocí funkce komponent React. Komponenty lze znovu použít a jsou také užitečné při údržbě kódu.
• ReactJS je open-source JavaKnihovna skriptů, takže je snadné s ní začít.
• ReactJS se stal velmi populárním během krátké doby a pohání produkty jako Facebook a InstagramPoužívá ho mnoho slavných společností, jako je Apple, Netflix, Etc.
• Meta udržuje knihovnu ReactJS, takže je dobře udržovaná a aktualizovaná.
• ReactJS lze použít k vývoji bohatého uživatelského rozhraní pro stolní i mobilní aplikace.
• Snadné ladění a testování, protože většina kódování se provádí v JavaScénář spíše než v HTML.

Nevýhody ReactJS

Zde jsou nevýhody/nevýhody používání ReactJS:

• Většina kódu je napsána v JSX, tj. HTML a CSS jsou součástí JavaSkript. Může to být docela matoucí, protože většina ostatních frameworků preferuje keeping HTML odděleně od JavaKód skriptu.
• Velikost souboru ReactJS je poměrně velká.

S ohledem na kompromisy jste připraveni nastavit React. Nejrychlejší způsob, jak si to vyzkoušet, je přímo z CDN, kterou si probereme jako první; nastavení založená na npm pro reálné projekty budou následovat poté.

Pomocí ReactJS z CDN

Abychom mohli začít pracovat s Reactem, musíme nejprve přidat ReactJS na naši stránku. S ReactJS můžete snadno začít pracovat pomocí CDN. JavaSoubory skriptů, jak je uvedeno níže.

Pro získání odkazů na CDN přejděte na starší stránky s dokumentací k Reactu, tj. https://legacy.reactjs.org/docs/cdn-links.htmla požadované soubory jsou vysvětleny na následujícím obrázku.

Pro dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Pro prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Nahradit verze s verzí Reactu, kterou chcete pro react.development.js i react-dom.development.js. Na této stránce používáme verzi 16, takže níže uvedené příklady fungují beze změny.

Pokud plánujete používat soubory CDN, nezapomeňte zachovat atribut crossorigin, abyste předešli problémům s navzájemným přenosem. Kód ReactJS nelze spustit přímo v prohlížeči a je nutné jej převést pomocí Babelu do prostého kódu. JavaSkript před spuštěním v prohlížeči.

Zde je skript BabelJS, který lze použít:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Zde je funkční příklad ReactJS s použitím CDN souborů a skriptu BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Výstup:

V další kapitole se podíváme na detaily kódu; podívejme se na práci se soubory CDN. Přímé používání skriptu Babel není dobrým postupem a nováčci by ho prozatím měli používat pouze k učení se ReactJS. V produkčním prostředí budete muset React nainstalovat pomocí balíčku npm.

Použití balíčků NPM

Ujistěte se, že máte nainstalovaný Node.js. Pokud ho nemáte, přečtěte si tento tutoriál pro Node.js (https://www.guru99.com/node-js-tutorial.html) instalace.

Jakmile máte nainstalovaný Node.js, vytvořte složku reagovatproj/.

Chcete-li začít s nastavením projektu, spusťte příkaz npm init.

Takto bude vypadat struktura složek:

reactproj\
package.json

Nyní nainstalujeme balíčky, které potřebujeme.

Zde je seznam balíčků pro ReactJS. React jsme připnuli k verzi 16, takže ReactDOM.render příklady na této stránce fungují přesně tak, jak je znázorněno:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Otevřete příkazový řádek a spusťte výše uvedené příkazy ve složce reactproj/.

Vytvořte složku src / kam se bude ukládat veškerý JS kód. Veškerý kód pro projekt ReactJS bude k dispozici ve složce src/. Vytvořte soubor index.js a importujte react a react-dom, jak je znázorněno níže.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Napsali jsme základní kód pro ReactJS. Podrobnosti si vysvětlíme v další kapitole. Chceme zobrazit Ahoj, z Guru99 návody, a totéž je přiřazeno elementu DOM s ID „root“. Je převzato ze souboru index.html, což je počáteční soubor, jak je znázorněno níže.

Vytvořte složku public/ a přidejte do ní soubor index.html, jak je znázorněno níže.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Balíček react-scripts se postará o kompilaci kódu a spuštění serveru pro zobrazení HTML souboru, tj. index.html. Do package.json je třeba přidat příkaz, který se postará o použití react-scripts pro kompilaci kódu a spuštění serveru, jak je znázorněno níže:

 "scripts": {
    "start": "react-scripts start"
  }

Po instalaci všech balíčků a přidání výše uvedeného příkazu je výsledný soubor package.json následující:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Chcete-li zahájit testování ReactJS, spusťte příkaz:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Otevře se prohlížeč s URL http://localhost:3000/ jak je uvedeno níže:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Stejný postup použijeme k provedení JavaSoubory skriptů také v následujících kapitolách. Všechny soubory .js a .jsx přidejte do složky src/. Struktura souborů bude následující:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Jak vytvořit nastavení prvního projektu React

Zde je podrobný návod v tomto tutoriálu ReactJS, jak začít s první aplikací React.

Krok 1) Importujte balíčky reakcí.
1. Chcete-li začít s ReactJS, musíme nejprve importovat balíčky reakce následovně.

import React from 'react';
import ReactDOM from 'react-dom';

2. Uložte soubor jako index.js do složky src/.

Krok 2) Pište jednoduše Code.
V tomto tutoriálu React JS napíšeme jednoduchý kód, ve kterém zobrazíme zprávu „Dobrý den, z Guru99 tutoriálů!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render přidá tag k elementu s ID root. Zde je HTML soubor, který máme:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Krok 3) Zkompilujte Code.

Dále v tomto tutoriálu React.js musíme zkompilovat kód, abychom získali výstup v prohlížeči.

Zde je struktura složek:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Přidali jsme příkazy pro kompilaci konečného souboru v package.json následovně:

"scripts": {
    "start": "react-scripts start"
  },

Pro kompilaci finálního souboru spusťte následující příkaz:

npm run start

Po spuštění výše uvedeného příkazu se soubory zkompilují a upozorní vás na případnou chybu. Pokud vše vypadá v pořádku, otevře se prohlížeč a stránka se spustí na adrese http://localhost:3000/

Příkaz: npm spuštění spuštění:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Krok 4) Zkontrolujte výstup.
Jedno URL http://localhost:3000 se po kompilaci kódu otevře v prohlížeči, jak je znázorněno níže:

Jak nastavit React s Vite (moderní přístup)

Výše uvedené nastavení react-scripts pochází z nástroje Create React App (CRA), který byl po léta standardním nástrojem. Tým React oficiálně ukončil Create React App v únoru 2025, takže nové projekty by měly místo toho používat moderní nástroj pro sestavování. Nejoblíbenější volbou je dnes Žije, který se spouští rychleji a vytváří menší sestavení.

Zde je návod, jak vytvořit nový projekt v Reactu pomocí Vite:

Krok 1) Spusťte příkaz scaffolding ve svém terminálu:

npm create vite@latest my-react-app -- --template react

Krok 2) Přesuň se do složky a nainstaluj závislosti:

cd my-react-app
npm install

Krok 3) Spusťte vývojový server:

npm run dev

Vite nabízí aplikaci na adrese http://localhost:5173/ ve výchozím nastavení se znovu načte při uložení souboru.

Klíčové rozdíly oproti staršímu nastavení na této stránce:

• Vstupní soubor je src/main.jsx místo src/index.js.
• Nainstaluje nejnovější React, který používá createRoot místo ReactDOM.render.
• Soubor index.html se nachází v kořenovém adresáři projektu, nikoli v public/.
• Stavby se vyrábějí s npm run build do složky dist/.

Pro full-stack potřeby, jako je směrování a vykreslování serveru, tým React také doporučuje frameworky jako Další.jsVšechno, co se naučíte v následujících kapitolách – JSX, komponenty, stav a props – platí beze změny v projektu Vite nebo Next.js.

Co je JSX?

JSX je rozšíření pro JavaSkript. Jedná se o šablonový skript, ve kterém budete moci používat HTML a JavaSpolečně napište scénář.

Zde je jednoduchý příklad kódu JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Proč potřebujeme JSX v Reactu?

Pro uživatelské rozhraní potřebujeme HTML a každý prvek v DOM bude mít události, které bude třeba zpracovávat, změny stavu atd.

V případě Reactu nám to umožňuje používat HTML a JavaSkriptujte ve stejném souboru a efektivně se starajte o změny stavu v DOMu.

Výrazy v JSX

Zde je jednoduchý příklad, jak používat výrazy v JSX.

V dřívějších příkladech ReactJS jsme napsali něco jako:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Nyní upravíme výše uvedený kód tak, aby obsahoval výrazy. Výrazy se používají uvnitř složených závorek {} a během běhu se rozšiřují. Výrazy v Reactu jsou stejné jako JavaVýrazy skriptu.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Nyní totéž otestujeme v prohlížeči.

Na výše uvedeném snímku obrazovky vidíte, že výraz {display} není nahrazen. React neví, co dělat, když je výraz použit uvnitř souboru .js.

Nyní přidejte změny a vytvořte soubor .jsx, jak je znázorněno níže:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Přidali jsme požadovaný kód a použijeme soubor test.jsx v index.js. Chceme, aby h1tag proměnná, která se má použít uvnitř index.js, takže se exportuje, jak je znázorněno výše v test.jsx.

Zde je upravený kód v index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Abychom mohli použít soubor test.jsx v index.js, musíme jej nejprve importovat, jak je znázorněno níže:

import h1tag from './test.jsx';

Nyní můžeme použít h1tag v ReactDOM.render, jak je znázorněno níže:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Zde je výstup, když totéž zkontrolujeme v prohlížeči:

Co jsou komponenty v ReactJS?

Komponenty jsou jako čisté JavaSkriptové funkce, které usnadňují kód rozdělením logiky do opakovaně použitelného nezávislého kódu.

Komponenty jako funkce

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Vytvořili jsme funkci tzv Ahoj která vrací tag h1, jak je znázorněno výše. Název funkce funguje jako element, jak je znázorněno níže:

const Hello_comp = <Hello />;
export default Hello_comp;

Součást Ahoj používá se jako HTML tag, tj. , přidělený k Hello_comp proměnná a ta se exportuje pomocí exportu.

Nyní použijeme tuto komponentu v souboru index.js, jak je znázorněno níže:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Zde je výstup v prohlížeči:

Třída jako komponenta

Zde je příklad ReactJS, který používá třídu jako komponentu.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Komponentu Hello v souboru index.js můžeme použít takto:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Komponenta Hello se používá jako HTML tag, tj. .

Zde je výstup téhož.

Komponenty třídy vs. funkční komponenty a hooky

Nyní jste viděli oba způsoby, jak napsat komponentu, takže který byste měli použít? Tato stránka učí komponenty třídy, protože explicitně popisují koncepty stavu a životního cyklu, což je cenné pro začátečníky a stále se objevuje ve starších kódových bázích. Od zavedení hooků v Reactu 16.8 však mohou funkční komponenty také uchovávat stav a jsou doporučeným stylem pro veškerý nový kód.

Vzhled	Komponenta třídy	Funkční komponenta s hooky
Stát	this.state a this.setState()	useState() Hook
Životní cyklus	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect() Hook pokrývá všechny tři
Syntax	Více standardního kódu (konstruktor, bind, this)	Kratší, žádné toto klíčové slovo
Status	Podporované, starší styl	Doporučeno pro nový kód

Zde je příklad stavu z této stránky přepsaný pomocí hooku useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Obě verze vykreslují stejný výstup. Naučte se syntaxi tříd použitou v následujících kapitolách a poté si procvičte převod každého příkladu na hooky.

Co je to stát v ReactJS?

Stát je JavaObjekt skriptu, podobný props, který obsahuje data pro použití s ​​renderováním ReactJS. Stavová data jsou privátní objekt a používají se v komponentách uvnitř třídy.

Příklad státu

Zde je funkční příklad, jak použít stav uvnitř třídy.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Toto dostaneme, když to otestujeme v prohlížeči:

Co jsou rekvizity v ReactJS?

Props jsou vlastnosti, které se používají uvnitř komponenty. Fungují jako globální objekty nebo proměnné, které lze použít uvnitř komponenty.

Podpěry k funkčnímu komponentu

Zde je příklad předání rekvizit funkční komponentě.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Jak je uvedeno výše, přidali jsme msg připisovat komponenta. Stejný přístup lze provést jako rekvizity uvnitř funkce Hello, což je objekt, který bude mít msg podrobnosti atributu a totéž se používá jako výraz.

Komponenta se v index.js používá následovně:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Zde je výstup v prohlížeči:

Rekvizity ke komponentě třídy

Pro přístup k propsům ve třídě to můžeme udělat následovně:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Jedno msg atribut je předán komponentě v index.js takto:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Toto je výstup v prohlížeči:

Zkontrolujte také: - Výukový program AngularJS pro začátečníky: Naučte se AngularJS krok za krokem

Životní cyklus součásti

Po probrání komponent, stavu a vlastností je dalším krokem pochopení, kdy React volá metody vaší komponenty. Životní cyklus komponenty je rozdělen na fáze inicializace, připojení, aktualizace a odpojení.

Zde je podrobný popis každé fáze.

Komponenta v ReactJS má následující fáze:

Inicializace: Toto je první fáze životního cyklu součásti.

Zde bude mít výchozí rekvizity a stav na počáteční úrovni.

MontážV této fázi je komponenta vykreslena uvnitř DOMu. V připojovaném stavu máme přístup k následujícím metodám:

• render(): Tuto metodu máte k dispozici pro všechny vytvořené komponenty. Vrací HTML uzel.
• componentDidMount(): Tato funkce se volá ihned po přidání komponenty do DOMu.

AktualizaceV tomto stavu uživatel interaguje s DOMem a ten se aktualizuje. Například zadáte něco do textového pole, takže se aktualizují vlastnosti stavu.

Následující metody jsou k dispozici ve stavu aktualizace:

• shouldComponentUpdate(): volá se před opětovným vykreslením; umožňuje rozhodnout, zda se má komponenta aktualizovat. Vrácení hodnoty true znovu vykreslí komponentu.
• componentDidUpdate(): volá se po aktualizaci komponenty.

Demontáž: Tento stav nastává, když komponenta není potřeba nebo je odstraněna.

Následuje metoda dostupná ve stavu odpojení:

• componentWillUnmount(): volá se těsně před odstraněním nebo zničením komponenty.

Pracovní příklad metod životního cyklu

Zde je funkční příklad, který ukazuje metody volané v každé fázi.

Příklad: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Když zkontrolujete výstup v prohlížeči:

V konzoli prohlížeče získáte:

Když uživatel zadá do textového pole:

V konzoli se zobrazují následující zprávy:

Nyní, když víte, kdy se komponenta vykresluje a aktualizuje, aplikujme stavy a události na praktický případ použití: zpracování uživatelského vstupu prostřednictvím formulářů.

Práce s formuláři

V ReactJS, vstupní prvky HTML jako , a <select /> mají svůj vlastní stav a je třeba je aktualizovat při interakci uživatele pomocí metody setState().

V této kapitole se podíváme na to, jak pracovat s formuláři v ReactJS.

Zde je pracovní příklad:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

U vstupních polí potřebujeme zachovat stav, takže k tomu React poskytuje speciální metodu s názvem setState, což pomáhá udržovat stav vždy, když dojde ke změně. V reálné aplikaci také volejte event.preventDefault() uvnitř formSubmit, aby se zabránilo opětovnému načtení stránky prohlížečem při odeslání.

Použili jsme události onChange a onClick pro textové pole a tlačítko pro odeslání. Když uživatel zadá text do textového pole, zavolá se událost onChange a pole name uvnitř objektu state se aktualizuje, jak je znázorněno níže:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Výstup v prohlížeči je následující:

Krok 1) Zadejte své jméno do textového pole:

Krok 2) Klikněte na tlačítko odeslat:

Práce s událostmi v ReactJS

Formuláře jsou pouze jedním ze zdrojů interakce s uživatelem. Práce s událostmi v ReactJS je stejná, jako byste to dělali v JavaSkript. Můžete použít všechny obslužné rutiny událostí, které se používají ve JavaSkript. Metoda setState() se používá k aktualizaci stavu, když uživatel interaguje s jakýmkoli HTML elementem.

Zde je funkční příklad, jak používat události v ReactJS.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

U vstupních polí potřebujeme zachovat stav, takže k tomu React poskytuje setState metoda, která pomáhá udržovat stav vždy, když dojde ke změně.

Využili jsme události při změně a onclick na textovém poli a tlačítku. Když uživatel píše do textového pole, při změně událost je volána a pole name uvnitř objektu state je aktualizováno, jak je znázorněno níže:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Zde je výstup v prohlížeči:

Když uživatel zadá jméno:

Když uživatel klikne na tlačítko Klikněte sem:

Práce s Inline CSS v ReactJS

Jakmile vaše komponenty zpracují data a události, posledním krokem je jejich stylování. Podíváme se na funkční příklad, abychom pochopili inline CSS v ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Do tagu h1 jsem přidal styl color: 'red'.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Výstup v prohlížeči je následující:

Můžete vytvořit objekt se stylem, který chcete na elementu, a použít výraz k přidání stylu, jak je znázorněno ve výše uvedeném příkladu.

Práce s externím CSS v ReactJS

Vytvořme externí CSS soubor. Vytvořte složku css/ a přidejte do ní soubor style.css.

style.css

.h1tag {
color:red;
}

Přidejte styl.css do svého souboru index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Nyní přidejme třídu do tagu h1 v souboru .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Atribut className obsahuje podrobnosti o třídě. Všimněte si, že JSX používá jméno třídy místo atributu class v HTML, protože class je rezervované klíčové slovo v JavaSkript. Nyní si ho otestujme v prohlížeči.

Toto vidíte, když si v prohlížeči prohlédnete tag h1:

Vidíte, že třída class=”h1tag” byla úspěšně přidána do tagu h1.

Proč byl ReactDOM.render nahrazen createRoot

Každý příklad na této stránce připojuje aplikaci pomocí ReactDOM.render, což je správné pro React 16 a 17, verze, na které je tento kurz zaměřen. React 18, vydaný v březnu 2022, nahradil tento vstupní bod rozhraním createRoot API a React 19 ReactDOM.render zcela odstranil. Důvodem je souběžnost: createRoot umožňuje Reactu připravit několik verzí uživatelského rozhraní současně, přerušit vykreslování s nízkou prioritou a udržovat ty...ping a animace plynulé. Funkce jako automatické dávkování, useTransition a streamování založené na napětí jsou na tom závislé.

Moderní ekvivalent index.js použitého na této stránce vypadá takto:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Všechno ostatní, co jste se zde naučili – komponenty, JSX, stav, vlastnosti a události – funguje stejně i po této jednořádkové změně v vstupním bodě. Rozdíly ve verzích, jako je tento, se často objevují v Otázky na pohovoru s React JS, takže se vyplatí porozumět oběma API.

Nejčastější dotazy

Zkontrolujte také: - 70 nejčastějších otázek a odpovědí v pohovoru React (aktualizováno)