create react app 前端路由应用和部署

reactjs官方提供的create react app ，首先下载安装node.js 及npm，利用npm下载脚手架。

持久使用阿里的npm镜像命令：npm config set registry https://registry.npm.taobao.org

然后全局安装npm install -g create-react-app ，

在想安装react脚手架的指定目录下，输入命令create-react-app reactjs ，然后cd reactjs，生成的目录结构大概是：

reactjs/  
  README.md  
  node_modules/  
  package.json  
  .gitignore  
  public/  
    favicon.ico  
    index.html  
  src/  
    App.css  
    App.js  
    App.test.js  
    index.css  
    index.js  
    logo.svg  

可以用webstorm进行开发reactjs，然后利用npm start 就可以搭建开发的http服务器，访问http://localhost:3000，就可以看到如下界面：

   

然后在入口文件index.js 内编写简单的路由配置，

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import App02 from './App02'
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter as Router ,Route} from 'react-router-dom'//导入的方式跟之前有点变化
ReactDOM.render((
    <Router >
        <div>
            <Route path="/list" component={App02}/>
            <Route path="/lists" component={App}/>
        </div>
    </Router>
), document.getElementById('root'));
registerServiceWorker();

App组件代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

App02的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App02 extends Component {
    render() {
        return (
            <div className="App">
              helloworld!
            </div>
        );
    }
}

export default App02;

然后启动服务后看到地址栏的变化：

简单的路由demo就实现了，前端路由有两种实现方式，1种是hash模式
地址栏会带上"#"，一种是新的形式history模式，具体的实现原理可以去详细了解，create react app还可以实现webpack的打包形式，react用run script实现的，实际上就是将webpack集成在内，具体的实现可以再node_modules内找到webpack的依赖。用npm build 打包，react会进行最优处理，文件大小也会进行优化，将js和css单独打包出现，如下：

js和css还会带上hash值，生成的index.html 可以选择部署在apach http server，也可以选择ngnix，我个人比较倾向于选择ngnix，因为考虑到性能，并发等等原因，ngnix的性能已经在一定程度上略有超越Apache，但是如果考虑稳定或者部署方便，可以选择Apache，网上的教程素材比较多。

转载于:https://my.oschina.net/u/3744098/blog/1590066