iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Software Development

30天學會React系列 第 3

Day3 Hello World + 基礎佈局分析

前言

記得學所有程式語言剛開始都是從Hello World開始的,所以我們的react也一定要從Hello World開始(固執),在開始寫Hello World前我想先帶你們了解前一篇下載的create-react-app到底都幫我們下載了什麼

create-react-app

https://ithelp.ithome.com.tw/upload/images/20210830/20129747QUdAhiag1i.png
打開專案後可以看到幾個資料夾,分別是:

node_modules

node_modules 是安裝node.js後,用來存放各種安裝包的地方,光想就很大包,所以有以下梗圖:
node

public

用來存放靜態資源

src

基本上是頁面所有內容,包含component, image, css..等

gitignore

裡面主要是放不想被commit上去的資料夾,或是可以說是想忽略的資料夾

package.json

用來記錄你下載了什麼套件的地方

README.md

用來給專案些一些文案的地方,通常會寫用到什麼技術,如果是套件,會做簡單的教學

yarn.lock

yarn.lock 會在每個安裝包被執行前校驗其完整性,並且正確執行它

基礎佈局分析

做任何事都會有規矩,所以當然寫react也有他的規矩,會有導入區、事件觸發區、畫面區(名稱是我自己取的,如果有更專業的名稱,歡迎告訴我)
image

請忽略我的手抖,謝謝你

導入區

主要是導入套件或是其他component,都會放在這個區域

事件觸發區

主要是去寫一些function

畫面區

這邊主要是放需要render到畫面的部分

Hello World

瞭解基本佈局後,是時候該寫點東西了,首先聰明你一定知道要寫在哪裡,導入區?不對啊,這邊沒有需要導入的套件啊!事件觸發區?也沒有東西要觸發啊,也沒有要寫function啊,哪只剩畫面區,沒錯,如果只需要render文字在畫面的話,就只需要在畫面區加入Hello World就好啦~~
https://ithelp.ithome.com.tw/upload/images/20210830/20129747PJTGKWYz6A.png

https://ithelp.ithome.com.tw/upload/images/20210830/20129747lYUnLiDfUm.png

總結:

今天說了create-react-app 幫我們設定好的部分,最重要的還是:src, package.json,這兩個基本上寫專案都會碰到,其他的相比之下就沒那麼常見,再來就是基本布局分析,要熟記,沒記錯的話跟Vue剛好相反,太久沒寫Vue了,不知道現在改回來了沒,一樣如果有問題都可留言,我都會回,那我們明天見


上一篇
Day2 基礎安裝 + 加碼:nvm
下一篇
Day4 Jsx
系列文
30天學會React8

尚未有邦友留言

立即登入留言