React入門-8.create-react-app搭建項目框架

以前一直用VUE來進行項目開發。剛剛看了react的生態圈，真的是很厲害。單單腳手架就有傳統建立單頁面程序的create-react-app，有進行服務器端渲染的Next.js，還有快速建立網站的Gatsby。那就先從create-react-app開始提及。

1. 建立項目

create-react-app是react中最簡單的建立單頁面程序的方式。在使用它以前先保證你的機器上安裝了Node環境，而且Node >= 6 ，npm >= 5.2

# 全局安裝create-react-app
$ npm install -g create-react-app

# 或 臨時安裝create-react-app
$ npx create-react-app my-app

# 建立項目
create-react-app app02
cd my-app
npm start

這樣，一個react單頁面程序項目就建立好了。

2. 目錄結構

react目錄結構更加清晰一下，src是咱們編碼的主要目錄，這裏我把一些不是特別重要的數據刪除了，整理成以下

那麼比較關鍵代碼就是index.js與App.js了，其中，index.js爲入口文件，這裏導入了react,react-dom,App.js而且在root元素上開始渲染App

index.js

// 導入react react-dom
import React from 'react';
import ReactDOM from 'react-dom';
// 導入全局css
import './index.css';
// 導入根組件
import App from './App';
// 在root元素上渲染根組件
ReactDOM.render(<App />, document.getElementById('root'));

App.js爲一個組件，爲了建立組件，須要繼承建立類，而且繼承React.Component，組件中的寫法就與咱們以前的學到的沒什麼區別了。若是須要用的css樣式能夠提早引入。

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            hello world
          </p>
        </header>
      </div>
    );
  }
}

export default App;

3. 集成react-router

上面的代碼中僅僅能夠顯示出helloworld，要想完成單頁面程序的開發，須要在頁面中進行頁面局部刷新，加載各類子頁面。這就就離不開路由。

1) 列表項目

安裝react-router-dom

cnpm install react-router-dom --save

2) 定義路由頁面
List.js

import React,{Component} from 'react'

class List extends Component{
  render(){
    return (
      <h1>this is List</h1>
    )
  }
}

export default List;

3) 在App.js中引入，而且使用

import React, { Component } from 'react';
import { BrowserRouter as Router,Route ,Link} from 'react-router-dom'

import './App.css';
// 加載組件
import List from './List'
import About from './About'

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <h1>App</h1>
          <ul>
            <li><Link to="/list">List</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
          <hr/>
          <Route path="/list" component={List} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
}
export default App;

---

後面咱們會重點說到react-router的應用