balise sur le modèle HTML.

ReactDOM.render (, document.getElementById ('racine'));

Il y a aussi la technique de rendu côté serveur, qui effectue cette étape sur le serveur pour accélérer les temps de chargement initiaux (car React devra toujours télécharger le bundle en premier). Cela présente cependant ses propres problèmes et est un peu plus avancé que le rendu côté client.

React divise le HTML en composants

Le principal attrait de React est sa capacité à décomposer les applications en composants individuels. Ces composants peuvent être réutilisés à d'autres endroits et répliqués très facilement, ce qui signifie que vous pouvez diviser vos fichiers de projet plutôt que de travailler sur un seul. index.html ou fichier JS. Il est courant d’avoir un dossier pour les composants réutilisables que vous avez créés et un dossier distinct pour les conteneurs utilisés pour afficher ces composants.

React utilise quelque chose appelé JSX, qui est essentiellement une extension de syntaxe pour JavaScript qui prend en charge HTML. Pour cette raison, vous pouvez générer des éléments HTML de manière dynamique et même incorporer des expressions JS dans des balises:

élément const = 
Bonjour, {name}
;

Cette fonctionnalité alimente les composants React. Vous pouvez créer des composants très simples en créant simplement une fonction qui renvoie du JSX:

function App (nom) {
  revenir (
   
Bonjour {name}!
   );
}

Ou, vous pouvez utiliser les fonctionnalités de React en étendant Réagir.:

class App étend React.Component {
  render () {
    revenir (
      
Bonjour le monde!
    );
  }
}

Cela vous donne accès à des méthodes de cycle de vie comme componentDidMount () qui vous permettent d'exécuter du code lorsque le composant change.

Il y a aussi le concept d’État; chaque composant a ses propres variables d'état qui suivent les données sur ce composant. Vous pouvez mettre à jour l'état d'un composant et réagir aux changements d'état, et les composants seront (généralement) de nouveau rendus lorsque l'état est modifié.

this.setState ({basculé: True});

Ce n’est que la surface, et il y a beaucoup plus à réagir que couvert ici. Vous pouvez en savoir plus sur les autres fonctionnalités principales de React dans leurs documents.

Comment commencez-vous?

React est un écosystème très compliqué, il n'est donc pas facile de répondre à cette question. Cependant, il existe un très bon outil qui porte bien son nom create-react-app qui peut gérer une grande partie du code standard pour vous et configurer votre répertoire de projet.

Vous aurez besoin de Node.JS installé pour fonctionner create-react-app, et vous voudrez qu'il soit installé de toute façon pour le développement. Vous pouvez exécuter le script en utilisant npx, qui est installé à côté npm et utilisé pour installer et exécuter des scripts à partir du npm dépôt:

npx create-react-app mon-application

Cela installera le projet de démarrage dans le mon-application dossier. Ce projet utilise une bibliothèque personnalisée appelée scripts de réaction qui prend en charge les coulisses comme Webpack et Babel, ainsi que l'exécution d'un serveur Web avec rechargement à chaud pour serveur à partir de l'application (bien que vous deviez utiliser un vrai serveur Web en production).

Pour démarrer l'application, exécutez nmp start dans le répertoire du projet. Cela démarrera le serveur de développement et vous amènera à localhost: 3000 dans votre navigateur Web par défaut. Si vous apportez des modifications au projet, celui-ci devrait se recharger automatiquement.

Vous souhaiterez probablement installer le Outils de débogage React pour votre navigateur, qui vous permettent d'inspecter les composants React et d'afficher directement leur état et leurs propriétés.

Pouvez-vous créer des applications de bureau avec React?

Vous pouvez, en fait, c'est ainsi que des applications telles que Slack, Discord et Visual Studio Code sont créées. Ils utilisent tous Electron, qui exécute essentiellement une instance supplémentaire de Chrome pour rendre une page Web en tant qu'application de bureau, sans la barre d'URL ou d'autres fonctionnalités du navigateur.

Cela fonctionne suffisamment bien pour que vous ne réalisiez même pas que vous naviguez vraiment sur une page Web et que vous n'utilisez pas d'application native, car tout le contenu est local et vous n'avez pas à attendre le chargement lent des pages. Cependant, exécuter une instance supplémentaire de Chrome signifie plus de RAM à consommer, et les applications Electron fonctionnent certainement un peu plus lentement que leurs homologues natifs.

Electron peut vraiment exécuter n'importe quelle page Web en tant qu'application de bureau, mais elle fonctionne très bien avec un cadre Web comme React. Vous pouvez lire notre guide de mise en route pour porter votre application Web sur le bureau.