終究都要學 React 何不現在學呢？ - React 基礎 - React 是什麼？ - (1)

前言

不管怎麼樣，一開始絕對都是先從認識 React 基礎觀念與認識了解 React 背景開始，這樣子對於後續要學習其他框架時才能夠比較清楚彼此之間的差異，除此之外因為我本身是 Vue 開發者，因此其實我是抱著想多學一個框架的心態寫這一篇，所以可能會出現一些 Vue 跟 React 兩者語法上的差異比較，主要也是希望讓 Vue 開發者可以更好上手，接著就不廢話了，讓我們往下學吧！

React 是什麼？

React 官方網站其實就有說自己是一套 JavaScript Library、一套 JavaScript 的函式庫，發現了嗎？這邊我所寫的是一個函式庫 (Library)，而不是 Framework 唷~

當然你可以到 React 官方網站 去看，因為真的是這樣

而 Vue 官方網站則是說自己是一套 JavaScript Framework

這個時候或許你就會好奇了…

「Angular 呢？Angular 是什麼？我看它官網沒有寫啊？」

Angular 其實也是一個 JavaScript Framework (Vue 就是作者提取 Angular 不錯的地方，所建立的框架)，只是 Angular 官方網站沒有特別提到它是什麼而已，但是我們可以在 MDN 文件 看到這一句話

Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations

譯：Angular 是一個基於 TypeScript 的開源 Web 應用框架，由 Google 的 Angular 團隊與社群共同維護領導。

因此我們可以先簡單總結一下三大框架的類別

• Vue → JavaScript Framework
• React → JavaScript Library
• Angular → JavaScript Framework

偶爾你可能會看到人家說 VAR、VAR，而這 VAR 所指的就是這三大框架的第一個單字組合(絕對不是指變數宣告的 var)

• V -> Vue
• A -> Angular
• R -> React

Framework？Library？

前面先簡單結論

Framework 就是提供一套完整的架構與解決方案給你，而 Library 則是必須要自己去拼裝架構與處理解決方案。

比較擬人化來講的話，你可以把 Framework 看成你去特力屋看傢俱，看好之後直接下訂一整套的廚房衛浴組合，屆時就會有特力屋的施作人員直接到你家幫你做出你要的廚房衛浴組合。

但是 Library 的概念比較偏向自己動手做，你可以想像成自己去特力屋買現成的工具，例如：浴室的浴缸、磁磚、抽油煙機等，但缺點就是你必須要自己動手做，也就是常見的 DIY 啦~

這邊就不深入探討這一點了。

Vue 與 React 差異

接下來後面的範例只是讓你看看而已，不用急著理解沒關係，後面會再慢慢介紹。

所以我們就來快速看一下 Vue 跟 React 有什麼差異，首先先以 Vue 當作舉例來講，底下是 Vue 的基礎架構

(以下舉例 Vue3 Options API 當作示範)

const { createApp } = Vue;

const app = createApp({
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    sayHi() {
      window.alert('Hello Ray.');
    },
  },
});

app.mount('#app');

<div id="app">
  <button type="button" @click="count++">
    Count is: {{ count }}
  </button>
  <hr/> 
  <button type="button" @click="sayHi">打招呼</button>
</div>

上面就是我們身為一個 Vue 開發者很熟悉的架構與起手式。

現在讓我們把上方 Vue 的結構轉換成 React，這時候程式碼會變成什麼樣子呢？

(以下舉例 React Component 當作示範)

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

    this.handleClick = this.handleClick.bind(this);
  }

  sayHi() {
    window.alert('Hello Ray.');
  }
  
  handleClick() {
    this.setState((prevState) => ({
      count: prevState.count += 1,
    }));
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Count is: { this.state.count }
        </button>
        <hr />
        <button type="button" onClick={ this.sayHi }>打招呼</button>
      </div>
    );
  }
}

const app = ReactDOM.createRoot(document.getElementById('app'));
app.render(<App />);

<div id="app"></div>

相信學習 Vue 的你應該會瞬間覺得…

「整體結構也差太多了吧！而且為什麼 React 好像在寫純粹的 JavaScript？！」

React 跟 Vue 的初始環境跟語法比較下來，確實你會感覺好像 React 是在寫純粹的 JavaScript 沒有錯

但或許有人會說我舉例的是 React Class Component 的關係，所以這邊我也同時舉例 Vue 跟 React 較新的寫法。

首先先來看看 Vue 的 Composition API 寫法

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    
    const sayHi = () => {
      window.alert('Hello Ray.');
    };
    
    return {
      count,
      sayHi
    }
  },
});

app.mount('#app');

<div id="app">
  <button type="button" @click="count++">
    Count is: {{ count }}
  </button>
  <hr/> 
  <button type="button" @click="sayHi">打招呼</button>
</div>

接著讓我們來看一下 React Hook 寫法

const { useState } = React;

const root = ReactDOM.createRoot(document.getElementById('app'));

const App = () => {
  const [ count, setCount ] = useState(0);
   
  const sayHi = () => {
    window.alert('Hello Ray.');
  };
  
  const handleClick = () => {
    setCount((prevState) => prevState += 1);
  };
  
  return (
    <div>
      <button onClick={ handleClick }>
        Count is: { count }
      </button>
      <hr />
      <button type="button" onClick={ sayHi }>打招呼</button>
    </div>
  );
}

root.render(<App />);

<div id="app"></div>

這時候你可能會好奇…

「所以我們要學的是哪一種寫法？」

這一整個系列都會圍繞在 React Hook 為主，所以前面的範例都只是提供給你了解一下 React 跟 Vue 的各種寫法，透過兩者的差異比較上可以看出彼此的是越來越相似的，因此這也剛好可以回答多人在疑惑的一個問題

「起手該學哪一個框架？」

其實是都可以的，只要你專心學好一個之後再去看其他的，你會發現很好上手，因為相似之處很多。

那麼這一篇就先到這邊結束，我們下一篇見~

後記

本文將會同步更新到我的部落格

• 是 Ray 不是 Array