React Tutorial
React je JavaScriptová knihovna pro vytváření uživatelských rozhraní.
React se používá k vytváření jednostránkových aplikací.
React nám umožňuje vytvářet opakovaně použitelné komponenty uživatelského rozhraní.
Začněte se učit Reagovat hned ❯Učení podle příkladů
Náš nástroj "Show React" usnadňuje demonstraci React. Zobrazuje kód i výsledek.
Příklad:
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));
Učení pomocí cvičení
Reagovat Kvíz
Otestujte si své schopnosti React v kvízu.
Vytvořit aplikaci React
Chcete-li se naučit a otestovat React, měli byste si na svém počítači nastavit prostředí React.
Tento tutoriál používá create-react-app
.
Tento create-react-app
nástroj je oficiálně podporovaným způsobem vytváření aplikací React.
Node.js je vyžadován pro použití create-react-app
.
Otevřete svůj terminál v adresáři, ve kterém chcete vytvořit aplikaci.
Spuštěním tohoto příkazu vytvořte aplikaci React s názvem
my-react-app
:
npx create-react-app my-react-app
create-react-app
nastaví vše, co potřebujete ke spuštění aplikace React.
Poznámka:
Pokud jste již dříve instalovali create-react-app
globálně, doporučujeme balíček odinstalovat, abyste zajistili, že npx bude vždy používat nejnovější verzi
create-react-app
. Chcete-li odinstalovat, spusťte tento příkaz: npm uninstall -g create-react-app
.
Spusťte aplikaci React
Spuštěním tohoto příkazu se přesunete do my-react-app
adresáře:
cd my-react-app
Spusťte tento příkaz pro spuštění aplikace React
my-react-app
:
npm start
Objeví se nové okno prohlížeče s nově vytvořenou aplikací React! Pokud ne, otevřete prohlížeč a zadejte
localhost:3000
do adresního řádku.
Výsledek:
Více se o tom dozvíte create-react-app
v kapitole React Get Started .
Co byste již měli vědět
Než začnete s React.JS, měli byste mít středně pokročilé zkušenosti v:
- HTML
- CSS
- JavaScript
Měli byste mít také nějaké zkušenosti s novými funkcemi JavaScriptu zavedenými v ECMAScript 6 (ES6), o nich se dozvíte v kapitole React ES6 .