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

Classe attribut composant

Environnement de l’applicationn

Fichier index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Classe - attribut - composant</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";

const image = "https://michelpiallier.info/blog/ressources/tree.jpg";

const customStyle = {
  color: "red",
  fontSize: "24px",
  border: "1px solid black",
  padding: "20px"
};

customStyle.color = "orange";

function Heading() {
  return <h1 className="bleu">My first composant</h1>;
}

ReactDOM.render(
  <div>
    <h1 className="bleu">ClassName</h1>
    <img className="dim_image" src={image} alt="Tree" />{" "}
    <p>Attributs de l'image</p>
    <h1 style={{ color: "red" }}>Inline style</h1>
    <h1 style={customStyle}>Custom style</h1>
    <Heading />
  </div>,
  document.getElementById("root")

Codesandbox

Publier 1 décembre 2020 par sm2017 dans React - Notions de base Commentaires fermés

Composant enfant à parent

HTML


<div id="container"></div>

Javascript


class Parent extends React.Component {
  render() {
   return <h1><Enfant /></h1>
  }
}

class Enfant extends React.Component {
  render() {
   return <h3>Hello World</h3>
  }
}
ReactDOM.render(
  <Parent  />,
  document.getElementById('container')
);

Jsfiddle

Publier 4 avril 2020 par sm2017 dans React - Les composants Commentaires fermés

« Previous 1 2 3 Next »