前端开发开源实例_react + Webpack + es6 仿新闻网站

前端开发开源实例|前端开发者

React-news

一个基于 React + Webpack + es6 + Babel + ant-design 的新闻站点

写在前面

之前自学过前端自动化工具和angular,但一直没有搭建过一个完整的项目,于是这次认真的做了个基于react新闻网站,自动化工具采用webpack,由于使用了es6的语法,需要用到Babel,Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码。

此项目是根据慕课网教程仿制的,通过此项目也确实学到了很多东西,现在分享出来,也算是我的一个学习总结,完整的视频教程链接

运行项目

安装依赖
javascript 代码

进入开发模式
javascript 代码

如果还没安装node的同学,可把 index.html 里的 script 改成下面的形式,然后直接打开index.html即可

webpack配置

webpack是一款模块加载器兼打包 工具,它能把各种资源,例如js(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
react的组件功能很好用,在一个项目中,有些组件可能由不同的人所开发,所以时常需要引入其他的脚本文件,虽然可以用命名空间的办法来解决,但最后在html页面中通过script标签引入各类组件和文件时,还是会显着异常混乱,各模块之间的依赖,先后加载顺序都得人为控制,会极大的降低开发效率,而且项目中用到了es6的语法,需要用到babel来进行es6的转化,所以选择了webpack来进行前端自动化的管理

webpack配置文件:webpack.config.js
javascript 代码

当运行webpack命令时会自动把文件打包在./src目录下

ANT DESIGN

一个 UI 设计框架,采用 React 封装的一套 Ant Design 的组件库,比较好用,可快速构建一个样式丰富的站点
antd的组件使用十分方便,官方文档也比较详细
javascript 代码

如果只需要用到其中的几个组件,则引入全部antd的样式则会显得多余,官方文档推荐了一个package: babel-plugin-import,配置使用后只需引入组件就行,不用理会样式,babel-plugin-import会自动按需加载需要的样式,而忽略那些多余的样式
javascript 代码

React + Es6

用es6的语法写react组件会有一些不同,比如。。

组件的定义

***es5语法*:**
**javascript 代码**

***es6语法*:**
**javascript 代码**

定义组件的state属性

***es5语法*:**
**javascript 代码**

***es6语法*:**
**javascript 代码**

组件事件处理函数的this差异

***es5语法*:**
**javascript 代码**

用es5写法时,在事件处理函数handleClick中,this指向的是组件本身,所以this有setState方法。
es6语法
javascript 代码

使用es6语法时,如果绑定事件时直接用<h1 onClick={this.handleClick}>,则函数handleClick里的this为null,调用this.setState方法时会报错,所以需改为<h1 onClick={this.handleClick.bind(this)}>,用当前组件对象替换之前的null,成为新的this

一些相关链接

[blockquote][ul]
[li]HTML to JSX Compiler:可将html代码转换成jsx形式[/li]
[li]ANT DESIGN – 一个ui设计语言[/li]
[li]React 中文文档[/li]
[li]webpack 2.2 中文文档[/li]
[li]前端编码规范 :算是比较详细的,包含编码规范和优化等[/li]
[li]阮一峰的react入门 :简单易懂,配套demo,适合初学者入门[/li]
[li]阮一峰的es6入门[/li]
[li]入门Webpack,看这篇就够了 :写的很不错,逐级深入,有点长,耐心看完[/li]
[/ul]
[/blockquote]

前端开发开源实例|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发开源实例_react + Webpack + es6 仿新闻网站》
» 本文链接地址:https://www.rokub.com/2919.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!