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

Créer un composant

Il existe 2 sortes de composant :

Composant de fonction

– plus performant

– plus concis

– pas de gestion du state

– pas de gestion du cycle de vie

composant de classe

– gestion du state

– gestion du cycle de vie

– moins performant

– plus long à écrire

index.html


<!--  Positionnement des composants  -->
<div id="app"></div>

Modèle de composant de classe


import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      
        
      
    )
  }
}

Modèle de composant de fonction


import React from 'react'

export default function App() {
  return (
    
      
    
  )
}

Jsfiddle

Publier 2 avril 2020 par Michel PIALLIER dans React - Les composants Commentaires fermés

Application voiture

Créons une application de parc de voiture avec :

un composant App de type Classe

un composant Voitures de type Classe

des composants voiture de type Fonction

HTML


<div id='root'></div>

Javascript


class App extends React.Component {
  render() {
    return <MesVoitures />;
  }
}
class MesVoitures extends React.Component {
  render() {
    return (
       <div>
          <h1>Voitures</h1>
          <Voiture />
       </div>
    );
  }
}
const Voiture = () => {
  return (
      <div>
         <p>Marque : </p> 
         <p>Couleur : </p>
      </div>
  );
};
// Attacher le composant  la Div ayant l'id "root"
ReactDOM.render(, document.getElementById("root"));

Jsfiddle

Publier 6 avril 2020 par sm2017 dans React - Exemple application 1 Commentaires fermés

1 2 3 Next »