iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

Node-Red 貓的真實之口系列 第 10

Node-Red 貓的真實之口-React 基礎觀念與開發工具 1

React 開發基礎介紹

嗨各位開發者,今天有遇到奇怪的 bug 嗎?
今天筆者要用幾個問題來分享自己為什麼選擇用 React 開發這個應用。

首先當然因為這是筆者最熟悉的前端技術。
React 最大的特色之一是使用元件(Component)的來建構網頁的大小部分。

為什麼 React 要用 Component 開發?好處是?

詳情請看這篇由张云龙撰寫的前端工程文章

簡單來說,因為前端是複雜的 GUI 軟體,如果使用文章中提到的「元件化」開發,可以享有以下特色及優點:

  1. 網頁裡,分割出來的每個「可見的」「可互動的」區域,都被稱呼為元件
  2. 每個元件對應一個「資料夾」,元件所需的資源都集中放置在這個資料夾內,維護方便
  3. 每個元件具有「獨立性」,所以元件之間可以「自由組合」而呈更複雜的元件
  4. 頁面就是各種大小元件的放置空間,組合各個元件形成完整頁面。當你需要替換元件,只需要將對應的資料夾修改即可。

根據以上幾點,我們可以知道,依循元件的工程理念開發網頁,
可以享受許多維護及開發的好處。

接下來讓我們來架設 React 專案,來放置元件程式碼。

可是 React 開發環境難以架設,有什麼好辦法嗎?

React 專案架設需要導入多個函式庫及打包工具,加上搭配 jsx 語法,導致 React 的學習門檻較高。

建議的方法是先使用社群大受好評的「樣板專案」create-react-app,讓初學者可以先跳過繁複的專案設置,以受大眾接受的初始設置出發,開始學習及開發 React。

如果你使用版本 8.2 以上的 NodeJS,你可以用 npx 這個指令一鍵建立 React 專案

npx create-react-app my-app

用指令 cd my-app && npm start 你就可以建立一個會 hot reload 的開發用本地端服務器,開發體驗滿分?。

接下來讓我們從 create-react-app 專案來開始了解更多 React 吧。


上一篇
Node-Red 貓的真實之口-以 Node-RED 作為靜態資源服務器 - 2/2
下一篇
Node-Red 貓的真實之口-React 基礎觀念與開發工具 2
系列文
Node-Red 貓的真實之口13

尚未有邦友留言

立即登入留言