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的应用