昨天我們談到了為什麼要學習React,今天我們就開始動手學習，作為一個有Vue開發經驗的開發者，我們會特別注意React和Vue的異同。

開發環境設置

首先,讓我們來設置我們的開發環境。我使用的是WebStorm IDE，我私心覺得最好的開發IDE。

1. 安裝Node.js (如果還沒安裝的話)
2. 使用Create React App創建新項目:

   npx create-react-app my-react-app --template typescript
   

3. 在WebStorm中打開專案
4. 安裝React Developer Tools瀏覽器插件
5. 可以參考我的設定

React核心概念

1. 組件(Components)

React和Vue都是基於組件的,但React中的組件更接近純JavaScript函數或類。

// 函數組件
function Welcome(props: { name: string }) {
  return <h1>Hello, {props.name}</h1>;
}

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

與Vue的單文件組件(SFC)不同,React沒有模板部分,一切都在JavaScript/TypeScript中。

2. JSX

JSX是React的一大特色,它允許我們在JavaScript中直接寫HTML-like的代碼。

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

這對Vue開發者來說可能需要一些時間適應,因為在Vue中我們通常在template中寫HTML。

3. Props

Props在React中的使用方式與Vue非常相似:

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

// 使用
<Welcome name="Alice" />

4. State

在函數組件中,我們使用useState Hook來管理狀態:

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>
  );
}

這與Vue 3的Composition API中的ref或reactive有些相似。

5. 生命週期

React的生命週期與Vue有一些不同。在函數組件中,我們主要使用useEffect Hook來處理副作用和生命週期相關的邏輯:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

這個useEffect Hook結合了Vue中的created和updated生命週期鉤子的功能。

小結

今天我們快速瀏覽了React的一些核心概念,並與Vue進行了對比。作為一個Vue開發者,你可能已經注意到了一些相似之處,但也有一些明顯的區別。React的組件更接近純JavaScript/TypeScript,而JSX則為我們提供了一種新的編寫UI的方式。