Zacznij pisać z React

Możesz utworzyć element bezpośrednio za pomocą DOM API. Aby to zrobić, musisz pobrać element główny i ustawić wewnętrzny kod HTML, to wszystko. Zobacz poniższy przykład.

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

Aby to zrobić, musisz dodać React DOM Renderer. Wewnątrz musisz dodać dwa parametry. Jednym z nich jest element React Create, a drugim jest główny element HTML. Postępuj zgodnie z poniższym kodem.

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

Jest tutaj alternatywna metoda. Możesz bezpośrednio wstawić kod HTML zamiast „React.createElement”. Zobaczmy poniższy przykład. Jeśli jesteś zainteresowany, możesz zobaczyć dane wyjściowe w CodePan .

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

Zagnieżdżajmy elementy React!

Wstawmy element zagnieżdżający do elementu React Create. Wewnątrz 1st Create Element możesz wstawić kolejny do zagnieżdżenia. Nie rozumiesz? Zobaczmy…

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

Możesz zauważyć, że w niektórych przypadkach HTML5 nie wymaga tagu zamykającego. (tj. <img>, <br>, <hr> itp.) Ale JSX musi mieć tag zamykający. (tj. <img />, <br />, <hr /> itp.) W przeciwnym razie możesz napotkać błędy.