react
最近从 Android 回归到前端，我接触 React 应该是在 2015 年的是吧，当时 React 以虚拟 DOM 和单向数据流深深地吸引了我。也是他当时经验登场的秘密武器。
发现蚂蚁金服凭借自身的优势，估计对 React 深入研究和项目实现沉淀除了 umi 和 antd 这样框架，现在又有了 dva。这些工具和框架可以放开发者更轻松地，快速地开发出 web 应用。
今天我们看一看其底层实现，我们先开 umi 是基于 nextjs。那么就先从 nextjs 开始。
nextjs 好处是可以让我们在服务器端进行渲染 SSR ，而且轻松的进行代码分割。
npm init -y
npm install next react react-dom
这样我们就搭建起项目，然后
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
在项目目录下创建 pages 文件夹然后创建一个 index.js，在 pages 文件夹中文件默认为
export default ()=> <div><h1>hello next</h1></div>
运行npm run dev 就可以在浏览器中地址栏输入地址看到 hello next。
在 pages 的目录结构就是路由目录。
import Link from 'next/link';
可以将 Link 引入后，可以通过配置 href 属性来配置导航，
<ul>
<li><Link href="/"><a>Home</a></Link></li>
<li><Link href="/about"><a>about</a></Link></li>
</ul>
可以创建一个 components 文件夹后，然后可以创建 React 组件来使用，可以将上面的代码封装到 Navbar 组件。
import React, { Component } from 'react'
import Navbar from './Navbar';
import Head from 'next/head'
const Layout = (props) => (
<div>
<Head>
<title>zidea tuts</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></link>
</Head>
<Navbar/>
<div className="container">
{props.children}
</div>
</div>
)
export default Layout;
- Head 引入可以在 Head 标签内定义在 html 定义的内容，这里定义了 title 和 link 用于引用样式。
我们将 layout 作为一个组件我们页面内容都可以通过props.children传入到我们定义 layout 结构中，就像 html 的一些结构就可以在多个页面上实现共享。
react生态
