Простой компонент

 <!DOCTYPE html> <html> <head>

<code>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</code>

<code>
  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
      .root{
          display: flex;
      }
      .car{
          width:100px;
          padding: 20px;
          margin: 10px;
          border: solid 1px #8a8a8a;
          text-align: center;
          box-shadow: 0 0 10px rgba(0,0,0,0.5);
      }
  </style>
</code>

</head> <body> <div id="root">

<code>
  <div class="car">
      <h3>Mazda 4</h3>
      <p>Year: <strong>2010</strong></p>
  </div>
</code>

</div> <script type="text/babel">

<code>
  function Car(props){
    return (
        <div className="car">
            <h3>{props.name}</h3>
            <p>Year: <strong>{props.year}</strong></p>
        </div>
    )
  }
  ReactDOM.render(
      <Car name="Ford" year="2010" />,
      document.getElementById('root')
  );
</code>

</script> </body> </html>

Множественная подстановка в компонент react

 <!DOCTYPE html> <html> <head>

<code>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</code>

<code>
  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
      .wrap{
          display: flex;
      }
      .car{
          width:100px;
          padding: 20px;
          margin: 10px;
          border: solid 1px #8a8a8a;
          text-align: center;
          box-shadow: 0 0 10px rgba(0,0,0,0.5);
      }
  </style>
</code>

</head> <body> <div id="root">

<code>
  <div class="car">
      <h3>Mazda 4</h3>
      <p>Year: <strong>2010</strong></p>
  </div>
</code>

</div> <script type="text/babel">

<code>
  function Car(props){
    return (
        <div className="car">
            <h3>{props.name}</h3>
            <p>Year: <strong>{props.year}</strong></p>
            <small>this is car</small>
        </div>
    )
  }
  const App = (
      <div className="wrap">
          <Car name="Ford" year="2010" />
          <Car name="Mazda 3" year="2012" />
          <Car name="Audi 8" year="2009" />
      </div>
  );
  ReactDOM.render(
      App,
      document.getElementById('root')
  );
</code>

</script> </body> </html>

Инструменты пользователя

Инструменты сайта

Боковая панель

Простой компонент

Множественная подстановка в компонент react

Инструменты страницы