Inizia a scrivere con React

Puoi creare un elemento direttamente utilizzando l'API DOM. Per farlo, devi ottenere l'elemento root e impostare l'HTML interno, tutto qui. Vedi l'esempio sotto.

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

Per farlo, devi aggiungere un React DOM Renderer. Al suo interno, devi aggiungere due parametri. Uno di questi è React Create Element e l'altro è l'elemento radice HTML. Segui il codice qui sotto.

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'),
);

C'è un metodo alternativo qui. Puoi inserire direttamente l'HTML invece di "React.createElement". Vediamo l'esempio di seguito. Se sei interessato, potresti vedere l'output nel CodePan .

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

Facciamo Nesting React Elements!

Inseriamo un elemento di annidamento all'interno di React Create Element. All'interno del 1 ° elemento di creazione, è possibile inserirne un altro per l'annidamento. Non lo capisci? Vediamo…

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

Potresti notare che HTML5 in alcuni casi non richiede un tag di chiusura. (cioè <img>, <br>, <hr> ecc.) Ma JSX deve avere il tag di chiusura. (ad es. <img />, <br />, <hr /> ecc.) In caso contrario, potresti riscontrare alcuni errori.