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

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 téléchargeur d'images React que nous avons construit sur notre site.

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 nodejs.org . Vous devez avoir au moins la version 10 de Node.
• 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">

<!-- Here we will mount our component -->

</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 :

1. Tout d'abord, accédez au dossier de votre projet dans le terminal.

   
   

2. Maintenant, exécutez la commande suivante

   npm init -y

   
   

3. 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

Conseil : 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.

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. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="3"></div> </p> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <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> <!-- Load our React component. --> <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> <!-- Don't use this in production: --> <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> <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html --> </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.