Panduan Pemula untuk Bertindak balas: Bermula dengan Asas

React telah menjadi asas pembangunan web moden, diraikan kerana kecekapan, fleksibiliti dan ekosistemnya yang teguh. Dibangunkan oleh Facebook, React memudahkan proses membina antara muka pengguna interaktif dengan membenarkan pembangun mencipta komponen UI boleh guna semula.

Sama ada anda ingin membina aplikasi satu halaman yang kompleks atau sekadar meningkatkan kemahiran pembangunan web anda, menguasai React ialah aset yang berharga.

Dalam panduan ini, kami akan membimbing anda melalui konsep dan langkah penting untuk memulakan React, termasuk menyediakan persekitaran pembangunan anda, memahami asas React dan mencipta komponen pertama anda.

Apakah React?

React ialah perpustakaan JavaScript yang digunakan untuk membina antara muka pengguna, terutamanya untuk aplikasi satu halaman yang anda perlukan pengalaman pengguna yang dinamik dan interaktif. Pada terasnya, React membenarkan pembangun membina komponen terkapsul yang mengurus keadaan mereka sendiri dan menyusunnya untuk mencipta UI yang kompleks. Sifat deklaratif React menjadikannya lebih mudah untuk membuat alasan tentang aplikasi anda, manakala seni bina berasaskan komponennya menggalakkan kebolehgunaan semula dan kebolehselenggaraan.

Sejarah Ringkas dan Evolusi Reaksi

React pertama kali dikeluarkan oleh Facebook pada tahun 2013 dan cepat mendapat tarikan kerana pendekatan inovatifnya untuk membina UI. Tidak seperti perpustakaan dan rangka kerja tradisional yang memanipulasi DOM secara langsung, React memperkenalkan konsep DOM maya. Abstraksi ini membolehkan React mengoptimumkan pemaparan dengan hanya mengemas kini bahagian UI yang telah berubah, yang membawa kepada prestasi yang lebih cekap.

Sejak penubuhannya, React telah berkembang dengan ketara, memperkenalkan ciri seperti cangkuk, API konteks dan pemaparan serentak. Perpustakaan ini mempunyai ekosistem yang bertenaga, dengan pelbagai alatan, perpustakaan dan rangka kerja dibina di sekelilingnya, meningkatkan lagi keupayaannya.

Ciri-ciri Utama React

1. Seni Bina Berasaskan Komponen: Pendekatan berasaskan komponen React membolehkan pembangun memecahkan UI yang kompleks kepada bahagian yang lebih kecil dan boleh digunakan semula, masing-masing dengan logik dan pemaparan sendiri.

2. DOM Maya: DOM maya ialah perwakilan dalam ingatan DOM sebenar. React menggunakan DOM maya ini untuk mengemas kini UI dengan cekap dengan membandingkannya dengan keadaan sebelumnya dan hanya menggunakan perubahan yang diperlukan.

3. Sintaks Pengisytiharan: Sintaks pengisytiharan React memudahkan mereka bentuk UI dengan menerangkan rupa UI untuk mana-mana keadaan tertentu, dan bukannya menentukan cara menukar UI.

4. Aliran Data Sehala: React menguatkuasakan aliran data satu arah, yang bermaksud bahawa data mengalir daripada komponen induk kepada komponen anak, menjadikannya lebih mudah untuk menjejak dan mengurus perubahan keadaan.

Menyediakan Persekitaran Pembangunan

Sebelum menyelami React, anda harus mempunyai pemahaman asas tentang HTML, CSS dan JavaScript. Kebiasaan dengan teknologi ini akan membantu anda memahami konsep React dengan lebih berkesan, kerana React membina teknologi web asas ini.

Memasang Node.js dan npm

Pembangunan React memerlukan Node.js dan npm (Pengurus Pakej Node), yang digunakan untuk mengurus kebergantungan projek dan menjalankan alatan pembangunan.

Cara Memasang Node.js dan npm:

1. Muat turun dan Pasang Node.js: Pergi ke tapak web rasmi Node.js dan muat turun versi LTS (Sokongan Jangka Panjang) terkini untuk sistem pengendalian anda. Pakej pemasangan ini termasuk npm.

2. Sahkan Pemasangan: Selepas pemasangan, buka terminal (atau command prompt) dan jalankan arahan berikut untuk mengesahkan bahawa Node.js dan npm dipasang dengan betul:
   

   node -v
   npm -v

Anda sepatutnya melihat nombor versi untuk Node.js dan npm, mengesahkan bahawa pemasangan telah berjaya.

Mencipta Aplikasi React

Cara paling mudah untuk bermula dengan React ialah menggunakan alat create-react-app, yang menyediakan projek React baharu dengan konfigurasi lalai yang wajar.

Panduan Langkah demi Langkah untuk Memulakan Projek React Baharu:

1. Pasang create-react-app Secara Global: Buka terminal anda dan jalankan:

   npx create-react-app my-app

Ganti apl saya dengan nama projek yang anda inginkan. Perintah ini mencipta direktori baharu dengan nama yang diberikan dan menyediakan projek React di dalamnya.

1. Navigate to Your Project Directory:

   cd my-app

1. Start the Development Server:

   npm start

This command runs the development server and opens your new React application in your default web browser. You should see a default React welcome page, indicating that everything is set up correctly.

Understanding React Basics

Components are the building blocks of a React application. They encapsulate UI elements and logic, making it easier to manage and reuse code. Components can be classified into two types:

1. Functional Components: These are JavaScript functions that return React elements. They are often used for simple, stateless components.

Example:

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

1. Class Components: These are ES6 classes that extend React.Component and include a render method. They are used for more complex components with local state and lifecycle methods.

Example:

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

JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes it easier to create React elements and components.

How JSX is Transformed into JavaScript:

JSX is not valid JavaScript by itself. During the build process, a tool like Babel transforms JSX into regular JavaScript. For example:

JSX:

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

Transformed JavaScript:

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

Props (Properties)

Props are used to pass data from a parent component to a child component. They are read-only and help make components reusable.

Example of Passing Props to a Component:

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

function App() {
  return <Greeting username="Alice" />;
}

In this example, the Greeting component receives a username prop from the App component and displays it.

State

State allows components to manage their own data and react to user interactions. In functional components, the useState hook is used to manage state.

Introduction to the useState Hook:

The useState hook is a function that returns an array with two elements: the current state value and a function to update it.

Example of State Management Using useState:

import React, { useState } from 'react';

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

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

In this example, the Counter component maintains a count state. Clicking the button updates the state, and the UI reflects the new count value.

Building Your First React Component

Let’s create a simple functional component to display a greeting message.

Step-by-Step Example:

1. Create a New File: In the src directory of your project, create a file named Greeting.js.

2. Define the Component:
   

   import React from 'react';

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

   export default Greeting;

1. Render the Component: Open src/App.js and render the Greeting component.

   import React from 'react';
   import Greeting from './Greeting';

   function App() {
     return (
       <div className="App">
         <Greeting />
       </div>
     );
   }

   export default App;

Adding Basic Styles

You can style your components using inline styles or external CSS files. Here’s how to add basic styles:

1. Inline Styles:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return <h1 style={style}>Hello, styled React!</h1>;
   }

1. External CSS: Create a CSS file (Greeting.css) in the src directory.

   .greeting {
     color: green;
     text-align: center;
   }

Import the CSS file in Greeting.js and apply the class:

   import React from 'react';
   import './Greeting.css';

   function Greeting() {
     return <h1 className="greeting">Hello, styled React!</h1>;
   }

   export default Greeting;

Conclusion

React is a powerful library that enables developers to build dynamic and interactive user interfaces efficiently. In this guide, we covered the basics of React, including its core concepts, setting up the development environment, understanding components, JSX, props, and state, and building your first component. We also explored styling options to enhance your components.

Atas ialah kandungan terperinci Panduan Pemula untuk Bertindak balas: Bermula dengan Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!