React – Environnement de travail

Create React App

Create React App est un environnement confortable pour démarrer une application web monopage.

Pour créer un projet React :

1 – installer nodejs (environnement d’exécution JavaScript)

2 – installer Visual Studio Code (éditeur de texte)

3 – installer cmder (terminal)

4 – installer Create React App (Il génère automatiquement un squelette pour l’application.).

Installer Create React App


1 - Ouvrir cmder

2 - Dans un répertoire lancer l'installation d'un projet (my-app)



3 - Lancer Create React App

Arborescence créée par Create React App

Publier 1 avril 2020 par sm2017 dans React - Environnement de travail, Non classifié(e) Commentaires fermés

Les composants

Les composants React implémentent une méthode render() qui prend des données en entrée et retourne ce qui doit être affiché.

Les données passées au composant sont accessibles dans render() via this.props.

Les composants permettent de découper l’interface utilisateur en éléments indépendants et réutilisables.

Chaque élément peut être alors considéré de manière isolée.

Exemple : Composant <Hello />

HTML


<div id="pos"></div>

Javascript


const Hello = function(){
       //Donner à React le code HTML à afficher
	return Hello world
}
//// Demander à React d'attacher le composant Hello à la div qui a pour id 'pos' 
ReactDOM.render(<Hello />, document.getElementById('pos'));

Ajouter un style (noter fontSize au lieu de font-size avec les CSS)

Le style est un objet {} et on ajoute un objet {{ }}


const Hello = function(){
	return <h1 style={{color: 'red',fontSize: '40px'}}>Hello world</h1>
}

Ajouter une classe (noter className au lieu de class avec HTML)


const Hello = function(){
	return <h1 className= "entete" >Hello world</h1>

Jsfiddle

Publier 27 février 2020 par sm2017 dans Non classifié(e) Commentaires fermés

« Previous 1 2 3