Comece a escrever com React

Você pode criar um elemento diretamente usando a API DOM. Para fazer isso, você precisa obter o elemento raiz e definir o HTML interno, isso é tudo. Veja o exemplo abaixo.

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

Para fazer isso, você precisa adicionar um React DOM Renderer. Dentro disso, você deve adicionar dois parâmetros. Um deles é o React Create Element e o outro é o elemento-raiz HTML. Siga o código abaixo.

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

Existe um método alternativo aqui. Você pode inserir diretamente o HTML em vez de 'React.createElement'. Vamos ver o exemplo abaixo. Se você estiver interessado, poderá ver a saída no CodePan .

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

Vamos aninhar elementos React!

Vamos inserir um elemento de aninhamento dentro do React Create Element. Dentro do primeiro elemento de criação, você pode inserir outro para aninhamento. Não entendeu? Vamos ver…

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

Você pode notar que o HTML5 não requer uma tag de fechamento em alguns casos. (ou seja, <img>, <br>, <hr> etc.) Mas JSX deve ter a tag de fechamento. (isto é, <img />, <br />, <hr /> etc.) Caso contrário, você pode encontrar alguns erros.