React : Parsing Variabel ke ReactDOM.render ()

Parsing Variabel ke ReactDOM.render ()

Argumen pertama ReactDOM.render () harus mengevaluasi ekspresi JSX, itu tidak harus benar-benar menjadi ekspresi JSX.

Argumen pertama juga bisa menjadi variabel, selama variabel itu mengevaluasi ekspresi JSX.

Dalam contoh ini, kami menyimpan ekspresi JSX sebagai variabel bernama toDoList. Kami kemudian meneruskan toDoList sebagai argumen pertama ke ReactDOM.render ():

const toDoList = (
  <ol>
    <li> Pelajari Bereaksi </li>
    <li> Menjadi Pengembang </li>
  </ol>
);

ReactDOM.render (
  toDoList,
  document.getElementById ('app')
);

Instruksi
1.

Pada baris 5, deklarasikan variabel bernama myList. Setel myList sama dengan elemen JSX <ul> </ul>. Bungkus <ul> </ul> Anda dengan tanda kurung.

Tambahkan beberapa elemen <li> </li> di antara tag <ul> </ul> Anda. Letakkan beberapa teks di setiap <li> </li>. Gunakan jeda baris dan lekukan yang mirip dengan contoh di atas.
2.

Di bagian bawah file, panggil ReactDOM.render ().

Untuk argumen pertama ReactDOM.render (), masukkan variabel myList.

Untuk argumen kedua ReactDOM.render (), pilih elemen HTML dengan id aplikasi.

Jangan ragu untuk menggunakan kode contoh sebagai panduan.

Jawab :

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
const myList = (
  <ul>
    <li>Learn React</li>
    <li>Become a Developer</li>
  </ul>
);

ReactDOM.render(
  myList,
  document.getElementById('app')
);