Memahami Hari JSX dan Elemen Rendering - ReactJS

Selamat datang ke Hari 3 cabaran "30 Hari ReactJS"! Hari ini, kita akan menyelami salah satu konsep teras React: JSX. Pada penghujung siaran ini, anda akan mempunyai pemahaman yang kukuh tentang JSX dan cara React menggunakannya untuk memaparkan elemen pada halaman web.

Apakah JSX?
JSX adalah singkatan dari JavaScript XML. Ia adalah sambungan sintaks untuk JavaScript yang membolehkan anda menulis kod seperti HTML dalam fail JavaScript anda. JSX menjadikannya lebih mudah untuk mencipta dan menggambarkan komponen UI secara langsung dalam kod anda, menggabungkan logik dan struktur apl anda.

Cara JSX Berfungsi
Apabila anda menulis JSX, anda sedang menulis gabungan HTML dan JavaScript. React mengambil ini dan mengubahnya menjadi objek JavaScript standard yang mewakili UI anda.

Berikut ialah contoh asas:

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

Barisan kod ini mencipta elemen React yang mewakili

tag dengan teks "Hello, dunia!".

JSX Bukan HTML
Walaupun JSX kelihatan seperti HTML, adalah penting untuk diingat bahawa ia tidak betul-betul sama. JSX ialah gula sintaksis yang digunakan oleh React untuk mencipta elemen.

Sebagai contoh, dalam HTML, atribut seperti kelas digunakan untuk menggunakan kelas CSS:

<h1 class="header">Hello, world!</h1>

Tetapi dalam JSX, anda perlu menggunakan className dan bukannya kelas, kerana kelas ialah kata kunci terpelihara dalam JavaScript:

const element = <h1 className="header">Hello, world!</h1>;

Membenamkan Ungkapan dalam JSX
Salah satu ciri hebat JSX ialah anda boleh membenamkan ungkapan JavaScript secara langsung di dalamnya. Ini membolehkan anda menjana kandungan secara dinamik berdasarkan logik apl anda.

Contohnya:

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

Di sini, {name} ialah ungkapan JavaScript yang akan dinilai dan digantikan dengan nilai pembolehubah nama, yang diterjemahkan sebagai "Hello, Meraj!" pada skrin.

Elemen Rendering dalam Reaksi
Dalam React, elemen rendering ialah proses memaparkan kandungan pada halaman. Elemen tindak balas ialah bahan binaan UI apl anda.

Untuk memaparkan elemen, anda menggunakan kaedah ReactDOM.render(). Kaedah ini mengambil dua hujah:

1. Elemen React yang ingin anda paparkan.
2. Elemen DOM di mana anda mahu memaparkannya.

Begini cara anda memberikan "Hello, dunia!" contoh:

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

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Kod ini memberitahu React untuk memaparkan elemen di dalam elemen HTML dengan id akar.

Kuasa DOM Maya React
React menggunakan DOM maya untuk mengurus perubahan pada UI dengan cekap. Apabila anda mengemas kini elemen, React membandingkan versi baharu dengan yang sebelumnya dan hanya mengemas kini bahagian DOM sebenar yang telah berubah. Pendekatan ini menjadikan React pantas dan cekap.

Contoh Kehidupan Sebenar: Senarai Beli-belah
Fikirkan senarai beli-belah di papan putih. Jika anda perlu menukar satu item, anda tidak memadamkan keseluruhan senarai dan menulisnya semula. Anda hanya mengemas kini item tertentu yang berubah. DOM maya React berfungsi sama, mengemas kini bahagian yang perlu diubah sahaja.

Mengapa Menggunakan JSX?

• Kod Boleh Dibaca: JSX membolehkan anda menulis komponen anda dengan cara yang mudah dibaca dan difahami. Anda boleh melihat struktur UI anda terus dalam kod anda.
• Kurang Kod: Dengan JSX, anda boleh menulis kurang kod berbanding menggunakan React.createElement() untuk mencipta elemen secara manual.
• Integrasi dengan JavaScript: Memandangkan JSX ialah sambungan sintaksis JavaScript, anda boleh membenamkan logik terus dalam kod UI anda.

Menyediakan JSX dengan Vite
Memandangkan kami menggunakan Vite untuk pembangunan, berita baiknya ialah Vite telah diprakonfigurasikan untuk menyokong JSX di luar kotak. Ini bermakna anda boleh mula menulis JSX serta-merta tanpa sebarang persediaan tambahan.

Jika anda telah mengikuti langkah dari Hari 2, projek Vite anda telah disediakan. Anda boleh mula mencipta komponen dengan JSX dan melihatnya dipaparkan serta-merta.

Kesimpulan
JSX ialah alat berkuasa yang merapatkan jurang antara HTML dan JavaScript, menjadikannya lebih mudah untuk membina UI dinamik dan interaktif dengan React. Memahami cara JSX berfungsi dan cara React menggunakannya untuk memaparkan elemen akan menetapkan asas yang kukuh untuk perjalanan pembangunan React anda.

Esok, kita akan menyelami Komponen dan Prop—bahan asas bagi mana-mana aplikasi React.

Atas ialah kandungan terperinci Memahami Hari JSX dan Elemen Rendering - ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!