利用yarn实现一个webpack+react种子(2)

import React from 'react'; import { Link } from 'react-router' let Links = React.createClass({ render() { return( <div> <aside> <h4>Categories</h4> <ul role="nav"> <li><Link to="/start" activeStyle={{color:'#3498db'}}>Start</Link></li> <li><Link to="/how" activeStyle={{color:'#3498db'}}>How</Link></li> <li><Link to="/guide" activeStyle={{color:'#3498db'}}>Guide</Link></li> </ul> </aside> <div className="page main"> {this.props.children} </div> </div> ); } }); export default Links;

在Link 中我们可以指定具体的路由地址。

剩下的就是添加组件了，比如我们添加一个简单的start.js到components下面。

import React from 'react'; let Start = React.createClass({ render() { return( <div className="c-home"> <img alt="guide" src="https://img1.vued.vanthink.cn/vuedd144134a46129d7068d36025d64ba905.png" /> <h4>React+React-Router+Webpack+Yarn Seed</h4> </div> ); } }); export default Start;

其他的组件代码就不详细展示了。

这个时候我们输入yarn run build,我们可以看到build下会生成一个bundle.js 文件。 如果输入 yarn run start就可以看见页面了

本地输入 yarn start 然后访问 :9000 就可以看到自己写的内容了。

关于React-Router的更多配置，可以参考官方文档的教程。

四、发布

实际上我们有很多方法可以上线你的服务，但是非常好的一件事情是webpack 可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上，然后将index.html放到主机上，更新我们的脚本路径就可以了。