Latihan Penting Day React

Sorotan Konsep:

1. ReactDOM.render()
2. React.createElement()
3. Props dalam React
4. Mengakses Senarai dalam React
6. Memusnahkan dalam Reaksi

1. ReactDOM.render()

Dalam React, fungsi ReactDOM.render() digunakan untuk memaparkan elemen React (atau komponen) ke dalam DOM. Fungsi ini memerlukan dua hujah: elemen React untuk dipaparkan dan elemen DOM di mana anda ingin memaparkannya.

cth.) Dalam contoh ini, ReactDOM.render() menghasilkan "Hello, React!" mesej ke dalam elemen DOM dengan ID root. Ini ialah struktur asas yang anda akan lihat dalam kebanyakan aplikasi React untuk memasang apl pada DOM.

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

const element = <h1>Hello, React!</h1>;

ReactDOM.render(element, document.getElementById('root'));

2. React.createElement()

Fungsi React.createElement() ialah cara lain untuk mencipta elemen React. Walaupun JSX (seperti dalam contoh di atas) ialah cara paling biasa untuk mencipta elemen, memahami React.createElement() adalah penting kerana ia merupakan mekanisme asas di sebalik JSX.

cth.) Dalam contoh ini, React.createElement() mencipta elemen h1 dengan kandungan "Hello, React!". Argumen pertama ialah jenis elemen (dalam kes ini, h1), argumen kedua ialah prop (di sini, batal kerana kita tidak mempunyai prop), dan argumen ketiga ialah kanak-kanak, iaitu kandungan unsur.

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

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));

3. Props dalam React

Props (singkatan untuk "properties") ialah cara data dihantar dari satu komponen ke komponen lain dalam React. Ia adalah baca sahaja dan membantu anda menyesuaikan komponen anda dengan menghantar nilai yang berbeza.

cth.) Dalam contoh ini, komponen Salam menerima prop nama dan menggunakannya untuk memaparkan mesej yang diperibadikan. Props ialah konsep utama dalam React, membolehkan komponen menjadi dinamik dan boleh digunakan semula.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

4. Mengakses Senarai dalam React

Apabila memaparkan senarai dalam React, anda biasanya memetakan tatasusunan dan mengembalikan elemen untuk setiap item dalam senarai. Adalah penting untuk memasukkan prop utama untuk membantu React mengemas kini dan mengurus senarai dengan cekap.

cth.) Dalam contoh ini, ItemList mengambil tatasusunan item sebagai prop, dan untuk setiap item dalam tatasusunan, ia mencipta li elemen dengan kunci yang unik.

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

5.

ialah komponen pembalut yang boleh anda gunakan dalam mod pembangunan untuk membantu mengenal pasti masalah yang berpotensi dalam aplikasi React anda. Ia tidak memaparkan sebarang UI yang kelihatan, tetapi ia mengaktifkan semakan dan amaran tambahan.

cth.) Apabila anda membungkus aplikasi anda (atau sebahagian daripadanya) dalam , React akan menjalankan beberapa semakan untuk memastikan kod anda mengikut amalan terbaik, membantu anda mengetahui isu awal proses pembangunan.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

6. Pemusnahan dalam Reaksi

Destructuring ialah ciri JavaScript yang membolehkan anda membongkar nilai daripada tatasusunan atau sifat daripada objek kepada pembolehubah yang berbeza. Dalam React, ia biasanya digunakan dalam komponen berfungsi untuk mengekstrak prop dengan lebih bersih.

cth.) Dalam contoh ini, bukannya mengakses props.name, kami menggunakan penstrukturan untuk mengekstrak nama terus daripada objek props, menjadikan kod lebih bersih dan lebih mudah dibaca.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

ReactDOM.render(<Greeting name="World" />, document.getElementById('root'));

Atas ialah kandungan terperinci Latihan Penting Day React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!