React构建单页应用方法与实例

React作为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上我们可以学到许多其他前端框架所缺失的东西，也是其创新性所在的地方，比如虚拟DOM、JSX等。那么接下来我们就来学习一下这门框架是如何构建起一个单页应用的。

前言

首先在学习这门框架前，你需要对以下知识有所了解：

1. 原生JS基础

2. CSS基础

3. npm包管理基础

4. webpack构建项目基础

5. ES6规范

以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。
JS和CSS就不多说了，npm是目前最提倡也是占据主导地位的包管理工具，还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具，已经在前端打包工具中独占鳌头，和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容，但可以使用babel等转换器进行转换。

结合其他的一些主流前端框架，我个人认为构建单页应用有这样三个基本的东西：组件、路由、状态管理。那么接下来我就基于这三者来介绍React，当然其中会穿插一些额外的知识点。

组件

React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法，以下是一个例子：

// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'


// 主组件
class MyDemo extends React.Component {
    render() {
        return (
            <div className="box">
                <MyComponent />
            </div>
        )
    }
}

render((
    <MyDemo />
), document.getElementById('app'))


// component.js

// 子组件
import React from 'react'

export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <p>这是一个组件！</p>
            </div>
        )
    }
}


// main.css
.box {
    width: 100%
}

相比Vue.js框架，我个人认为React的组件编写方式还是没有Vue来的舒服，组件的css样式还是脱离在组件外部的，维护起来也不是很方便。