React est le framework JavaScript le plus populaire sur la planète. Vous pouvez l'utiliser pour créer rapidement des applications Web riches en fonctionnalités. En outre, il vous permet d'ajouter facilement de nouvelles fonctionnalités à votre projet existant, comme notre   que nous avons construit sur notre site. téléchargeur d'images React  Il vous suffit de taper quelques lignes de code. Cela peut vous faciliter la vie. Mais comment ajouter React à un projet existant ? Quelles sont les étapes ? Dans cet article, vous trouverez tous les détails.  Est-il vraiment facile d'ajouter React à un projet existant ?  Oui, vous pouvez facilement ajouter React à votre application existante. Le processus est très simple. Dans cet article, vous trouverez la manière d'ajouter un composant React à une page HTML existante. Vous pouvez suivre la même méthode pour l'ajouter à votre propre site Web. Alternativement, vous pouvez créer un fichier HTML vide pour vous entraîner.  Ajouter React au projet existant : équipement nécessaire  Tout d'abord, vous devez avoir Node installé sur votre PC. Vous pouvez l'obtenir sur   . Vous devez avoir au moins la version 10 de Node. nodejs.org  Ensuite, vous devez disposer du gestionnaire de packages de nœuds (npm). Il s'installe automatiquement sur votre PC avec Node. La version npm doit être 5.2 ou supérieure.  Enfin, vous devez avoir un bon éditeur de code. De nombreuses solutions existent sur le marché. Par exemple, Visual Studio Code est un éditeur intuitif. Il est massivement populaire parmi les développeurs. Vous pouvez le télécharger   . ici  Ajouter React à un projet ou site Web existant  Dans cette section, vous allez ajouter un composant React pour modifier une page HTML existante de votre site Web. Voici les étapes :  Étape 1 : Ajouter un conteneur DOM au code HTML  Commencez par ouvrir la page HTML que vous souhaitez modifier. Créez un élément div vide. C'est la zone où vous utiliserez React pour afficher les modifications.   <div id="medium_blog_container">      </div>  Étape 2 : Ajoutez les balises de script ou les balises de réaction  Ensuite, vous devez ajouter trois balises <script> à la page HTML juste avant la balise de fermeture </body>. Les deux premières balises chargent React. Le troisième charge votre code de composant.  Étape 3 : Créer un composant React  Maintenant, vous devez créer un fichier JS, appelé medium_post_component.js, à côté de votre page HTML.   Vous pouvez écrire React avec JSX ou sans JSX. L'exemple ci-dessus est sans JSX. Il peut s'exécuter directement sur le navigateur.  Jetez un oeil à ces deux lignes:  Avec ces deux lignes, vous recherchez le <div> que vous avez ajouté à la première étape. Ensuite, vous affichez le bouton "J'aime" du composant React à l'intérieur de celui-ci.  Ajouter React à un projet existant - Ajouter JSX à un projet  Vous n'avez pas besoin d'utiliser des outils compliqués, comme un bundler ou un serveur de développement, pour ajouter JSX à un projet. En fait, c'est assez similaire à l'ajout d'un préprocesseur CSS. Cependant, vous devez avoir Node.js installé sur votre PC. C'est la seule exigence. Le processus d'ajout de JSX est très simple. Il vous suffit de suivre ces étapes :  Tout d'abord, accédez au dossier de votre projet dans le terminal.  Maintenant, exécutez la commande suivante   npm init -y  Si la commande ci-dessus échoue, exécutez cette commande :   npm install babel-cli@6 babel-preset-react-app@3  C'est ça! Vous avez ajouté avec succès une configuration JSX prête pour la production à votre projet.  Ajouter React au projet existant - Exécuter le préprocesseur JSX  Pour exécuter le préprocesseur JSX, vous devez créer un dossier, appelé "src". Exécutez ensuite cette commande dans le terminal :   npx babel --watch src --out-dir . --presets react-app/prod    voyez-vous un message d'erreur indiquant "Vous avez installé le package babel par erreur" ? Vous avez peut-être manqué l'étape précédente. Essayez de l'exécuter dans le même dossier. Cela devrait résoudre le problème. Conseil :  Vous n'avez pas à attendre la fin du processus. La commande susmentionnée lance un observateur automatisé pour JSX.  Si vous créez un fichier, appelé like_button.js dans le dossier src, l'observateur créera un fichier prétraité like_button.js. Il aura le code JavaScript simple adapté au navigateur.  En outre, il vous permet d'utiliser les fonctionnalités de syntaxe JavaScript modernes. Par exemple, vous pouvez utiliser des classes sans vous soucier de casser les anciens navigateurs.  Gardez à l'esprit que npx n'est pas une faute de frappe. Il s'agit d'un outil d'exécution de package fourni avec npm 5.2+.  Ajouter React au projet existant - Appel AJAX et API React pour le composant  Il existe des tonnes de bibliothèques pour effectuer des appels d'API. Cependant, ce sont les plus populaires sont:  Aller chercher  Axios  React-Axios  Use-Http React-request et plus  Ajouter React au projet existant - Utilisation de Fetch pour effectuer des appels HTTP dans React  Fetch() est une API basée sur un navigateur. Vous pouvez l'utiliser pour effectuer des appels HTTP. Examinons la syntaxe standard de l'API Fetch.   let response = fetch(   API_URL,   .... (some more options)   );  Ici, vous appelez une fonction nommée getNames. Il récupère les données. En outre, il récupère d'autres paramètres. aimer:  Méthode : Cela vous aide à déterminer quel type d'appel HTTP est là  En-tête : Il vous permet de définir des en-têtes de demande d'autorisation ou de contenu  Mode : Mode définit le type de mode, cors ou no-cors  Corps : vous pouvez l'utiliser pour envoyer des données supplémentaires au serveur en tant que corps de requête  Voici un exemple d'utilisation de Fetch dans React :   async getName(){   //With .then and .catch section   let response = await fetch("https://jsonplaceholders.com/users") .then(resposne => { return response.json(); this.setState({ names:response })}) .catch(error => { console.log(error); }); }  Conseils pour ajouter React à un projet existant   Réutiliser un composant  Vous souhaiterez peut-être afficher les composants React à plusieurs endroits sur une page HTML. Pour ce faire, vous devez suivre ces étapes :  Accédez à votre fichier HTML. Ajoutez ensuite ces lignes :   <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment.  <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment.  <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment.  <div class="like_button_container" data-commentid="3"></div> </p>   <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>  <script src="like_button.js"></script> </body> </html>  Accédez à votre fichier JavaScript. Insérez ce code :   'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); const root = ReactDOM.createRoot(domContainer); root.render( e(LikeButton, { commentID: commentID }) ); });  Gardez à l'esprit que l'approche est utile lorsque les parties de la page sont isolées les unes des autres. Mais dans le code React, vous devez utiliser la composition des composants. Parce que c'est plus facile à utiliser.  Minifier JavaScript pour la production  JavaScript non réduit peut avoir un impact significatif sur la vitesse de la page. Cela frustrera les utilisateurs. C'est pourquoi vous devez minifier JavaScript avant de déployer des applications React. Cela augmentera la vitesse de chargement et l'expérience utilisateur.  Avez-vous déjà minifié vos scripts d'application ? Vous êtes-vous assuré que le HTML déployé charge les versions de React se terminant par le fichier production.min.js ? Si c'est fait, votre site est prêt pour la production.   <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>  Si vous n'avez pas d'étape de minification pour vos scripts, vous pouvez la configurer en suivant ces étapes :  Tout d'abord, vous devez installer Node.js  Exécutez ensuite la commande suivante dans votre dossier de projet :   npm init -y  Ensuite, exécutez cette commande :   npm install terser  Enfin, il est temps de minifier un fichier. Si vous souhaitez minifier un fichier, appelé like_button.js, exécutez simplement cette commande dans le terminal :   npx terser -c -m -o like_button.min.js -- like_button.js  Vous verrez la création d'un nouveau fichier, appelé like_button.min.js. Il contiendra tout le code minifié.   Essayez rapidement JSX  Vous pouvez rapidement essayer JSX dans votre projet en ajoutant la balise <script> suivante à votre page :   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  Maintenant, vous pouvez commencer à utiliser JSX dans n'importe quelle balise <script>. Il vous suffit d'y ajouter l'attribut type="text/babel".  Voici un exemple de fichier HTML avec JSX :   <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function MyApp() { return <h1>Hello, world!</h1>; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<MyApp />); </script>  </body> </html>  Présentation du SDK React de Filestack  filestack-react est un wrapper sur filestack-js sdk. Il vous permet de vous intégrer au service Filestack en quelques lignes de code seulement. Vous pouvez l'utiliser pour améliorer considérablement l'apparence et les performances de votre téléchargeur de fichiers.  Comment puis-je utiliser le SDK React de Filestack dans mon application ?  Tout d'abord, vous devez installer le SDK React de Filestack avec cette commande :   npm install filestack-react  Ensuite, vous pouvez insérer filestack-react dans votre application.   import { PickerOverlay } from 'filestack-react'; <PickerOverlay apikey={YOUR_API_KEY} onSuccess={(res) => console.log(res)} onUploadDone={(res) => console.log(res)} />  Vous pouvez l'utiliser pour ajouter sans effort diverses fonctionnalités. Par exemple, vous pouvez afficher un sélecteur de volet de dépôt de base en utilisant cette ligne :   <PickerDropPane apikey='YOUR_APIKEY'/>  Vous pouvez utiliser Filestack pour activer facilement le téléchargement de fichiers dans React. Vous pouvez trouver les détails juste ici.  Conclusion  Dans cet article, vous avez appris à ajouter React à un projet existant. De plus, vous connaissez des astuces utiles, comme la réutilisation de composants et la minification de JavaScript pour la production. Maintenant, vous pouvez commencer à tirer parti de React et ajouter facilement des fonctionnalités étonnantes à vos projets existants.  Ajouter React à un projet existant - FAQ   Qu'est-ce qu'un composant React ?  Les composants sont l'un des éléments de base de React. Ce sont des morceaux de code indépendants et réutilisables. Ils vous permettent de créer facilement des interfaces utilisateur pour votre application.   Comment puis-je créer une application de réaction avec npx ?  Vous pouvez créer une application de réaction avec npx en utilisant cette commande : "npx créer une application de réaction".   Qu'est-ce que React dans le codage ?  React est une bibliothèque JavaScript efficace et flexible. Il vous permet de créer facilement des interfaces utilisateur complexes en utilisant de petits morceaux de code isolés, appelés « composants ».   Inscrivez-vous gratuitement et découvrez dès aujourd'hui les meilleures solutions de téléchargement de fichiers pour vos applications Web avec Filestack.

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Cet audio est produit dans la langue originale de l'histoire !

Devriez-vous ajouter React aux projets ou sites Web existants ?

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps