React 腳手架

 

　　

React 腳手架，來讓咱們快速的搭建起來一個 React 的項目

　　1. 全局安裝 React 的腳手架

　　　　npm i -g create-react-app

　　2. 建立項目

　　　　create-react-app 項目名

　　3. 進行項目指令：

　　　　cd 項目名

　　4. 運行項目：

　　　　npm start 

　　這樣咱們 React 腳手架的項目搭建就完成了

　　接下來，讓咱們看看 React 腳手架，給咱們下載的目錄

　　

 

 　　如今咱們就來看看每一個文件的功能：

　　首先來看 README.md 文件，這裏是對咱們 React 腳手架的指令的一個介紹，尤爲要關注一個指令，npm run eject 

　　由於咱們的 React 腳手架的配置文件時隱藏的，咱們能夠經過 npm run eject 來讓隱藏的配置文件展示出來，而後咱們能夠加一些本身喜歡的配置

　　src 下面的目錄

　　　　App.css：是因此組件的樣式

　　　　index.css：是整個網頁的全局樣式

　　　　App.js：是最大的組件

　　　　index.js：出口文件

　　　　App.test.js：將 App 組件的內容渲染到頁面上來

　　在這裏，咱們的圖片地址，若是是經過相對路徑來獲取的都不能直接的在 src 屬性上面輸入，而是應該經過 import 來引入此圖片，以後經過 src={} 的方式，來引入，不然報錯

　　組件中須要引入的圖片，不能放在 public 中，而是應該放在 src 中，且相對組件的引入方式  （圖片引入的兩種狀況，一、相對組件，二、相對 index.html 中）

　　添加自組件的方法：

　　首先：咱們在 src 下面建立一個專門放一個子組件的文件夾

　　　　heads 文件夾裏面就是咱們的 Heads 的組件

　　　　

 

 　　　　heads.js 的寫法

　　　　

　　　　heads.css （則就是普通的 css 寫法）

　　　　

 

 　　而後咱們的組件將建立好了，接下來咱們就要在父組件中引入子組件了

　　　　

 　　render 函數中，return 返回的是模板，因此能夠帶 ()