Tự học ReactJS: JSX là gì? Sử dụng JSX để tạo elements trong React

Tự học ReactJS: JSX là gì? Sử dụng JSX để tạo elements trong React

Sử dụng JSX(Javascript Syntax Extension) giúp bạn dễ hình dung các React element và dễ code hơn. Nó gần giống như bạn viết HTML trong JS.

const ui = <h1 id="greeting">Hey there</h1>

// ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓

const ui = React.createElement('h1', {id: 'greeting', children: 'Hey there'})

Bởi vì JSX không phải là Javascript nên bạn phải cần một trình biên dich để dich từ JSX syntax sang JS. Đó là Babel. Nếu bạn muốn playground với JSX bạn có thể vào đây.

Bài tập 1.

<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 src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="module">
    // 🐨 thay `type="module"`
    // bằng `type="text/babel"` so babel có thể compile code của bạn

    // 🐨  sử dụng JSX để tạo các element sau!
    const element = React.createElement('div', {
      className: 'container',
      children: 'Hello World',
    })

    // 💰 Trong JSX bạn sẽ sử dung className thay cho class như trong HTML
    // Chi tiết:
    // https://reactjs.org/docs/dom-elements.html#differences-in-attributes

    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>

Hãy tự làm trước khi xem đáp án nhé. Học phải đi đôi với hành nào! Boom!!! Đáp án:

<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 src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
    const element = <div className="container">Hello World</div>
    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>

Bài tâp 2. Interpolate giá trị trong JSX

const className = 'container'
const children = 'Hello World'
const element = <div className="hmmm">how do I make this work?</div>
//Bạn phải render được className từ biến và content cho thẻ div
const className = 'container'
const children = 'Hello World'
const element = <div className={className}>{children}</div>

Bài tập 3. Giả sử bạn có một props object như sau:

const children = 'Hello World'
const className = 'container'
const props = {children, className}
const element = <div /> // Bạn làm sao để apply props và element này?
const children = 'Hello World'
const className = 'container'
const props = {children, className}
const element = <div {...props} />

Chúc bạn làm bài tốt!!!

Leave a Comment