ReactJS入門 - 基本介紹、環境建置與專案建立 - 筆記長也NotesHazuya

ReactJS入門 - 基本介紹、環境建置與專案建立

2021-06-08 19:58:00   ReactJS

棄坑 Angular

本篇文章是 react 入門系列的第一篇文章,之前在剛接觸前端框架的時候,選擇了 Angular,但是礙於 Angular 比較多自己的規範,上手難度比起 Vue 與即將開始介紹的 React 複雜不少,如果讀者是剛由後端轉來接觸前端的話,不仿先從 React 下手獲得一些成就感與基本的前端概念(如Css、JavaScript等)後再去學習較複雜的 Angular吧。

 React 入門系列篇章安排

我稍微快速介紹我預計的篇章安排,但是實際狀況仍然會視讀者或是其他狀況有所更動,但大致上會依照以下的順序:

  • React介紹、環境建置與專案建立

  • JavaScipt ES6 基本介紹

  • React 核心:JSX特點與介紹

  • React Component - 元件

  • React Props -  綁定資料與函式

  • state setState

  • React 生命週期函數(classComponent)

  • React Hook - useState

  • React Hook - useEffect useRef

  • React hook - Custom Hook

  • 各階層 component 的溝通

  • Input state 的互動和使用

  • api請求資料 - fetchAPI

  • React Router - react-router-dom

  • 實戰練習:利用 FireBase 建置留言板

篇章細節在這裡就不放上去了。

React 是什麼?為什麼使用它?

React 是 facebook 所推出的前端框架(雖然有很多人說 React 不算框架,但是姑且就叫框架吧),使用 React 可以很方便的進行前端 UI 元件(component)開發、生命週期管理、套件管理與打包。利用 Router 也能很快的開發出SPA(single-page application),提升網站的體驗。如果你的專案規模很小、頁面功能很單純,DOM的操作並不多,也許可以不需要使用框架。

NPM 與 Node.js 安裝

npm 是用來管理專案套件的,由於 npm 在安裝 node.js 的時候會一起安裝,所以我們會直接下載 node.js 安裝就好了。

https://nodejs.org/zh-tw/


基本直接依照你的系統選擇版本就好,安裝基本就一直下一步就行。

安裝 create-react-app

create-react-app 可以一次建立好 React 專案的各種所需(基本的架構、webpack 以及編譯器等),直接在終端機執行 npm 指令:

npm install -g create-react-app

-g 這個參數會讓整個系統都可以使用安裝的套件,如果不是必要的話,不要使用這個參數,避免各個專案的套件版本出現問題。

建立專案

到你個人的工作目錄下,執行以下指令建立第一個專案

create-react-app hello-hello-world

hello-hello-world 是專案名稱,可以改成你喜歡的。

建立完成後再執行以下兩個指令

cd hello-hello-world
npm start

先移到動你的專案資料夾,再執行 npm start

然後打開瀏覽器就會看到 react 預設的網頁了。

npm start

在開發途中,由於 react 開發的網頁必須經過編譯,所以如果要預覽自己的修改、DeBug 的話就執行 npm start,React 會開一個 port 號為 3000 的本地開發預覽環境,當你修改了某個檔案之後,就會自動重新編譯。

npm rum build

如果你已經完成開發,執行這個指令後,React 就會把你的網頁打包成為單個 html 以及打包其他 js、css 以及靜態資源檔案,讓你可以部署到伺服器上。

專案目錄介紹

—build:

執行過 npm run build 後會被建立,裡面會放置部署檔案,因為還沒執行所以本篇沒有這個資料夾。

—public:

放打包前html檔的地方,favicon.ico 和 manifest.json 是跟預設的icon有關。

—src:

原始的程式碼,大部份都會編輯這個資料夾內的程式碼

—node_modules:

開發者用 npm/yarn 所載下來的套件會放在這裡。

—package.json: 

設定打包工具(webpack)有關,前面提到的 npm 指令也設定在裡面。

—package-lock.json:

主要是用來紀錄你在這個專案用 npm/yarn 載了哪些套件。

React virtual DOM

利用本篇最後的篇幅來簡單介紹一下 React 有特色的地方 - Virtual DOM。相較於以往直接操作 DOM, VirtualDOM 會先建立一個虛擬的 DOM ,再透過比對函數,只更新需要更新的節點部分。如果你自己打開過 index.js 會發現有一行 ReactDOM.render(),這裡就是進入 VirtualDOM 的地方,也就是 React 程式的進入點。

總結

本篇我們只有簡單介紹了 React 以及如何建立專案,由於之後開發都會使用的到 JavaScript ES6 的語法,所以下一篇開始我們會先介紹基本的 ES6 語法。

額外附錄:VS Code JSX 套件與 Chrome React Developer Tools 外掛

ES7 React/Redux/GraphQL/React-Native snippets

這是我目前所用的,讓 Vs Code 自動帶入 JSX 語法。

如果有覺得自己喜歡的,可以用留言推薦給大家~

React Developer Tools

這個外掛可以讓你日後進行DeBug更容易,例如追蹤元件的變化。

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)