[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[33],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":16,"_31":32},"loginname","cjxmg","page",1,"limit",20,"total","id","26582","avatar_url","https://avatars3.githubusercontent.com/u/24851717?v=4","githubUsername","create_at","2017-01-08 03:55:32.162","score",10,"topic_count","reply_count","is_star",false,{"_20":34,"_35":21,"_36":37,"_38":39,"_40":41,"_42":43,"_44":32,"_45":32,"_30":46,"_47":48,"_25":49,"_50":51},"24520","author_id","tab","share","content","# React-news\r\n![react-logo.jpg](//static.cnodejs.org/Fljz_LZ8o3-uq65I3qDF7n_MHIuC)\r\n\r\n>一个基于 React + Webpack + es6 + Babel + ant-design 的新闻站点 \r\n\r\n项目主页 [Github-react_news_site](https://github.com/cjxmg/react_news_site)\r\n\r\n演示地址 [ReactNews](http://superxmg.website/project/react_news_site/)\r\n\r\n## 写在前面\r\n之前自学过前端自动化工具和angular，但一直没有搭建过一个完整的项目，于是这次认真的做了个基于react新闻网站，自动化工具采用webpack，由于使用了es6的语法，需要用到Babel，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。\r\n\r\n此项目是根据慕课网教程仿制的，通过此项目也确实学到了很多东西，现在分享出来，也算是我的一个学习总结，[完整的视频教程链接](http://pan.baidu.com/s/1nuVL3hJ)\r\n\r\n觉得好的同学可以给个 **star**，万分感谢~ (✪ω✪)\r\n\r\n## 效果图\r\n适配了移动端，pc端直接打开上面的链接\r\n\r\n移动端预览 | 直接扫码打开网页\r\n:-:|:-:\r\n![mobile_show.png](//static.cnodejs.org/FjIL-PTr3kNs2pWzbHmghW51wW73) |![qrcode.png](//static.cnodejs.org/Fmm9VGBYC04FhEsaZ6NRQA3Uq3Eh)\r\n\r\n## 运行项目\r\n\r\n**安装依赖** \r\n```shell\r\nnpm install\r\n```\r\n**进入开发模式**\r\n```shell\r\nnpm run dev\r\n// or\r\nwebpack-dev-server --inline --hot\r\n// 之后打开 localhost:8080 查看\r\n```\r\n如果还没安装node的同学，可把 index.html 里的 script 改成下面的形式，然后直接打开`index.html`即可\r\n![index.png](//static.cnodejs.org/FpUtf1oSUnAQc7VHuR-oBbPMggHc)\r\n\r\n\r\n## [webpack](http://webpack.github.io/docs/)配置\r\n\r\n> webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。\r\n\r\n react的组件功能很好用，在一个项目中，有些组件可能由不同的人所开发，所以时常需要引入其他的脚本文件，虽然可以用命名空间的办法来解决，但最后在html页面中通过script标签引入各类组件和文件时，还是会显着异常混乱，各模块之间的依赖，先后加载顺序都得人为控制，会极大的降低开发效率，而且项目中用到了es6的语法，需要用到babel来进行es6的转化，所以选择了webpack来进行前端自动化的管理\r\n\r\n webpack配置文件：webpack.config.js\r\n\r\n ```javascript\r\n module.exports = {\r\n entry: __dirname + '/src/js/root.js',\r\n output: {\r\n path: __dirname + '/src/',\r\n filename: 'bundle.js'\r\n },\r\n module: {\r\n loaders: [\r\n {\r\n test: /\\.js?$/,\r\n exclude: /node_modules/,\r\n loader: 'babel-loader',\r\n query: {\r\n presets: ['react', 'es2015 '], //设定babel的转码规则\r\n \"plugins\": [\r\n [\"import\", { libraryName: \"antd\", \"style\": \"css\" }] // `style: true` 会加载 less 文件\r\n ]\r\n }\r\n },\r\n {\r\n test: /\\.css$/,\r\n loader: 'style!css-loader'\r\n }\r\n ]\r\n }\r\n }\r\n ```\r\n当运行`webpack`命令时会自动把文件打包在./src目录下\r\n\r\n\r\n## [ANT DESIGN](https://ant.design/index-cn)\r\n\r\n![antd.png](//static.cnodejs.org/Ft-X-qFCl0D25JEldtyPOwHq8znK)\r\n\r\n> 一个 UI 设计框架，采用 React 封装的一套 Ant Design 的组件库，比较好用，可快速构建一个样式丰富的站点\r\n\r\nantd的组件使用十分方便，官方文档也比较详细\r\n```javascript\r\nimport 'antd/dist/antd.css'; // or 'antd/dist/antd.less'\r\nimport { DatePicker } from 'antd';\r\nReactDOM.render(, mountNode); //也可传入参数\r\n```\r\n如果只需要用到其中的几个组件，则引入全部antd的样式则会显得多余，官方文档推荐了一个package： `babel-plugin-import`，配置使用后只需引入组件就行，不用理会样式，`babel-plugin-import`会自动按需加载需要的样式，而忽略那些多余的样式\r\n```javascript\r\n// babel-plugin-import 会帮助你加载 JS 和 CSS\r\nimport { DatePicker } from 'antd';\r\n```\r\n## React + Es6\r\n> 用es6的语法写react组件会有一些不同，比如。。\r\n\r\n#### 组件的定义\r\n* es5语法：\r\n ```javascript\r\n var Component = React.createClass({\r\n render: function() {\r\n return

Hello World

;\r\n }\r\n });\r\n ```\r\n\r\n* es6语法：\r\n ```javascript\r\n class Component extends React.Component {\r\n render() {\r\n return (\r\n

Hello World

\r\n );\r\n }\r\n };\r\n ```\r\n\r\n#### 定义组件的state属性\r\n* es5语法：\r\n ```javascript\r\n var Component = React.createClass({\r\n getInitialState: function() {\r\n return {text: 'World'};\r\n },\r\n render: function() {\r\n return

Hello {this.state.text}

;\r\n }\r\n });\r\n ```\r\n* es6语法：\r\n ```javascript\r\n class Component extends React.Component {\r\n constructor() {\r\n super(); //子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。\r\n \tthis.state = {text: 'World'};\r\n }\r\n render() {\r\n return (\r\n

Hello {this.state.text}

\r\n );\r\n }\r\n };\r\n ```\r\n#### 组件事件处理函数的this差异\r\n* es5语法：\r\n ```javascript\r\n var Component = React.createClass({\r\n getInitialState: function() {\r\n return {text: 'World'};\r\n },\r\n handleClick: function() {\r\n this.setState({text: 'React'});\r\n },\r\n render: function() {\r\n return

Hello {this.state.text}

;\r\n }\r\n });\r\n ```\r\n 用es5写法时，在事件处理函数handleClick中，this指向的是组件本身，所以this有setState方法。\r\n\r\n* es6语法：\r\n ```javascript\r\n class Component extends React.Component {\r\n constructor() {\r\n super(); //子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。\r\n \tthis.state = {text: 'World'};\r\n }\r\n\r\n handleClick() {\r\n this.setState({text: 'React'});\r\n }\r\n\r\n render() {\r\n return (\r\n

Hello {this.state.text}

\r\n );\r\n }\r\n };\r\n ```\r\n 使用es6语法时，如果绑定事件时直接用`

`,则函数handleClick里的this为`null`,调用`this.setState`方法时会报错，所以需改为`

`,用当前组件对象替换之前的`null`，成为新的this\r\n\r\n\r\n\r\n## 一些相关链接\r\n* [HTML to JSX Compiler](http://magic.reactjs.net/htmltojsx.htm) ：可将html代码转换成jsx形式\r\n\r\n* [ANT DESIGN - 一个ui设计语言](https://ant.design/index-cn)\r\n\r\n* [React 中文文档](https://tianxiangbing.github.io/react-cn/docs/getting-started.html)\r\n\r\n* [webpack 2.2 中文文档](http://www.css88.com/doc/webpack2/)\r\n\r\n* [前端编码规范](https://giscafer.gitbooks.io/front-end-manual/content/) ：算是比较详细的，包含编码规范和优化等\r\n\r\n* [阮一峰的react入门](http://www.ruanyifeng.com/blog/2015/03/react.html) ：简单易懂，配套demo，适合初学者入门\r\n\r\n* [阮一峰的es6入门](http://es6.ruanyifeng.com/)\r\n\r\n* [入门Webpack，看这篇就够了](http://www.jianshu.com/p/42e11515c10f#) ：写的很不错，逐级深入，有点长，耐心看完\r\n\r\n## 后记\r\n总结了项目中遇到的一些问题和用到的东西，前端这条路还很长，我也会不断的学习更多新知识，如果有写的不对，不好的地方，虚心接受大家的指点~","title","用react + webpack + es6 做了个新闻网站，视频教程也无私奉献","last_reply_at","2017-04-23 02:15:43.603","good","top",3,"visit_count",9576,"2017-04-22 11:53:20.85","author",{"_13":14,"_22":23}]