React腳手架create-react-app(環境搭建)

**

一、React的環境搭建(最簡潔式)

**

1.首先確保安裝了node和npm。

2.然後安裝一個腳手架(這裏我們使用create-react-app這個腳手架)
在這裏插入圖片描述
3.然後在自己需要的目錄下利用腳手架搭建最開始的環境
在這裏插入圖片描述
4.然後在環境目錄下運行npm start在這裏插入圖片描述,這是後我們發現自動打開了瀏覽器,並且地址是localhost:3000

在這裏插入圖片描述
而且這裏有一個初始頁面,這個頁面就是react寫好的一個歡迎頁面,我們用編輯器打開我們建立好的環境,
在這裏插入圖片描述
public文件夾下面是我們的輸出頁面也就是我們再瀏覽器顯示的頁面,在Index.html中有一個ID叫root的div,這就是我們最後要將寫好的內容掛載的DOM節點
在這裏插入圖片描述
而src文件夾下面就是我們寫的內容了,這裏sre下面有一個App.js文件就是剛纔我們再瀏覽器看到的內容了
在這裏插入圖片描述
4. 知道了這些我們就可以自己來寫一個簡單的頁面來試驗一下。新建一個文件叫new-app.js,那麼程序員對世界都是友好的,我們就寫一個程序員對世界的態度吧,Hello world。
在這裏插入圖片描述
先引進react依賴一下,再創建一個類NewApp繼承React.Component(注意這裏的類名首字母要大寫,不然應該是會報錯的)在render方法中可以直接return我們最後的內容寫好這些之後,最後我們再報這個組件導出。這就是react的jsx語法。

然後我們打開index.js先引進我們剛纔寫的組件
在這裏插入圖片描述
然後我們在ReactDOM.render中將原來的App組件改成我們自己寫的NewApp組件
在這裏插入圖片描述
最後的index是這樣的
在這裏插入圖片描述
這時候我們就能看到瀏覽器自己就刷新了

在這裏插入圖片描述
今天的分享就到這裏了,有什麼錯誤歡迎大家指出。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章