Panduan Komprehensif untuk Pembelajaran React.js

React.js, dibangunkan dan diselenggara oleh Facebook, telah menjadi salah satu perpustakaan JavaScript paling popular untuk membina antara muka pengguna, terutamanya aplikasi satu halaman (SPA). Terkenal dengan fleksibiliti, kecekapan dan kemudahan penggunaannya, React mempunyai komuniti yang besar dan banyak sumber untuk pembangun di semua peringkat. Sama ada anda seorang pemula atau pembangun berpengalaman yang ingin menambahkan React pada set kemahiran anda, tutorial ini akan membimbing anda melalui asas-asas React.js.

1. Apakah itu React.js?

React.js ialah perpustakaan JavaScript sumber terbuka yang digunakan untuk membina antara muka pengguna, terutamanya untuk aplikasi satu halaman yang anda inginkan pengalaman pengguna yang pantas dan interaktif. React membolehkan pembangun mencipta aplikasi web besar yang boleh mengemas kini dan membuat persembahan dengan cekap sebagai tindak balas kepada perubahan data. Ia berasaskan komponen, yang bermaksud UI dibahagikan kepada bahagian kecil yang boleh diguna semula dipanggil komponen.

2. Sediakan Persekitaran Reaksi Anda

Sebelum anda memulakan pengekodan, anda perlu menyediakan persekitaran pembangunan anda. Ikuti langkah ini:

Langkah 1: Pasang Node.js dan npm

• Node.js: React memerlukan Node.js untuk alatan binaannya.
• npm: Pengurus Pakej Nod (npm) digunakan untuk memasang perpustakaan dan pakej.

Anda boleh memuat turun dan memasang Node.js daripada tapak web rasmi. npm disertakan bersama Node.js.

Langkah 2: Pasang Apl Buat React

Facebook telah mencipta alat yang dipanggil Create React App yang membantu anda menyediakan projek React baharu dengan cepat dan cekap. Jalankan arahan berikut dalam terminal anda:

npx create-react-app my-app

Arahan ini mencipta direktori baharu bernama my-app dengan semua fail dan kebergantungan yang diperlukan untuk memulakan projek React.

Langkah 3: Mulakan Pelayan Pembangunan

Navigasi ke dalam direktori projek anda dan mulakan pelayan pembangunan:

cd my-app
npm start

Apl React baharu anda kini sepatutnya berjalan pada http://localhost:3000.

3. Memahami Komponen Reaksi

React adalah mengenai komponen. Komponen dalam React ialah modul serba lengkap yang menghasilkan beberapa output, biasanya HTML. Komponen boleh ditakrifkan sebagai sama ada komponen berfungsi atau komponen kelas.

Komponen Berfungsi

Komponen berfungsi ialah fungsi JavaScript ringkas yang mengembalikan HTML (menggunakan JSX).

Contoh:

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

Komponen Kelas

Komponen kelas ialah cara yang lebih berkuasa untuk menentukan komponen dan membolehkan anda mengurus keadaan setempat dan kaedah kitaran hayat.

Contoh:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

4. JSX – XML JavaScript

JSX ialah sambungan sintaks untuk JavaScript yang kelihatan serupa dengan HTML. Ia membolehkan anda menulis HTML terus dalam JavaScript, yang React kemudiannya akan berubah menjadi elemen DOM sebenar.

Contoh:

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

JSX menjadikannya lebih mudah untuk menulis dan menggambarkan struktur UI anda. Walau bagaimanapun, di bawah hud, JSX akan ditukar kepada panggilan React.createElement().

5. Negeri dan Prop

Prop

Props (singkatan dari "properties") digunakan untuk menghantar data dari satu komponen ke komponen yang lain. Ia tidak boleh ubah, bermakna ia tidak boleh diubah suai oleh komponen penerima.

Contoh:

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

Negeri

Keadaan serupa dengan prop, tetapi ia diuruskan dalam komponen dan boleh berubah dari semasa ke semasa. Keadaan sering digunakan untuk data yang perlu dijejaki oleh komponen, seperti input pengguna.

Contoh:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

6. Mengendalikan Acara

Mengendalikan acara dalam React adalah serupa dengan mengendalikan acara dalam elemen DOM. Walau bagaimanapun, terdapat beberapa perbezaan sintaksis:

• Acara tindak balas dinamakan menggunakan camelCase, bukannya huruf kecil.
• Dengan JSX, anda lulus fungsi sebagai pengendali acara, bukannya rentetan.

Contoh:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

7. Kaedah Kitar Hayat

Komponen kelas dalam React mempunyai kaedah kitaran hayat khas yang membolehkan anda menjalankan kod pada masa tertentu sepanjang hayat komponen. Ini termasuk:

• componentDidMount: Dipanggil selepas komponen dipasang.
• componentDidUpdate: Dipanggil selepas kemas kini komponen.
• componentWillUnmount: Dipanggil sebelum komponen dinyahlekapkan.

Contoh:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>{this.state.date.toLocaleTimeString()}</h1>
      </div>
    );
  }
}

8. Conditional Rendering

In React, you can create different views depending on the state of your component.

Example:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

9. Lists and Keys

When you need to display a list of data, React can render each item as a component. It’s important to give each item a unique "key" prop to help React identify which items have changed.

Example:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

10. React Hooks

React Hooks allow you to use state and other React features in functional components. Some of the most commonly used hooks include:

• useState: Allows you to add state to a functional component.
• useEffect: Lets you perform side effects in your function components.
• useContext: Provides a way to pass data through the component tree without having to pass props down manually at every level.

Example of useState:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

11. Building and Deploying React Applications

Once your application is ready, you can build it for production. Use the following command:

npm run build

This will create an optimized production build of your React app in the build folder. You can then deploy it to any web server.

Conclusion

React.js is a powerful tool for building modern web applications. By understanding components, state management, event handling, and hooks, you can create dynamic and interactive user interfaces. This tutorial covers the basics, but React's ecosystem offers much more, including advanced state management with Redux, routing with React Router, and server-side rendering with Next.js.

As you continue your journey with React, remember to leverage the wealth of online resources, including the official React documentation, community forums, and tutorials. Happy coding!

Atas ialah kandungan terperinci Panduan Komprehensif untuk Pembelajaran React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!