Panduan Memulakan React: Membina Antara Muka Pengguna Pertama Anda dari Awal

React ialah pustaka JavaScript untuk membina antara muka pengguna. Ia dibangunkan dan diselenggara oleh Facebook, dan telah menjadi salah satu alat yang paling popular dalam pembangunan bahagian hadapan. Panduan ini akan membawa anda dari awal, langkah demi langkah untuk memahami konsep asas React, dan membina antara muka pengguna yang mudah.

Mengapa Memilih React?

React mempunyai kelebihan berikut:

• Berkomponen: React memecahkan antara muka pengguna kepada komponen yang bebas dan boleh diguna semula. Ini menjadikan kod lebih mudah diselenggara dan difahami.
• Deklaratif: React menggunakan gaya pengaturcaraan deklaratif, yang bermaksud anda hanya perlu menerangkan kandungan yang ingin anda persembahkan, dan React akan mengendalikan kemas kini dan rendering secara automatik.
• Cekap: React menggunakan DOM maya dan algoritma diff pintar, yang boleh mengemas kini antara muka pengguna dengan cekap dan mengurangkan rendering yang tidak perlu.
• Sokongan Komuniti yang Besar: React mempunyai komuniti yang besar dan ekosistem yang kaya, anda boleh menemui banyak tutorial, pustaka dan alat untuk membantu anda membangunkan.
• Keupayaan Merentas Platform: React Native membolehkan anda menggunakan React untuk membangunkan aplikasi mudah alih asli (iOS dan Android).

Persediaan

Sebelum anda bermula, anda perlu memastikan bahawa anda telah memasang alat berikut pada komputer anda:

• Node.js: Node.js ialah persekitaran runtime JavaScript yang digunakan untuk menjalankan alat pembangunan React. Anda boleh memuat turun dan memasangnya dari https://nodejs.org/.
• npm atau yarn: npm (Node Package Manager) dan yarn ialah pengurus pakej JavaScript yang digunakan untuk memasang dan mengurus kebergantungan React. Biasanya npm dipasang bersama dengan Node.js. yarn boleh dipasang dari https://yarnpkg.com/.

Mencipta Aplikasi React Pertama Anda

Kita akan menggunakan create-react-app untuk mencipta projek React dengan cepat.

1. Mencipta menggunakan npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Mencipta menggunakan yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Selepas melaksanakan arahan di atas, create-react-app akan mencipta direktori bernama my-first-react-app secara automatik, dan memulakan projek React dalam direktori tersebut. Arahan npm start atau yarn start akan memulakan pelayan pembangunan, dan anda boleh melawati http://localhost:3000 dalam pelayar anda untuk melihat aplikasi React anda.

Struktur Direktori

Struktur direktori projek yang dicipta oleh create-react-app adalah seperti berikut:

my-first-react-app/
├── node_modules/         # Pustaka yang bergantung pada projek
├── public/               # Aset statik (contohnya fail HTML)
│   ├── index.html        # Fail HTML titik masuk aplikasi
│   └── ...
├── src/                  # Kod sumber React
│   ├── App.css           # Gaya CSS komponen App
│   ├── App.js            # Komponen App
│   ├── App.test.js       # Fail ujian komponen App
│   ├── index.css         # Gaya CSS global
│   ├── index.js          # Fail JavaScript titik masuk aplikasi
│   ├── logo.svg          # Logo React
│   └── ...
├── .gitignore            # Fail yang diabaikan oleh Git
├── package.json          # Metadata dan kebergantungan projek
├── README.md             # Dokumentasi projek
└── yarn.lock             # Fail penguncian versi kebergantungan (jika menggunakan yarn)

Memahami Komponen React

Aplikasi React dibina daripada komponen. Komponen adalah blok kod yang bebas dan boleh diguna semula, yang digunakan untuk memaparkan bahagian tertentu antara muka pengguna.

Dalam fail src/App.js, anda boleh melihat komponen App lalai:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Penjelasan Kod:

• import React from 'react'; mengimport pustaka React.
• function App() { ... } mentakrifkan komponen fungsi bernama App.
• return ( ... ) mengembalikan ungkapan JSX, yang menerangkan kandungan yang patut dipaparkan oleh komponen.
• export default App; mengeksport komponen App, supaya ia boleh digunakan dalam fail lain.

JSX (JavaScript XML)

JSX ialah sambungan sintaks JavaScript yang membenarkan anda menulis kod seperti HTML dalam kod JavaScript anda. Dalam contoh di atas, ... ialah ungkapan JSX. Kod JSX akan ditukar oleh Babel kepada kod JavaScript standard, supaya pelayar dapat memahaminya.

Mengubah Suai Komponen App

Mari kita ubah suai komponen App untuk mencipta pembilang yang mudah.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Kaunter

      Kiraan Semasa: {count}

      +
      -
    
  );
}

export default App;

Penerangan Perubahan:

• import React, { useState } from 'react'; Mengimport useState Hook. useState adalah React Hook yang digunakan untuk menambah state dalam komponen fungsi.
• const [count, setCount] = useState(0); Menggunakan useState Hook untuk mencipta pembolehubah state bernama count, dan memulakannya kepada 0. setCount adalah fungsi yang digunakan untuk mengemaskini state count.
• const increment = () => { setCount(count + 1); }; Mendefinisikan fungsi bernama increment, yang digunakan untuk menambah state count sebanyak 1.
• const decrement = () => { setCount(count - 1); }; Mendefinisikan fungsi bernama decrement, yang digunakan untuk mengurangkan state count sebanyak 1.
• Kiraan Semasa: {count} Memaparkan nilai state count dalam halaman. {count} adalah ungkapan JSX, yang digunakan untuk memasukkan pembolehubah JavaScript dalam kod JSX.
• + dan - Mencipta dua butang, masing-masing mengikat fungsi increment dan decrement. onClick adalah pengendali acara, yang digunakan untuk melaksanakan fungsi yang ditentukan apabila butang diklik.

Selepas menyimpan fail src/App.js, pelayar akan disegarkan secara automatik, dan anda akan melihat kaunter yang mudah. Mengklik butang "+" akan menambah kiraan, mengklik butang "-" akan mengurangkan kiraan.

Menggunakan Gaya CSS

Anda boleh menggunakan CSS untuk mencantikkan aplikasi React anda. create-react-app menyokong CSS Modules dan fail CSS biasa.

Menggunakan CSS Modules:

CSS Modules membolehkan anda mencipta gaya CSS yang berasingan untuk setiap komponen, mengelakkan konflik gaya. Untuk menggunakan CSS Modules dalam komponen, anda perlu mencipta fail yang berakhir dengan .module.css.

Contohnya, cipta fail bernama App.module.css, dan tambahkan gaya CSS berikut di dalamnya:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Kemudian import CSS Modules dalam fail src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Mengimport CSS Modules

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Menggunakan objek styles untuk merujuk kelas CSS */}
      

# Pembilang

      Kiraan Semasa: {count}

      +
      -
    
  );
}

export default App;

Menggunakan fail CSS biasa:

Anda juga boleh menggunakan fail CSS biasa untuk mentakrifkan gaya global. Dalam fail src/index.css, anda boleh mentakrifkan gaya global.

Contohnya, tambahkan gaya CSS berikut:

body {
  font-family: sans-serif;
}

Gaya ini akan digunakan pada elemen body seluruh aplikasi.

Langkah Seterusnya

Tahniah, anda telah menyiapkan aplikasi React pertama anda! Seterusnya, anda boleh mempelajari lebih lanjut tentang React, contohnya:

• Komunikasi Komponen: Pelajari cara membolehkan komponen yang berbeza berkomunikasi antara satu sama lain.
• Pengendalian Borang: Pelajari cara membuat dan mengendalikan borang.
• Laluan: Pelajari cara menggunakan React Router untuk membuat aplikasi berbilang halaman.
• Redux atau Context API: Pelajari cara mengurus keadaan aplikasi.
• Hooks: Mendalami React Hooks, seperti useEffect, useContext, dll.

Ingat, React ialah teknologi yang memerlukan latihan dan pembelajaran berterusan. Selamat belajar!