React – Exemple application 1

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

Les bases

Fichier index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Les bases de React</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="../src/index.js" type="text/javascript"></script>
  </body>
</html>

Fichier Index.js


import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </div>,
  document.getElementById("root")
);

Codesandbox

Publier 30 novembre 2020 par sm2017 dans React - Notions de base Commentaires fermés

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

1 2 3 Next »