Comience a escribir con React

Puede crear un Elemento directamente usando la API DOM. Para hacer eso, necesita obtener el elemento raíz y configurar el HTML interno, eso es todo. Vea el ejemplo a continuación.

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

Para hacerlo, debe agregar un React DOM Renderer. Dentro de eso, tienes que agregar dos parámetros. Uno de ellos es el elemento React Create y el otro es el elemento raíz HTML. Siga el código a continuación.

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

Hay un método alternativo aquí. Puede insertar directamente el HTML en lugar de 'React.createElement'. Veamos el ejemplo a continuación. Si está interesado, puede ver el resultado en CodePan .

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

¡Anidemos elementos de React!

Insertemos un elemento anidado dentro del elemento React Create. Dentro del primer elemento de creación, puede insertar otro para anidar. ¿No lo entiendes? Vamos a 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>;

Puede notar que HTML5 no requiere una etiqueta de cierre en algunos casos. (es decir, <img>, <br>, <hr> etc.) Pero JSX debe tener la etiqueta de cierre. (es decir, <img />, <br />, <hr /> etc.) De lo contrario, es posible que se enfrente a algunos errores.