tags: iThome 鐵人賽 30天

水了6天的教學，今天終於要來個正式的了~

creact-react-app

建立一個新的React專案可以參考這裡

首先現在你要放專案的位置打開CMD並下指令

npx create-react-app my-app

下完後會產生名為my-app的資料夾，而這就是一個自動生成的react專案

如果你已經新增完資料夾了的話可以把my-app改成.，代表是現在這個資料夾

npx create-react-app .

創建完後的樣子 (用VS Code開啟)：

npm start

用VS Code開啟後可以按快捷鍵Ctrl+~打開terminal，並輸入npm start來啟動專案

npm start

啟動後看到下方這個頁面就代表你啟動成功了！

更改網頁資訊

找到src/App.js並在img這個tag下面新增

<p>
    我的第一個專案
</p>

儲存之後回到網頁的畫面就會發現多了剛剛打的文字了！

那至於為什麼會變動，是從哪裡開始變動的呢？我們就來看看入口 (Entry) 檔案是哪一個吧！

入口檔案 (index.js)

直接來破題一下了，entry point就是src/index.js，而因為在index.js裡有引用App.js，所以當App.js檔案發生變動時，整個專案也會偵測到有所改變而更新畫面。

後記

創建了第一個專案後就可以開始來製作我們的專案啦，明天將會開始學習如何建立Component與相關的知識囉！

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)