React - Les props

React – Les props

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";

function Card(props) {
    return <div>
        <h2>{props.name}</h2>
        <img
          src={props.img}
          alt="avatar_img"
        />
        <p>{props.tel}</p>
        <p>{props.email}</p>
    </div>
}

ReactDOM.render(
    <div>
    <h1>My Contacts</h1>
        <Card  name="Beyonce" img="https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg" tel= "+123 456 789" email="b@beyonce.com" />
        
    </div>,
  document.getElementById("root")
);

Codesandbox

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