Qu'est-ce que React ?
React est une bibliothèque JavaScript créée par Facebook
React est une bibliothèque d'interface utilisateur (UI)
React est un outil pour créer des composants d'interface utilisateur
Tutoriel de démarrage rapide React
Ceci est un tutoriel de démarrage rapide.
Avant de commencer, vous devez avoir une compréhension de base de :
- Qu'est-ce que le HTML
- Qu'est-ce que CSS
- Qu'est-ce que le DOM
- Qu'est-ce que l' ES6
- Qu'est-ce que Node.js
- Qu'est-ce que le npm
Pour un tutoriel complet :
Démarrer le didacticiel React ❯Ajouter React à une page HTML
Ce tutoriel de démarrage rapide ajoutera React à une page comme celle-ci :
Exemple
<!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>
Qu'est-ce que Babel ?
Babel est un compilateur JavaScript capable de traduire des langages de balisage ou de programmation en JavaScript.
Avec Babel, vous pouvez utiliser les dernières fonctionnalités de JavaScript (ES6 - ECMAScript 2015).
Babel est disponible pour différentes conversions. React utilise Babel pour convertir JSX en JavaScript.
Veuillez noter que <script type="text/babel"> est nécessaire pour utiliser Babel.
Qu'est-ce que JSX ?
JSX signifie Java Script X ML .
JSX est une extension de type XML/HTML pour JavaScript.
Exemple
const element = <h1>Hello World!</h1>
Comme vous pouvez le voir ci-dessus, JSX n'est ni JavaScript ni HTML.
JSX est une extension de syntaxe XML pour JavaScript qui intègre également toute la puissance d'ES6 (ECMAScript 2015).
Tout comme HTML, les balises JSX peuvent avoir des noms de balises, des attributs et des enfants. Si un attribut est entouré d'accolades, la valeur est une expression JavaScript.
Notez que JSX n'utilise pas de guillemets autour de la chaîne de texte HTML.
Réagir au rendu DOM
La méthode ReactDom.render() est utilisée pour restituer (afficher) les éléments HTML :
Exemple
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Expressions JSX
Les expressions peuvent être utilisées dans JSX en les enveloppant d'accolades {} .
Exemple
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Éléments de réaction
Les applications React sont généralement construites autour d'un seul élément HTML .
Les développeurs de React l'appellent souvent le nœud racine (élément racine) :
<div id="root"></div>
Les éléments React ressemblent à ceci :
const element = <h1>Hello React!</h1>
Les éléments sont rendus (affichés) avec la méthode ReactDOM.render() :
ReactDOM.render(element, document.getElementById('root'));
Les éléments React sont immuables . Ils ne peuvent pas être modifiés.
La seule façon de changer un élément React est de restituer un nouvel élément à chaque fois :
Exemple
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Composants de réaction
Les composants React sont des fonctions JavaScript.
Cet exemple crée un composant React nommé "Welcome":
Exemple
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React peut également utiliser des classes ES6 pour créer des composants.
Cet exemple crée un composant React nommé Welcome avec une méthode render :
Exemple
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Réagir aux propriétés du composant
Cet exemple crée un composant React nommé "Welcome" avec des arguments de propriété :
Exemple
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React peut également utiliser des classes ES6 pour créer des composants.
Cet exemple crée également un composant React nommé "Welcome" avec des arguments de propriété :
Exemple
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Compilateur JSX
Les exemples de cette page compilent JSX dans le navigateur.
Pour le code de production, la compilation doit être effectuée séparément.
Créer une application réactive
Facebook a créé une application Create React avec tout ce dont vous avez besoin pour créer une application React.
Il s'agit d'un serveur de développement qui utilise Webpack pour compiler les fichiers CSS à préfixe automatique React, JSX et ES6.
L'application Create React utilise ESLint pour tester et avertir des erreurs dans le code.
Pour créer une application Create React, exécutez le code suivant sur votre terminal :
Exemple
npx create-react-app react-tutorial
Assurez-vous d'avoir Node.js 5.2 ou supérieur. Sinon, vous devez installer npx :
Exemple
npm i npx
Démarrez un dossier à partir de l'endroit où vous souhaitez que votre application reste :
Exemple
C:\Users\myUser>npx create-react-app react-tutorial
Résultat réussi :
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