เริ่มเขียนด้วยการตอบสนอง

คุณสามารถสร้างองค์ประกอบได้โดยตรงโดยใช้ DOM API ในการทำเช่นนั้นคุณต้องได้รับองค์ประกอบรูทและตั้งค่า HTML ด้านในนั่นคือทั้งหมดที่ ดูตัวอย่างด้านล่าง

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

ในการทำเช่นนั้นคุณต้องเพิ่ม React DOM Renderer ภายในนั้นคุณต้องเพิ่มพารามิเตอร์สองตัว หนึ่งในนั้นคือ React Create Element และอีกอันคือเอลิเมนต์รูท HTML ตามโค้ดด้านล่างนี้

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

มีวิธีอื่นที่นี่ คุณสามารถแทรก HTML โดยตรงแทน "React.createElement" ลองดูตัวอย่างด้านล่าง หากคุณมีความสนใจแล้วคุณอาจจะเห็นผลลัพธ์ในที่CodePan

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

มาสร้าง Nesting React กันเถอะ!

มาแทรกองค์ประกอบที่ซ้อนกันภายใน React Create Element ภายใน Create Element แรกคุณสามารถแทรกอีกอันหนึ่งเพื่อซ้อนกันได้ ไม่รับ? มาดูกัน…

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

คุณอาจสังเกตเห็นว่า HTML5 ไม่ต้องการแท็กปิดในบางกรณี (เช่น <img>, <br>, <hr> เป็นต้น) แต่ JSX ต้องมีแท็กปิด (เช่น <img />, <br />, <hr /> ฯลฯ ) มิฉะนั้นคุณอาจพบข้อผิดพลาดบางประการ