Setiap Konsep Tindak Balas Diterangkan dalam Inute

React ialah perpustakaan JavaScript yang membolehkan anda membangunkan kod bahagian hadapan dalam beberapa minit. Ia mempunyai kaedah dan fungsi pra-bina untuk melaksanakan tugas tertentu. Bertindak balas sebagai perpustakaan termasuk istilah kompleks seperti perdamaian, keadaan, prop, dll. Apakah maksudnya sebenarnya?

Dalam artikel ini, anda akan belajar tentang konsep yang dibesar-besarkan ini dengan lebih ringkas.

1. Komponen

Komponen ialah sedikit kod boleh guna semula yang mengembalikan elemen React untuk dipaparkan pada halaman web. Ia ialah sekumpulan kod yang membentuk satu bahagian halaman web seperti butang, bar navigasi, kad, dll. Ia sama seperti fungsi JavaScript tetapi mengembalikan elemen yang diberikan. Ia menerima parameter yang dipanggil "Props". Komponen dinamakan dengan huruf besar.

Contoh Komponen Berfungsi

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

Nota:

• Komponen Fungsian disyorkan dan bukannya berasaskan Kelas.
• Komponen berfungsi sering dipanggil komponen tanpa kewarganegaraan.

2. JSX

JSX ialah JavaScript XML, yang membolehkan kami menulis HTML dalam React. Ia memperkenalkan teg dan atribut seperti XML untuk mencipta elemen React. Ia memudahkan untuk mencipta Komponen React dengan membenarkan anda menulis kod seperti HTML dalam fail .jsx. Daripada menggunakan JavaScript yang rumit, JSX menjadikan kod itu boleh dibaca dan bersih. React DOM menggunakan camelCase untuk penamaan atribut seperti htmlFor, onClick.

Contoh JSX

<h1 className="head">This is H1!</h1>

3. Serpihan

Fragmen dalam React membolehkan anda mengembalikan berbilang elemen daripada komponen. Ia mengumpulkan senarai elemen tanpa membuat nod DOM tambahan. Ia membersihkan semua div tambahan daripada DOM. Ini memaparkan UI dengan cepat.

Contoh Serpihan

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

Nota:

• Serpihan menjadikan kod lebih bersih dan boleh dibaca.
• Ia cekap memori.
• Ia tidak boleh mempunyai gaya CSS dan Kekunci.

4. Props

"Props" ialah kata kunci khas dalam React yang bermaksud sifat. Ia digunakan untuk memindahkan data antara komponen. Susulan pemindahan data adalah satu arah iaitu daripada komponen induk kepada komponen anak.

Contoh Alat Peraga

function Head(props) {
  return <p>{props.children}</p>;
}

Nota: Props adalah baca sahaja, yang memastikan komponen anak tidak memanipulasi nilai yang datang daripada komponen induk.

5. Negeri

Komponen perlu menjejaki nilai tertentu apabila pengguna berinteraksi. Katakan butang togol tema mod terang/gelap menukar nilainya (daripada terang kepada gelap & sebaliknya) apabila pengguna mengklik butang tersebut. Komponen perlu mengingati nilai semasa tema. Dalam React, jenis memori khusus komponen ini dipanggil keadaan.

Keadaan ditakrifkan menggunakan cangkuk useState(); lebih lanjut mengenainya kemudian.

Contoh menentukan keadaan

const [index, setIndex] = useState(0)

Nota: Adalah amalan yang baik untuk mentakrifkan keadaan dalam komponen peringkat atasan untuk berkongsinya dengan mudah dengan komponen kanak-kanak lain dan memastikan satu sumber kebenaran.

6. Kaedah Kitar Hayat

Kaedah kitar hayat ialah fungsi khas yang boleh anda gunakan dalam kelas React untuk melaksanakan tindakan pada pelbagai peringkat kewujudan komponen. Peringkat ini ialah:

• Pemasangan: Apabila komponen pertama kali dibuat dan dimasukkan ke dalam DOM.
• Mengemas kini: Apabila prop atau keadaan komponen berubah, menyebabkan komponen itu dipaparkan semula.
• Menyahlekap: Apabila komponen dialih keluar daripada DOM.

7. Kesucian

Kemurnian dalam pengaturcaraan berfungsi ialah apabila input yang sama diberikan mengembalikan output yang sama. Input adalah satu-satunya faktor yang menentukan keluaran maka fungsi tersebut dikatakan tulen.

Dalam React komponen dikatakan tulen apabila ia mengembalikan output yang sama untuk input yang sama (iaitu props)

8. Mod Tegas

Mod Ketat ialah ciri pembangunan dalam tindak balas yang membolehkan ciri keselamatan tambahan untuk meningkatkan kualiti kod. Ia menunjukkan amaran mengenai kemungkinan ralat dan pepijat ke dalam kod. Ia log amaran ke dalam konsol penyemak imbas.

Contoh Mod Tegas

import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

Mod Tegas dalam Konsol Pelayar React Showing

9. Kail

Cangkuk dalam React membenarkan untuk menggunakan keadaan dan ciri React yang lain tanpa menulis komponen kelas. Cangkuk ialah fungsi yang menyediakan akses kepada pengurusan keadaan React, kesan sampingan dan ciri lain.

Beberapa cangkuk yang biasa digunakan: useState, useMemo, useRef, dll.

Contoh Cangkuk

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

Nota:

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional.

10. Context API

The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoids prop drilling by simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.

The useContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.

The useContext hook is used to access the data.

Example of Context API

Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

Use useContext hook to access the value of age.

import { useContext } from "react";

function GrandChildConsumer() {
  const age = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

Note: The `useContext` hook is often used instead of Consumer for better readability and simplicity.

11. Lists and Keys

A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.

Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.

Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.

Example of Lists and Keys

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

Note:

• It is recommended to use string as a `Key` that uniquely identifies the item in the list.
• Third-party libraries like UUID offer the functionality to create unique keys.

12. Form: Controlled & Uncontrolled Components

React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:

Controlled Components

In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.

Example of Controlled Component

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.

Example of Uncontrolled Component

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

Note:

• Controlled components provides form validation because the user's input is instantly reflected due to use of state.
• Form validation is not possible in uncontrolled components because the user's input can only be accessed after the form is submitted.

13. React Router

• Introduction to React Router for navigation
• Basic setup and usage
• Example: Creating routes and navigating between pages

React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.

First, you need to install React Router from your terminal.

Installing React Router

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

Example of React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

First wrap your content into the . Then we define and inside that introduces the for navigation. has path which specifies URL of the page and element attribute which specifies the component that needs to be rendered on the defined path.

Note:

• Apl boleh mempunyai berbilang < Laluan >.
• < Laluan > boleh bersarang.
• `react-router-dom` juga mempunyai < Pautan > dan < Outlet > Komponen untuk navigasi.

Kesimpulan

Cara terbaik untuk mempelajari mana-mana bahasa pengaturcaraan adalah dengan mempraktikkan lebih banyak projek. Bina projek kecil dan bereksperimen dengan konsep.

Jika anda rasa siaran ini membantu, jangan lupa untuk terus menunjukkan kasih sayang kepada saya. Sehingga lain kali suka, kongsi dan pelajari.

Anda juga boleh terus berhubung dengan saya dengan mengikuti saya di sini dan di X, GitHub dan LinkedIn.

Atas ialah kandungan terperinci Setiap Konsep Tindak Balas Diterangkan dalam Inute. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!