npx create-react-app myapp

npm start

npm run build

npm install

Toutes les commandes ci-dessus ne vous sont-elles pas familières?

Si oui, vous travaillez peut-être avec React ou vous avez peut-être commencé à travailler avec cette incroyable bibliothèque JavaScript. Si vous êtes un développeur passionné, vous êtes sûrement conscient de la popularité de ce framework JavaScript et vous avez peut-être également essayé d'apprendre cette bibliothèque.

Parlons maintenant des développeurs qui sont déjà dans l'industrie et qui travaillent sur la partie frontend du projet. Comment vous sentez-vous lorsqu'on vous demande d'écrire la même ligne de code à plusieurs endroits? Que ressentez-vous lorsque l'on vous demande d'ajouter le même bouton sur plusieurs pages?

Nous savons que dans le développement de logiciels, faire des tâches répétitives est frustrant et les développeurs recherchent toujours un cadre ou une méthode pour gagner leur temps précieux. Ici, React entre en scène.

Cette étonnante bibliothèque JavaScript populaire aide non seulement les développeurs à créer une application impressionnante, mais les aide également à créer la page UI en moins de temps. React est basé sur des composants et c'est la fonctionnalité la plus intéressante de cette bibliothèque. Vous pouvez décomposer votre code complexe en éléments individuels, c'est-à-dire des composants. Ces composants sont utiles pour mieux organiser le code.

L'apprentissage de cette bibliothèque n'est pas facile si vous ne posez pas le bon pas dans cette direction. Il existe de nombreux concepts dans React et il peut être difficile d'apprendre cette bibliothèque. Il est important de connaître les bonnes choses dans cette bibliothèque pour devenir un développeur React très demandé. Aujourd'hui, dans cet article, nous allons énumérer les compétences clés nécessaires pour devenir un développeur React compétent.

1. Apprenez les principes de base de HTML, CSS et JavaScript.

Vos concepts de base doivent être solides avant de passer à cette bibliothèque. Si vous êtes un développeur expérimenté, il vous suffit de réviser les concepts.

Si nous parlons de débutants, la plupart du temps, ils font des erreurs et accèdent directement à cette bibliothèque. Plus tard, ils ne comprennent pas le concept et continuent de lutter pour comprendre ce cadre. De plus, votre intervieweur vérifiera d'abord les concepts de base avant de passer à React. Comprenez les éléments de base du site Web. Comment fonctionnent HTML, CSS et JavaScript. La syntaxe React et la plupart des concepts de cette bibliothèque reposent principalement sur ces trois blocs de construction. Vous ne rencontrerez aucun problème lors de la création d'une application si ces principes fondamentaux sont clairs pour vous. Créez quelque chose par vous-même en utilisant ces trois blocs de construction.

React hérite de la plupart des fonctionnalités de JavaScript. Les deux sont connectés, il est donc bon d'avoir une base solide dans les concepts JavaScript. Discutons de quelques concepts de base de JavaScript nécessaires à React.

• Variables, objets, tableaux, fonctions et classes.

• Méthodes de tableau courantes telles que .map (), .filter (), .reduce ()

• Fonctionnalités ES6 telles que la fonction flèche, let, const. En savoir plus sur le mot clé "this", appeler, appliquer et associer la méthode.

• Concepts de JavaScript asynchrone tels que les promesses, le rappel, Async / Await.

• Découvrez le fonctionnement du DOM (modèle d'objet de document).

• Comment créer, sélectionner et mettre à jour les éléments HTML et leurs attributs.

  2.Principes de base de NodeJS, mot-clé d'importation Import et d'exportation export.

En tant que développeur React, vous exécuterez de nombreux scripts/commandes NPM, donc une fois que les principes de base (HTML, CSS et JavaScript) seront clairs pour vous, comprenez les principes de base de NodeJS.

• NPM (Node Package Manager): vous devez avoir des connaissances sur NPM (Node package manager). NPM est utilisé pour installer les modules et packages Node. Apprenez à utiliser les commandes/scripts de base pour installer les packages et les modules.

• Mot-clé d'importation: Vous devrez utiliser le mot-clé import dans votre projet React pour utiliser les modules Node installés.

• Mot-clé d'exportation: utilisez le mot-clé export lorsque vous créez un module/composant et que vous ne devez renvoyer qu'une partie, pas toutes les méthodes et variables.

3. Apprenez les principes de base de React.

Une fois que les concepts ci-dessus sont clairs et que vous êtes devenu confiant avec JavaScript, passez aux principes de base de React. Apprenez les concepts de base de React. React est basé sur une architecture basée sur des composants. Vous devrez diviser l'interface utilisateur complète ou JSX en composants réutilisables.

Vous allez créer différents composants pour différentes tâches et ces composants seront intégrés dans le composant parent. Ce composant parent sera rendu à l'utilisateur.

Maintenant, la question est… quels sont les concepts de base que vous devriez apprendre dans ReactJS. Discutons-en ...

• Vous utiliserez la syntaxe JSX dans ReactJS. La syntaxe de JSX est quelque part similaire au HTML, mais gardez à l'esprit qu'elle est différente du HTML ordinaire.

• Apprenez à rendre les éléments JSX. Afficher et masquer les éléments en fonction des conditions.

• Apprenez le concept d'État dans ReactJS? Comment ça marche? Fondamentalement, l'état contient la variable synchrone et la modification de la valeur de l'état sera reflétée dans l'ensemble de l'application où qu'elle soit utilisée. Découvrez comment stocker et mettre à jour les données dans State.

• Dans React, vous utiliserez des props ( Qu'est-ce que c'est réellement?). Nous savons que cela pourrait être un nouveau mot pour vous. Fondamentalement, les props sont comme les arguments passés à la fonction ou à la méthode. Sachez quand l'utiliser et comment l'utiliser. Vous utiliserez des props comme argument d'entrée des balises HTML.

• Composant fonctionnel, composant de classe et la différence entre les deux.

• Tout comme en JavaScript, vous gérerez les événements dans React. Apprenez à gérer certains événements courants tels que onClick, onChange et onSubmit (vous utiliserez ces événements dans des boutons, des entrées et des formulaires).

  Tutoriel officiel React vous aidera à tout apprendre sur ReactJS. Après avoir compris ReactJS, faites quelques projets de base pour comprendre les concepts d'une bien meilleure manière.

• Application todo simple

• Application de calcul simple

• Construire un panier

• Affichez les statistiques utilisateur de GitHub à l'aide de l'API GitHub.

4. React Router

La plupart des frameworks fonctionnent sur le concept de routage (Qu'est-ce que c'est réellement?). Qu'il s'agisse d'un site de commerce électronique, d'un site éducatif ou de tout type de site Web, vous trouverez différentes pages à des fins différentes. Maintenant, il y a une question pour vous ...

Comment redirigeriez-vous de la page "d'accueil" vers la page "blog"? Vous devez définir le routage dans votre application pour atteindre cet objectif. Les développeurs React utilisent une bibliothèque tierce appelée react-router-dom pour créer des liens vers différentes pages, pour charger le contenu de différentes pages et pour rediriger vers d'autres pages.

Vous trouverez ci-dessous quelques fonctionnalités communes de react-router-dom que vous devriez connaître pour travailler avec votre application.

• Comment utiliser les composants , et .

• Comment effectuer la navigation à l'aide du composant et à l'aide du hook useHistory ().

• Création de routes dynamiques à l'aide du prop de chemin, c'est-à-dire et obtention des valeurs de chemin à l'aide du hook useParams ().

• Fonctionnement de dans React Router.

5. React Hooks.

Vous avez donc terminé avec les principes de base de React. Il est maintenant temps d’apprendre les Hooks React. Cette nouvelle fonctionnalité a été ajoutée dans la version 16.8 de React. Avec l'aide de React Hooks, vous pouvez écrire les fonctionnalités React sans utiliser les classes. Les hooks React vous permettent d'écrire moins de code, ce qui rend votre application efficace, simple et puissante.

Vous travaillerez principalement sur 5 concepts de base de React Hooks. Ces cinq concepts de base sont donnés ci-dessous:

• useState: La plupart du temps, dans votre application React, vous utiliserez ce concept pour stocker et gérer les données.

• useEffect: Vous utiliserez ce concept dans des actions telles que les requêtes HTTP et en travaillant avec l'API du navigateur.

• useRef: Ceci sera utilisé pour référencer les éléments JSX.

• useContext: Cette propriété de React Hooks sera utilisée pour accéder aux données de React Context afin de partager facilement des données entre les composants (au lieu de passer des props)

• useReducer: ce concept dans les hooks React sera utilisé pour stocker et gérer des données sur plusieurs composants.

Nous n'avons discuté que de 5 hooks qu'il est important d'apprendre. Il y a plus de 5 hooks, mais ce n'est pas nécessaire au départ dans votre phase d'apprentissage. Au fur et à mesure que vous progresserez et que vous rencontrerez des problèmes dans votre application, vous apprendrez plus de hooks lentement.

6. Apprenez à utiliser les API dans React Apps.

Nous savons que React est une bibliothèque frontend pour construire les interfaces utilisateur. Un utilisateur interagit avec la partie frontale de l'application, accède aux données à partir de là ou il navigue d'une page à une autre.

React interagit avec le code backend de l'application. Nous obtenons les données de la partie backend de l'application, nous effectuons des actions telles que l'authentification, l'affichage de l'élément à l'utilisateur, la recherche, l'enregistrement de l'utilisateur, etc.

Il existe principalement deux façons de travailler avec les données du backend. La méthode la plus courante et la plus standard consiste à utiliser les API REST. L'autre et le plus récent est l'API GraphQL. Dans votre travail, vous rencontrerez des problèmes où vous devrez travailler avec les deux API. Apprenez à travailler avec les deux types d'API à l'aide de React.

7. Styling dans React

En développement, la plupart du temps, nous utilisons du CSS simple pour donner du style à notre application. Mais dans React, la plupart des développeurs utilisent la bibliothèque de composants pour un style plus facile. Il existe de nombreuses bibliothèques de composants disponibles à utiliser, mais la plus populaire dans React est Material UI.

Vous pouvez également utiliser la bibliothèque de classes utilitaires pour styliser votre élément. La bibliothèque de classes d'utilitaires populaire est Tailwind CSS. En tant que développeur, vous rencontrerez les deux. Il est donc bon de se familiariser avec les deux types de bibliothèques.

8. Webpack.

Webpack est un bundler de modules en JavaScript qui vous aide à maintenir les dépendances sous forme de fichiers statiques pour votre projet. Webpack est également livré avec des chargeurs. Les chargeurs vous aident à exécuter des tâches spécifiques autour de votre projet.

9. Redux.

Dans votre application React, vous devrez gérer les états. Une fois que votre application commencera à se développer, elle deviendra une application complexe et vous devrez gérer les états des composants. Redux est une puissante bibliothèque JavaScript qui résout ce problème et aide à maintenir l'état de l'application. Dans Redux, vous stockez tous vos états dans une seule source.

Conclusion.

Nous avons discuté du concept principal que vous devriez apprendre dans React. Une fois que vous commencerez à travailler sur un projet React, vous rencontrerez de nombreux problèmes, et en fonction des problèmes, vous devrez rechercher une solution efficace dans React.

Vous serez présenté à différentes bibliothèques ou packages dans React en fonction des problèmes. Lentement, vous irez en profondeur avec cette application et vous deviendrez un maître dans React. J'espère que cela a été utile. Merci de partager avec votre entourage. A bientot.