Tutoriel React

React est une bibliothèque JAVASCRIPT pour créer des interfaces utilisateur.

React est principalement utilisé pour construire des interfaces utilisateur. Beaucoup de gens considèrent React comme le V (Vue) dans MVC.

React est issu d'un projet interne de Facebook, utilisé pour construire le site web Instagram, et a été rendu open source en mai 2013.

React a des performances élevées et une logique de code très simple. De plus en plus de personnes commencent à s'y intéresser et à l'utiliser.

Fonctionnalités de React

  • 1. Conception déclarative−React utilise un paradigme déclaratif, ce qui facilite la description des applications.

  • 2. Efficace−React minimise les interactions avec le DOM en simulant le DOM.

  • 3. Flexible−React fonctionne bien avec des bibliothèques ou des frameworks connus.

  • 4.JSX− JSX est une extension de la syntaxe JavaScript. Le développement React ne nécessite pas forcément JSX, mais nous recommandons de l'utiliser.

  • 5. Composants− La construction de composants avec React rend le code plus facile à réutiliser et peut très bien s'appliquer au développement de grands projets.

  • 6. Flux de données réactif unidirectionnel− React met en œuvre un flux de données réactif unidirectionnel, réduisant ainsi le code dupliqué. C'est pourquoi il est plus simple que la liaison de données traditionnelle.

Avant de lire ce tutoriel, vous devez savoir :

Avant de commencer à apprendre React, vous devez posséder les connaissances de base suivantes :

Premier exemple React

Dans chaque chapitre, vous pouvez modifier les exemples en ligne, puis cliquer sur un bouton pour voir les résultats.

Ce tutoriel utilise React version 18.2.0. Vous pouvez visiter le site officiel pourhttps://react.dev/télécharger la dernière version.

Exemple React

<div id="example"></div> <script type="text/babel">// Composant React simple function App() { return<h1>Bonjour, React !</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // Afficher le composant React dans le DOM root.render(<App />); </script>

Essayez-le »

Importer des scripts externes :

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Ces trois lignes de code importent respectivement les bibliothèques React, ReactDOM et Babel Standalone.

  • React est utilisé pour construire des interfaces utilisateur.
  • ReactDOM est utilisé pour afficher des composants React dans le navigateur.
  • Babel Standalone est utilisé pour compiler la syntaxe JSX à la volée dans le navigateur.

Ou utilisez l'environnement de développement React créé avec l'outil create-react-app (présenté dans le chapitre suivant) :

Exemple

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

À ce moment-là, ouvrez le navigateurhttp://localhost:3000/Cela affichera :

Hello World!

Références

Autres extensions