[React] Débuter React dès maintenant

Une fois que j’ai fini les bases de HTML,CSS, et JavaScript, je pense à apprendre React qui est l’une des bibliothèque de js, mais la plus récente et répandue dans le domaine de nos jours. Donc cela me permettra de mieux maîtrsier le js. Donc je vais noter tout ce que j’apprends dès le début.

Pour commencer, il faudrait donc télécharger node.js dans l’ordinateur.

https://nodejs.org/enhttps://nodejs.org/en

On peut donc télécharger selon l’OS qu’on utilise, moi, j’utilise le Mac Intel.

Une fois que j’ai intsallé node.js, j’ai lancé le terminal.

npx create-react-app name-of-reactapp

Cette requête permet d’installer React App dans l’ordinateur, cela prend un peu du temps.

Le nom de React App doit être en minuscule, le mien est nommé comme hkreact.

cd name-of-react-app

Dans mon cas,

cd hkreact

Afin d’exécuter React App :

npm start 

** Qu’est-ce que c’est npm ?

D’après Wikipédia, npm est le gestionnaire de paquets par défaut pour l'environnement d'exécution JavaScript Node.js. npm se compose d'un client en ligne de commande, également appelé npm, et d'une base de données en ligne de paquets publics et privés payants, appelée le registre npm, ainsi que npx c'est un fils de npm.

Lorsque l’on saisie cette requête, une fenêtre de navigateur s’ouvre comme suivant :

On peut aussi y accéder avec https://localhost:3000

J’ouvre VScode, (ou alors Sublime Text, d’autre outil).

Ouvrir un dossier > username > hkreact

Sachez que c’est ici le repértoire de travail sur React App.

Il y a trois fichiers essentiels en React : index.html , index.js, App.js

Comme dans HTML, index.html a joué le rôle de template, c’est pareil. Cela existe dans le dossier “public”.

App.js et index.js se trouvent dans le dossier “src”. On peut définir les components dans App.js, ici le component signifie une partie modulaire réutilisable dans la programmation. Donc dans un programme, on emplie ces components comme si on emplie de legos ! Ces modules sont très importants pour l’entretien d’un système. Je peux prendre un exemple de la manipulation de designs sur Figma, j’ai créé plusieurs components pour que je puisse modifier ultérieurement — imaginons si on a une centaine d’unité de design qui se ressemblent. On nous demande de changer de la couleur. Mais on ne peut pas modifier un par un ?… Enfin on essaie d’en faire mais cela prendre des années. Le component permet de rendre le travail plus efficace !

Le dernier, index.js on peut dire que c’est le principe. Ça permet de combiner et rendre la template de html et components de js.

Donc j’ai créé un dossier intitulé component, ainsi que un fichier en js.

Dedans, j’ai écrit comme suivant :

import React from “react”;
function Coucou(){ //le component commence par un majuscule ! 
	return(
	<div>
		<h1> Coucou, je suis Hyunji ! </h1>
	</div>);
}

export default Coucou;

J’ouvre un fichier App.js

import React from “react”;
import Coucou from “./component/start”;
import “./App.css”;

function App(){
	return(
		<div className=“App”> 
			<Coucou /> 
		</div>
	);
}

export default App;

Donc la page de navigateur, je peux voir ce que j’ai écris dans Coucou.

Aujourd'hui j'ai installé React et créé un component dans ma React App. Pour les prochains posts, je vais créer une maquette Web pour que je puisse manipuler plusieurs components et les combiner dans React.

À très vite !