React – Notions de base

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

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

Fonction App

Environnement de l’applicationn

Fichier index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</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";
import App from "./components/App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

Fichier Heading.js


import React from "react";

function Heading(){
  return  <h1 className="blue">Mes plats favoris</h1>
}

export default Heading;

Fichier index.js


import React from "react";

function Liste(){
  return  ( 
    <ul>
        <li>Jambon</li>
        <li>Omelette</li>
        <li>Pates</li>
    </ul>
  );
}

export default Liste;

Fichier App.js


import React from "react";
import Heading from "./Heading";
import Liste from "./Liste";

function App() {
   return (
    <div>
        <Heading />
        <Liste />
    </div>
   );
}

export default App;

Codesandbox

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