Czym jest React?
React to biblioteka JavaScript stworzona przez Facebook
React to biblioteka interfejsu użytkownika (UI)
React to narzędzie do budowania komponentów UI
Samouczek szybkiego startu React
To jest samouczek Szybki start.
Zanim zaczniesz, powinieneś mieć podstawową wiedzę na temat:
Pełny samouczek:
Uruchom samouczek React ❯Dodawanie React do strony HTML
Ten samouczek szybkiego startu doda React do strony takiej jak ta:
Przykład
<!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>
Czym jest Babel?
Babel to kompilator JavaScript, który może tłumaczyć języki znaczników lub programowania na JavaScript.
Dzięki Babel możesz korzystać z najnowszych funkcji JavaScript (ES6 - ECMAScript 2015).
Babel jest dostępny dla różnych konwersji. React używa Babel do konwersji JSX na JavaScript.
Należy pamiętać, że do korzystania z Babel potrzebny jest <script type="text/babel">.
Co to jest JSX?
JSX oznacza JavaScript Skrypt X ML .
JSX jest rozszerzeniem JavaScriptu podobnym do XML/HTML.
Przykład
const element = <h1>Hello World!</h1>
Jak widać powyżej, JSX to nie JavaScript ani HTML.
JSX to rozszerzenie składni XML dla języka JavaScript, które jest również wyposażone w pełną moc ES6 (ECMAScript 2015).
Podobnie jak HTML, znaczniki JSX mogą mieć nazwy znaczników, atrybuty i dzieci. Jeśli atrybut jest owinięty w nawiasy klamrowe, wartością jest wyrażenie JavaScript.
Zauważ, że JSX nie używa cudzysłowów wokół ciągu tekstowego HTML.
React DOM Render
Metoda ReactDom.render() służy do renderowania (wyświetlania) elementów HTML:
Przykład
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Wyrażenia JSX
Wyrażenia mogą być używane w JSX poprzez zawijanie ich w nawiasy klamrowe {} .
Przykład
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Elementy reakcji
Aplikacje React są zwykle budowane wokół pojedynczego elementu HTML .
Deweloperzy Reacta często nazywają to węzłem głównym (elementem głównym):
<div id="root"></div>
Elementy React wyglądają tak:
const element = <h1>Hello React!</h1>
Elementy są renderowane (wyświetlane) za pomocą metody ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Elementy React są niezmienne . Nie można ich zmienić.
Jedynym sposobem na zmianę elementu React jest renderowanie nowego elementu za każdym razem:
Przykład
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Reaguj Komponenty
Komponenty React to funkcje JavaScript.
Ten przykład tworzy komponent React o nazwie „Witamy”:
Przykład
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React może również używać klas ES6 do tworzenia komponentów.
Ten przykład tworzy komponent React o nazwie Welcome za pomocą metody render :
Przykład
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Właściwości komponentu reakcji
Ten przykład tworzy komponent React o nazwie „Welcome” z argumentami właściwości:
Przykład
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React może również używać klas ES6 do tworzenia komponentów.
Ten przykład tworzy również komponent React o nazwie „Welcome” z argumentami właściwości:
Przykład
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Kompilator JSX
Przykłady na tej stronie kompilują JSX w przeglądarce.
W przypadku kodu produkcyjnego kompilację należy wykonać osobno.
Utwórz aplikację React
Facebook stworzył aplikację Create React zawierającą wszystko, czego potrzebujesz do zbudowania aplikacji React.
Jest to serwer programistyczny, który używa pakietu Webpack do kompilacji plików CSS React, JSX i ES6 z automatycznym prefiksem.
Aplikacja Create React używa ESLint do testowania i ostrzegania o błędach w kodzie.
Aby utworzyć aplikację Create React, uruchom następujący kod na swoim terminalu:
Przykład
npx create-react-app react-tutorial
Upewnij się, że masz Node.js 5.2 lub nowszy. W przeciwnym razie musisz zainstalować npx:
Przykład
npm i npx
Rozpocznij jeden folder od miejsca, w którym chcesz umieścić swoją aplikację:
Przykład
C:\Users\myUser>npx create-react-app react-tutorial
Wynik sukcesu:
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