方格精選

React Hello World

閱讀時間約 4 分鐘
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。
使用npm安裝react, react-dom:
$ npm install react react-dom --save
dependencies下紀錄的是生產環境會用到的套件,這邊不使用--save-dev是因為生產環境也會用到react。
建立app.jsx:
修改index.html:
值得一提的是,跟上篇不同,這次把bundle.js放在body的最後,主要是因為scope問題,jsx中有取得root element的語法,因此才要放在這。
index.js跟上篇一樣不變:
接著,由於瀏覽器只看得懂javascript,因此為了將jsx編譯成js,需安裝babel loader與core:
$ npm install babel-loader --save-dev
$ npm install @babel/core --save-dev
安裝@babel/preset-react,主要用來把jsx檔案編譯成javascript:
$ npm install @babel/preset-react --save-dev
安裝翻譯ES6語法的preset,用來將ES6語法編譯成ES5:
$ npm install @babel/preset-env --save-dev
設定webpack.config.js:
entry中加入app.jsx,即jsx的內容也會被編譯到public/bundle.js去。
module下的rules的.jsx那邊的設定,意思是副檔名.jsx的檔案使用preset-react編譯成javascript ES6,再用preset-env編譯成ES5語法。
.js的設定則是把.js使用preset-env編譯成ES5語法。
最後打包:
$ webpack --mode production
打開index.html:
打開bundle.js會發現程式碼被編譯與壓縮過了:

如果每次改完code就要打包一次,然後網頁再重新整理一次來測試,這樣會累死啊!
可以安裝webpack-dev-server這個好用的東西,來簡化這個流程:
$ npm install webpack-dev-server -g
修改webpack.config.js:
這邊指定開啟的port為9000,若沒指定預設是8080。
這邊要記得設定contentBase,因為我們輸出的bundle.js是指定到public下,如果沒有設定這個,dev server會不work,也就是你code存檔了,但卻沒即時刷新瀏覽器。
開啟server指令:
$ webpack-dev-server
指令如果覺得很長麻煩,可以做以下設定:
設定package.json:
加入紅框的設定,之後可以直接執行:
$ npm run open
來打開dev server!
後來發現執行後出現這個error,是因為webpack-cli 4已經删除了webpack-cli/bin/config-yargs文件,因此要uninstall改裝3的版本:
$ npm uninstall webpack-cli
$ npm install webpack-cli [email protected] -S
接著你每次改程式碼儲存後,就會自動幫你build, refresh瀏覽器,是不是很方便呢?
另外如果IDE是用VSCode,甚至不用輸入指令直接點Debug icon就執行dev server了,如下圖紅框:
開啟localhost:9000,接著更動app.jsx儲存,會發現瀏覽器會即時更新:
完整source code:
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) {  $query->whereNotNull
在Model中常看到這兩個屬性fillable, guarded: protected $fillable=['name','job']; protected $guarded=['user_id']; 其中guarded是黑名單的意思,fillable則是白名單。 這兩個屬性是用來設定是否允許批量
使用者第三方登入如何發送JWT token呢? 以google登入為例,大致上邏輯會是這樣: E 若是DB已有user的資料,從DB table抓出目前登入的user row data,來產生token,並將token回傳給前端。 若沒有資料則把資料存到DB,一樣產生token回傳。 只不過範例中是
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
在select的時候發現回傳的primary key都是0,這時可能是因為primary key為非數字,如果沒有在model定義 auto increment是false, 預設會認為是true,所以要在model中多設定這行: public $incrementing = false; 本筆
1. 進入https://notify-bot.line.me/zh_TW/ 登入line後,點選右上角個人頁面 2. 點選發行權杖, 輸入名稱與要接收通知的群組。 按下發行後,複製token。 3. 記得將LINE Notify這個帳號加入該群組中: 4. 使用curl發送訊息: curl
直接從程式碼來看,假設code這樣寫: $this->customer->select(['id']) ->where('cell_1', '=', $cell_1) ->orWhere(function ($query) use ($cell_2) {  $query->whereNotNull
在Model中常看到這兩個屬性fillable, guarded: protected $fillable=['name','job']; protected $guarded=['user_id']; 其中guarded是黑名單的意思,fillable則是白名單。 這兩個屬性是用來設定是否允許批量
使用者第三方登入如何發送JWT token呢? 以google登入為例,大致上邏輯會是這樣: E 若是DB已有user的資料,從DB table抓出目前登入的user row data,來產生token,並將token回傳給前端。 若沒有資料則把資料存到DB,一樣產生token回傳。 只不過範例中是
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
07. React useContext Hook (User Context Example) || Learn React Through Mini Projects
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
歐盟委員會(ECHA)於2021年和2022年修訂了REACH下化學品註冊的部分資訊要求。自2023年5月1日起,ECHA將開始根據修訂後的要求檢查每一份新註冊和現有註冊的更新。
Thumbnail
2022年11月29日,英國官方公開了“UK-REACH緩衝期延長”公眾諮詢的結果:根據公眾諮詢的結果,經蘇格蘭和威爾士政府同意,英國環境、食品和鄉村事務部(Defra)將提出二級立法,將UK-REACH註冊提交截止日期延長3年。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
ECHA(歐洲化學品管理局)正式對外公告,稱其在卷宗評估階段可能會考慮註冊人的噸位變化,也就是說在合理的條件下,註冊人在收到卷宗評估草案(draft decision)後可嘗試通過下調噸位來規避一些高噸位的資料增補要求。
Thumbnail
2022年6月22日, 歐洲化學品管理局(ECHA)委員會宣佈,已選定Sharon McGuinness博士為下一任歐洲化學品管理局局長。作為任命程式的一部分,Sharon McGuinness博士暫定於7月4日將在歐洲議會上發表聲明。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
React Hooks 是 React 16.8 中引入的一組新的 API,允許你在函數組件中使用狀態和其他 React 特性,而不需要寫類組件。 狀態管理: useState 鉤子允許在函數組件中添加狀態。 副作用管理: useEffect 鉤子允許處理副作用,如數據獲取、訂閱和手動 DO
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
07. React useContext Hook (User Context Example) || Learn React Through Mini Projects
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
歐盟委員會(ECHA)於2021年和2022年修訂了REACH下化學品註冊的部分資訊要求。自2023年5月1日起,ECHA將開始根據修訂後的要求檢查每一份新註冊和現有註冊的更新。
Thumbnail
2022年11月29日,英國官方公開了“UK-REACH緩衝期延長”公眾諮詢的結果:根據公眾諮詢的結果,經蘇格蘭和威爾士政府同意,英國環境、食品和鄉村事務部(Defra)將提出二級立法,將UK-REACH註冊提交截止日期延長3年。
Thumbnail
Zustand是什麼?React前端狀態管理 分別講解狀態管理以及Zustand 是什麼?接續下來講解Zustand用法以及Context以及Redux的比較。
Thumbnail
ECHA(歐洲化學品管理局)正式對外公告,稱其在卷宗評估階段可能會考慮註冊人的噸位變化,也就是說在合理的條件下,註冊人在收到卷宗評估草案(draft decision)後可嘗試通過下調噸位來規避一些高噸位的資料增補要求。
Thumbnail
2022年6月22日, 歐洲化學品管理局(ECHA)委員會宣佈,已選定Sharon McGuinness博士為下一任歐洲化學品管理局局長。作為任命程式的一部分,Sharon McGuinness博士暫定於7月4日將在歐洲議會上發表聲明。