Mulailah Menulis Dengan React

Anda dapat membuat Elemen secara langsung menggunakan API DOM. Untuk melakukan itu, Anda perlu mendapatkan elemen root dan menyetel HTML bagian dalam, itu saja. Lihat contoh di bawah ini.

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

Untuk melakukan itu, Anda perlu menambahkan React DOM Renderer. Di dalamnya, Anda harus menambahkan dua parameter. Salah satunya adalah React Create Element, dan yang lainnya adalah elemen root HTML. Ikuti kode di bawah ini.

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

Ada metode alternatif di sini. Anda dapat langsung memasukkan HTML alih-alih 'React.createElement'. Mari kita lihat contoh di bawah ini. Jika Anda tertarik, maka Anda mungkin melihat output di CodePan .

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

Ayo elemen Nesting React!

Mari masukkan elemen bersarang di dalam React Create Element. Di dalam Create Element ke-1, Anda dapat memasukkan yang lain untuk bersarang. Tidak mengerti? Ayo lihat…

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

Anda mungkin memperhatikan bahwa HTML5 tidak memerlukan tag penutup dalam beberapa kasus. (yaitu <img>, <br>, <hr> dll.) Tetapi BEJ harus memiliki tag penutup. (yaitu <img />, <br />, <hr /> dll.) Jika tidak, Anda mungkin menghadapi beberapa kesalahan.