Tự học ReactJS: Hello World React API

Tự học ReactJS: Hello World React API

React là một frontend framework phổ biến nhất hiện nay. Nó sử dụng API tương tự như Javascription thuần để tạo nên cái DOM node.

Sự thât thì React cũng sử dụng API: createElement để tạo nên DOM.

React trừu tượng quá các browser API để bạn tạo DOM và dễ dàng tương tác với chúng hơn. React đã giúp bạn làm những thứ khó nhất, giúp bạn dễ dàng tạo nên component với declarative API.

React cũng hỗ trợ nhiều nền tảng( native, web). Mỗi nền tảng có những module riêng và chia sẻ nhau những module chung.

Bạn cần tải 2 Javascript files để viết một ứng dụng web React như sau:

  • React: chịu trách nhiệm tạo ra các React elements(giống như document.createElement())
  • ReactDOM: chịu trách nhiệm render các React elements lên DOM(giống như rootElement.append())

Bạn có thể viết lại ví dụ ở bài 1 bằng React như sau:

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"> 
  </script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script type="module">
    const rootElement = document.getElementById('root')
    const element = React.createElement('div', {
      className: 'container',
      children: 'Hello World',
    })
    ReactDOM.render(element, rootElement)
  </script>
</body>

Trên đây chúng ta không sử dụng JSX mà cơ bản sử dụng React.createElement để tạo elements trong React.

const elementProps = {id: 'element-id', children: 'Hello world!'}
const elementType = 'h1'
const reactElement = React.createElement(elementType, elementProps)
ReactDOM.render(reactElement, rootElement)

createElement nhận vào các tham số như: elementType(h1,h2, div,…), elementProps và tham số thứ ba là children.

React.createElement(
  type,
  [props],
  [children]
)

Bạn hãy thử dùng API React.createElement để tạo nested element như sau nhe:

<body>
  <div id="root">
    <div class="container">
      <span>Hello</span>
      <span>World</span>
    </div>
  </div>
</body>

Đáp án như sau:

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"> 
  </script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script type="module">
    const rootElement = document.getElementById('root')
    const element = React.createElement('div', {
      className: 'container',
      children: [
       React.createElement('span', null, 'Hello'),
       React.createElement('span', null, 'World')
      ],
    })
    ReactDOM.render(element, rootElement)
  </script>
</body>

Chúc bạn học tốt và hiểu được bên dưới React tạo element và render DOM như thế nào. Bạn có thể tham khảo bài viết chi tiết về React.createElement tại đây.

Leave a Comment