Co je React?
React je JavaScriptová knihovna vytvořená Facebookem
React je knihovna uživatelského rozhraní (UI).
React je nástroj pro vytváření komponent uživatelského rozhraní
React Quickstart Tutorial
Toto je návod pro rychlý start.
Než začnete, měli byste mít základní znalosti:
Úplný návod:
Spustit tutoriál React ❯Přidání React na stránku HTML
Tento tutoriál pro rychlý start přidá React na stránku, jako je tato:
Příklad
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Co je Babel?
Babel je kompilátor JavaScriptu, který dokáže přeložit značkovací nebo programovací jazyky do JavaScriptu.
S Babel můžete používat nejnovější funkce JavaScriptu (ES6 - ECMAScript 2015).
Babel je k dispozici pro různé konverze. React používá Babel k převodu JSX na JavaScript.
Vezměte prosím na vědomí, že pro používání Babel je potřeba <script type="text/babel">.
Co je JSX?
JSX znamená J ava S cript X ML.
JSX je rozšíření JavaScriptu podobné XML/HTML.
Příklad
const element = <h1>Hello World!</h1>
Jak můžete vidět výše, JSX není JavaScript ani HTML.
JSX je rozšíření syntaxe XML pro JavaScript, které také přichází s plnou silou ES6 (ECMAScript 2015).
Stejně jako HTML, značky JSX mohou mít názvy značek, atributy a potomky. Pokud je atribut zabalen do složených závorek, je hodnotou výraz JavaScript.
Všimněte si, že JSX nepoužívá uvozovky kolem textového řetězce HTML.
Reagovat DOM Render
Metoda ReactDom.render() se používá k vykreslení (zobrazení) prvků HTML:
Příklad
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX výrazy
Výrazy lze v JSX použít tak, že je zabalíte do složených {} závorek.
Příklad
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
React Elements
Aplikace React jsou obvykle postaveny na jediném prvku HTML .
Vývojáři React tomu často říkají kořenový uzel (kořenový prvek):
<div id="root"></div>
Prvky reakce vypadají takto:
const element = <h1>Hello React!</h1>
Prvky se vykreslují (zobrazují) pomocí metody ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Reagující prvky jsou neměnné . Nelze je změnit.
Jediný způsob, jak změnit prvek React, je pokaždé vykreslit nový prvek:
Příklad
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
React Components
Komponenty React jsou funkce JavaScriptu.
Tento příklad vytvoří komponentu React s názvem "Welcome":
Příklad
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React může také používat třídy ES6 k vytváření komponent.
Tento příklad vytvoří komponentu React s názvem Welcome s metodou vykreslení :
Příklad
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
React Vlastnosti součásti
Tento příklad vytvoří komponentu React s názvem "Vítejte" s argumenty vlastnosti:
Příklad
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React může také používat třídy ES6 k vytváření komponent.
Tento příklad také vytvoří komponentu React s názvem "Vítejte" s argumenty vlastnosti:
Příklad
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Kompilátor JSX
Příklady na této stránce zkompilují JSX v prohlížeči.
Pro produkční kód by měla být kompilace provedena samostatně.
Vytvořit aplikaci React
Facebook vytvořil aplikaci Create React Application se vším, co potřebujete k vytvoření aplikace React.
Jedná se o vývojový server, který používá Webpack ke kompilaci souborů CSS React, JSX a ES6 s automatickou předponou.
Aplikace Create React používá ESLint k testování a varování před chybami v kódu.
Chcete-li vytvořit aplikaci Create React, spusťte na svém terminálu následující kód:
Příklad
npx create-react-app react-tutorial
Ujistěte se, že máte Node.js 5.2 nebo vyšší. V opačném případě musíte nainstalovat npx:
Příklad
npm i npx
Spusťte o jednu složku výše od místa, kde chcete, aby aplikace zůstala:
Příklad
C:\Users\myUser>npx create-react-app react-tutorial
Výsledek úspěchu:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start