Commencez à écrire avec React

Vous pouvez créer un élément directement à l'aide de l'API DOM. Pour ce faire, vous devez obtenir l'élément racine et définir le HTML interne, c'est tout. Voir l'exemple ci-dessous.

document.getElementById('root').innerHTML = `
  <div>
    Hello World!
  </div>
`;

Pour ce faire, vous devez ajouter un moteur de rendu React DOM. À l'intérieur de cela, vous devez ajouter deux paramètres. L'un d'eux est l'élément React Create, et l'autre est l'élément racine HTML. Suivez le code ci-dessous.

ReactDOM.render(
  React.createElement(),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'tagname',
    'style',
    'Insert, what do you want to see in the output!',
  ),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
  ),
  document.getElementById('root'),
);

Il existe ici une méthode alternative. Vous pouvez insérer directement le HTML au lieu de «React.createElement». Voyons l'exemple ci-dessous. Si vous êtes intéressé, vous pouvez voir la sortie dans le CodePan .

ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
);

Emboîtons les éléments React!

Insérons un élément d'imbrication dans l'élément React Create. À l'intérieur du 1er élément Créer, vous pouvez en insérer un autre pour l'imbrication. Vous ne comprenez pas? Voyons voir…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);

JSX

const element = <h1>Hello, world!</h1>;

Vous remarquerez peut-être que HTML5 ne nécessite pas de balise de fermeture dans certains cas. (c'est-à-dire <img>, <br>, <hr> etc.) Mais JSX doit avoir la balise de fermeture. (c'est-à-dire <img />, <br />, <hr /> etc.) Sinon, vous risquez de rencontrer des erreurs.