演示地址 ReactNews
项目主页 Github-react_news_site
一个基于 React + webpack + es6 + Babel + ant-design 的新闻站点
写在前面觉得好的同学可以给个 star,万分感谢~ (✪ω✪)
此项目是根据慕课网教程仿制的,通过此项目也确实学到了很多东西,现在分享出来,也算是我的一个学习总结,完整的视频教程链接
之前自学过前端自动化工具和 angular,但一直没有搭建过一个完整的项目,于是这次认真的做了个基于 react 新闻网站,自动化工具采用 webpack,由于使用了 es6 的语法,需要用到 Babel,Babel 是一个广泛使用的转码器,可以将 ES6 代码转为 ES5 代码。
效果图移动端 预览:
适配了移动端,pc 端直接打开上面的链接
可直接扫码打开网页:
运行项目安装依赖
javascript 代码
- npm install
进入开发模式
javascript 代码
- npm run dev
- // or
- webpack - dev - server--inline--hot
- // 之后打开 localhost:8080 查看
如果还没安装 node 的同学,可把 index.html 里的 script 改成下面的形式,然后直接打开 index.html 即可
webpack 配置webpack 配置文件:webpack.config.js
webpack 是一款模块加载器兼打包 工具,它能把各种资源,例如 JS(含 JSX)、coffee、样式(含 less/sass)、图片等都作为模块来使用和处理。 react 的组件功能很好用,在一个项目中,有些组件可能由不同的人所开发,所以时常需要引入其他的脚本文件,虽然可以用命名空间的办法来解决,但最后在 html 页面中通过 script 标签引入各类组件和文件时,还是会显着异常混乱,各模块之间的依赖,先后加载顺序都得人为控制,会极大的降低开发效率,而且项目中用到了 es6 的语法,需要用到 babel 来进行 es6 的转化,所以选择了 webpack 来进行前端自动化的管理
javascript 代码效果预览
- module.exports = {
- entry: __dirname + '/src/js/root.js',
- output: {
- path: __dirname + '/src/',
- filename: 'bundle.js'
- },
- module: {
- loaders: [{
- test: /\.js?$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- query: {
- presets: ['react', 'es2015 '],
- //设定babel的转码规则
- "plugins": [["import", {
- libraryName: "antd",
- "style": "CSS"
- }] // `style: true` 会加载 less 文件
- ]
- }
- },
- {
- test: /\.css$/,
- loader: 'style!css-loader'
- }]
- }
- }
当运行 webpack 命令时会自动把文件打包在./src 目录下
ANT DESIGN一个 UI 设计框架,采用 React 封装的一套 Ant Design 的组件库,比较好用,可快速构建一个样式丰富的站点 antd 的组件使用十分方便,官方文档也比较详细
javascript 代码
- import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- import {
- DatePicker
- }
- from 'antd';
- ReactDOM.render( < DatePicker / >, mountNode); //也可传入参数
如果只需要用到其中的几个组件,则引入全部 antd 的样式则会显得多余,官方文档推荐了一个 package: babel-plugin-import,配置使用后只需引入组件就行,不用理会样式,babel-plugin-import 会自动按需加载需要的样式,而忽略那些多余的样式
javascript 代码React + Es6
- // babel-plugin-import 会帮助你加载 JS 和 CSS
- import {
- DatePicker
- }
- from 'antd';
用 es6 的语法写 react 组件会有一些不同,比如。。
组件的定义es5 语法:javascript 代码es6 语法:javascript 代码
- var Component = React.createClass({
- render: function() {
- return <h1>Hello World</h1>;
- }
- });
定义组件的 state 属性es5 语法:javascript 代码
- class Component extends React.Component {
- render() {
- return (
- <h1>Hello World</h1>
- );
- }
- };
es6 语法:javascript 代码
- var Component = React.createClass({
- getInitialState: function() {
- return {
- text: 'World'
- };
- },
- render: function() {
- return < h1 > Hello {
- this.state.text
- } < /h1>;
- }
- });/
组件事件处理函数的 this 差异es5 语法:javascript 代码
- class Component extends React.Component {
- constructor() {
- super(); //子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
- this.state = {
- text: 'World'
- };
- }
- render() {
- return ( < h1 > Hello {
- this.state.text
- } < /h1>
- );
- }
- };/
- var Component = React.createClass({
- getInitialState: function() {
- return {
- text: 'World'
- };
- },
- handleClick: function() {
- this.setState({
- text: 'React'
- });
- },
- render: function() {
- return < h1 onClick = {
- this.handleClick
- } > Hello {
- this.state.text
- } < /h1>;
- }
- });/
用 es5 写法时,在事件处理函数 handleClick 中,this 指向的是组件本身,所以 this 有 setState 方法。
es6 语法:javascript 代码
- class Component extends React.Component {
- constructor() {
- super(); //子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
- this.state = {
- text: 'World'
- };
- }
- handleClick() {
- this.setState({
- text: 'React'
- });
- }
- render() {
- return ( < h1 onClick = {
- this.handleClick.bind(this)
- } > Hello {
- this.state.text
- } < /h1>
- );
- }
- };/
使用 es6 语法时,如果绑定事件时直接用
来源: http://www.w3cfuns.com/notes/33406/84a89f0fa36988dc1567ded57aa19bb3.html