iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

進階前端網頁設計-初心者的30天React學習及應用系列 第 3

[DAY03]設定以及安裝基本環境(下半部)

  • 分享至 

  • xImage
  •  

來到第三天了,今天也是延續昨天所介紹的,因為有點複雜所以分成兩天來介紹,相比於昨天所介紹到的,我覺得今天的更為複雜,繼續看下去吧!

React安裝

安裝react的方式不僅僅只有一種,我也上網看過很多有關如何安裝react的文章,其中,react的官網(https://reactjs.org/docs/getting-started.html#versioned-documentation) 有介紹到,但我最後還是選比較熟悉且有步驟的教程,來介紹給大家。

開始安裝

首先,打開終端機或按下windows+R開啟cmd,接著輸入
npm install -g create-react-app
上面這串指令是2016年7月時Facebook發佈的一串可以快速建立react樣本文件的工具,安裝這個工具程式之後,在任何資料夾都可以使用
https://ithelp.ithome.com.tw/upload/images/20220914/20152220OOgnYYUXrW.png
接著,建立一個應用程式所存放的資料夾,移動到創建好的資料夾之後(使用cd指令),輸入
create-react-app helloworld
註:helloworld可以是任何你想要取的名字,這裡helloworld只是一個範例。
https://ithelp.ithome.com.tw/upload/images/20220914/20152220GrlXCPLUag.png

接著,把creat好的專案移動到資料夾內(cd 你的helloworld),因為我們要準備啟動了,
輸入
npm start
註:如果沒有移動到資料夾的話,就會發生以下問題https://ithelp.ithome.com.tw/upload/images/20220914/20152220YnFeHfrUZn.png

會顯示很多錯誤訊息,這時候就只需要移動到helloworld(你創建的專案名),就可以解決跑出許多錯誤碼的問題
https://ithelp.ithome.com.tw/upload/images/20220914/20152220Z28K9Cj3Ae.png

https://ithelp.ithome.com.tw/upload/images/20220914/201522200qeXkNorfG.png

啟動之後的畫面如下,出現這個畫面就代表你成功了
https://ithelp.ithome.com.tw/upload/images/20220914/20152220bEsCjx3wyH.png

最後,打開VScode,開啟剛剛創建的資料夾就可以看到這些東西
https://ithelp.ithome.com.tw/upload/images/20220914/2015222070j7XZthxq.png

參考文章
https://eyesofkids.gitbooks.io/react-basic-zh-tw/content/day14_react_env/


上一篇
[DAY02]設定以及安裝基本環境(上半部)
下一篇
[DAY04]甚麼是React Component?
系列文
進階前端網頁設計-初心者的30天React學習及應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言