從零開始學習React-目錄結構，創建組件頁面（二）

2019 年 11 月 5 日
筆記

一：了解目錄結構

1：打開編輯器，導入上一節的創建的項目,開始查看目錄結構,manifest.json指定了開始頁面index.html，一切的開始都從這裡開始。

目錄解釋：

node_modules： 這裡面包含了react項目中會用到的一些組件 。  src：裡面包含了一些我們自己使用的js文件，css文件，img文件等等  manifest.json：清單配置文件，聲明了項目的名稱圖標以及入口  package.json: 包的清單文件，這裡面聲明的包會通過npm下載到node_modules中

2：先看一下app.js內容

import React from 'react';  import logo from './logo.svg';  import './App.css';    function App() {    return (      <div className="App">        <header className="App-header">          <img src={logo} className="App-logo" alt="logo" />          <p>           祈澈菇涼          </p>          <a            className="App-link"            href="https://www.jianshu.com/u/05f416aefbe1"            target="_blank"            rel="noopener noreferrer"          >                <h2>歡迎來到王小婷的第一個項目教程</h2>          </a>        </header>      </div>    );  }    export default App;

可以看到，修改一下App.js中的文字，會發現瀏覽器會立即作出響應

3：關於目錄整合由於初始化裡面src的資源目錄比較亂，我不太喜歡，所以按照自己的編程習慣，新建兩個文件，用於存放組件components和靜態資源asset，便於管理，更加清晰。

改動之後也需要再修改一下app.js裡面的相應的引入路徑，以免報錯。

import React from 'react';  import logo from './asset/images/logo.svg';  import './asset/css/App.css';

二：新建一個組件

先看一下app.js根組件裡面的內容,使用的是render模板，即jsx語法。寫項目的時候，所有的子組件都掛在在根組件上，我們要做的頁面和項目程式碼最好全部都寫在子組件裡面，根組件最好少些，越簡單越好。

1：首先在我們的components文件夾裡面新建一個Home.js組件，注意：組件名稱首字母記得大寫。

2：開始寫組件程式碼Home.js 首先要引入react以及react下面的Compoent，引進以後要開始創建組件，使用class Home extends Component{}，完成以後,寫個render(){}模板，裡面程式碼即為jsx語法寫的頁面具體html內容了。程式碼寫好哦之後,要通過export default Home，把寫好的組件暴露出來，因為暴露出來之後就可以在其他組件裡面引入我們已經寫好的Home組件啦。

Home.js

import React, { Component } from 'react';    class Home extends Component {        render() {          return <div> 你好,react的第一個組件頁面</div>      }  }    export default Home;

3:在根組件app.js裡面引入Home 打開app.js文件，首先引入import Home from './components/Home'，引入之後，需要把組件掛在根裡面，寫成單標籤<Home/>或者雙標籤<Home></Home>，表示掛載在上面。

app.js

import React from 'react';  import logo from './asset/images/logo.svg';  import './asset/css/App.css';  //引入home組件  import Home from './components/Home'    function App() {      return(          <div className="App">        <header className="App-header">         <img src={logo} className="App-logo" alt="logo" />        </header>          <Home/>      </div>        );  }  export default App;

看一下效果，新建組件內容以及可以展示了。

三：關於JSX語法

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展，,語法注意：有多行程式碼的時候，React組件裡面的所有節點都需要被根節點包含起來。

1：語法優點：

JSX 執行更快，因為它在編譯為 JavaScript 程式碼後進行了優化。  它是類型安全的，在編譯過程中就能發現錯誤。  使用 JSX 編寫模板更加簡單快速。

2：定義和綁定react數據

在構造函數裡面定義數據

構造函數裡面必須寫一句程式碼，super();表示繼承Component，寫完之後開始在構造函數裡面定義數據，定義的數據放在this.state裡面。

擴展：關於es6中super關鍵字的理解： super不僅僅是一個關鍵字，還可以作為函數和對象。Es6中的super可以用在類的繼承中，super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法，否則新建實例會報錯，這是因為子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工，如果不調用super方法，子類就得不到this對象。

綁定數據

數據定義完成之後需要在底下的模板裡面使用，該怎麼使用數據？比如說在模板的<p>標籤裡面綁定數據，用this.state.name來獲取數據，以此類推。

<p>{this.state.name}</p>

Home.js

import React, { Component } from 'react';  class Home extends Component {      constructor(){          super();          //react定義數據          this.state={              name:"我是王小婷啊",              age:'23',              joy:{                  web:"前端開發"              }            }      }      render() {          return (          <div>          <p>{this.state.name}</p>          <p>{this.state.age}</p>          <p>{this.state.joy.web}</p>          </div>          )      }  }  export default Home;

ok，學會了React-目錄結構，創建組件頁面以及JSX的基本語法了。