iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
Modern Web

Dear React 修煉之路系列 第 2

(D-2) Dear React 修煉之路:建立React專案

  • 分享至 

  • xImage
  •  

開始學習 React 之前,首先我們需要先成功建立一個 React 的專案
有別於 HTML、CSS、javaScript 可以在 VS Code 中直接撰寫

安裝Node.js

建立 React 專案之前,我們必須先安裝 Node.js
前一篇文章提到 React 是屬於JavaScript的函式庫
而 Node.js 則是一個能夠執行 JavaScript 的環境
Node.js 官網,選擇目前正在使用的系統來安裝相對應的版本
安裝完成之後,可以開始建立 React 專案啦 !

建立 React 專案

開啟 terminal(終端機) 輸入以下指令

cd Desktop //選擇要將新建立的 React 檔案存放在哪邊,這邊先存放在桌面
npx create-react-app dear-react // dear-react -> 專案名稱 

點擊Enter,等待 terminal 執行 creat-react-app

成功建立後會如下圖顯示

接下來要讓這個專案能夠在網頁上跑起來
我們接著在 terminal 繼續輸入以下指令

cd dear-react //輸入需要開啟的專案名稱
npm start

瀏覽器將會啟動 development server,在本地主機 localhost:3000 上
如果瀏覽器沒有自動開啟專案,我們也可以自行手動輸入 localhost:3000
也會是一樣的畫面呦~

成功在瀏覽器上跑起 localhost:3000 就代表建立成功啦~

以上是今天所學的內容,如果文章中有寫錯誤的部分,歡迎大大們給予指教/images/emoticon/emoticon33.gif

參考資料
React官方文件
Node.js官方文件


上一篇
(D-1) Dear React:從 0 → 1 跨出第一步
下一篇
(D-3) Dear React 修煉之路:認識JSX
系列文
Dear React 修煉之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言