學習 React.js 的綜合指南

React.js 由 Facebook 開發和維護，已成為用於建立使用者介面（尤其是單頁應用程式 (SPA)）的最受歡迎的 JavaScript 程式庫之一。 React 以其靈活性、高效和易用性而聞名，擁有龐大的社群和豐富的資源供各個層級的開發人員使用。無論您是初學者還是希望將 React 添加到您的技能組合中的經驗豐富的開發人員，本教程都將引導您了解 React.js 的基礎知識。

1.什麼是 React.js？

React.js 是一個開源 JavaScript 函式庫，用於建立使用者介面，特別是對於需要快速、互動式使用者體驗的單頁應用程式。 React 允許開發人員創建大型 Web 應用程序，這些應用程式可以有效地更新和渲染以回應資料變更。它是基於元件的，這意味著 UI 被分成小的、可重複使用的部分，稱為元件。

2.設定你的 React 環境

開始編碼之前，您需要設定開發環境。請依照以下步驟操作：

第 1 步：安裝 Node.js 和 npm

• Node.js：React 需要 Node.js 作為其建置工具。
• npm：節點套件管理器（npm）用於安裝庫和套件。

您可以從官網下載並安裝Node.js。 npm 與 Node.js 捆綁在一起。

第 2 步：安裝 Create React App

Facebook 建立了一個名為 Create React App 的工具，可以幫助您快速且有效率地建立新的 React 專案。在終端機中執行以下命令：

npx create-react-app my-app

此指令會建立一個名為 my-app 的新目錄，其中包含啟動 React 專案所需的所有檔案和相依性。

第3步：啟動開發伺服器

導航到您的專案目錄並啟動開發伺服器：

cd my-app
npm start

您的新 React 應用程式現在應該在 http://localhost:3000 上運行。

3.了解 React 元件

React 就是元件。 React 中的元件是一個獨立的模組，它呈現一些輸出，通常是 HTML。組件可以定義為 功能組件 或 類別組件.

功能組件

功能元件是一個傳回 HTML 的簡單 JavaScript 函數（使用 JSX）。

範例：

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

類別組件

類別元件是一種更強大的定義元件的方式，並允許您管理本機狀態和生命週期方法。

範例：

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

4. JSX – JavaScript XML

JSX 是 JavaScript 的語法擴展，看起來與 HTML 類似。它允許您直接在 JavaScript 中編寫 HTML，然後 React 將其轉換為真正的 DOM 元素。

範例：

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

JSX 讓 UI 結構的編寫和視覺化變得更加容易。然而，在幕後，JSX 被轉換為 React.createElement() 呼叫。

5.狀態與道具

道具

Props（「屬性」的縮寫）用於將資料從一個元件傳遞到另一個元件。它們是不可變的，這意味著它們不能被接收組件修改。

範例：

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

狀態

State 與 props 類似，但它是在元件內管理的，並且可以隨著時間的推移而改變。狀態通常用於組件需要追蹤的數據，例如使用者輸入。

範例：

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.處理事件

在 React 中處理事件類似於在 DOM 元素中處理事件。但是，存在一些語法差異：

• React 事件使用駝峰命名法命名，而不是小寫。
• 使用 JSX，您可以傳遞一個函數作為事件處理程序，而不是一個字串。

範例：

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

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

7.生命週期方法

React 中的類別元件具有特殊的生命週期方法，可讓您在元件生命週期中的特定時間執行程式碼。其中包括：

• componentDidMount：元件掛載後呼叫。
• componentDidUpdate：元件更新後呼叫。
• componentWillUnmount：在元件卸載之前呼叫。

範例：

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!

以上是學習 React.js 的綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！