React+webpack+es6的环境配置及demo改写

前端之家收集整理的这篇文章主要介绍了React+webpack+es6的环境配置及demo改写前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

项目地址:jrainlau/react-es6

  1. git clone https://github.com/jrainlau/react-learning
  2. cd react-learning && npm install
  3. npm run dev
  4.  
  5. 然后浏览器打开localhost:8080即可

最近在家闲得无聊,所以打算折腾一下react。在此之前,我是一个vue的重度使用用户,但是看到react确实非常火爆,所以也就趁此机会去了解一下react,增长一下见识。

学习react的参考资料,很大一部分来自 @阮一峰 的React入门实例教程。但是阮大神是用传统的script标签以及es5的写法,所以我针对教程,通过配置webpack,最终使用es6的写法来改写教程的demo,结合组件化的思想,完成最终的demo的改写。

环境配置

环境配置参照了@minooo文章webpack-es6-react (为系统学习React布一个良好的开局)。这里引用一些关键包的说明:

package.json 中的 包/库 部分说明

  • babel-core babel6 的基础模块

  • babel-eslint ESLint 是前端JS代码检测利器。而 babel-eslint 则允许你检测所有的 Babel 代码

  • babel-loader 这个包允许你使用 Babel 和 webpack 转译(Transpiling) JavaScript 文件

  • babel-plugin-react-transform 这个插件通过任意转换的方式去封装 React 组件。换句话说,你可以随心所欲的摆弄你的组件了。

  • babel-plugin-transform-runtime 在 Babel 转换过程中,详细的展示引用的相关辅助工具和内置命令,并自动的聚合填充你的代码而不会污染全局。

  • babel-preset-es2015 此预设包含了所有的 es2015 插件

  • babel-preset-react 此预设包含了所有的 React 插件

  • babel-preset-stage-0 此预设包含了 stage 0 中的所有插件

  • eslint JavaScript 语法检测利器:分析出你代码潜在的错误和非标准用法

  • eslint-plugin-react ESLint 中关于 React 语法检测的插件

  • react-transform-hmr 一个 React 转换装置,该装置通过引用 Hot Module Replacement API 使热重载 React 的类成为可能。

  • react-transform-catch-errors 呈现你 React 组件的错误信息。

  • webpack-dev-server 为 wepack app 提供一个服务器,如果你的代码有任何变化,浏览器将自动刷新显示,极大的方便前期开发。

  • babel-runtime Babel 自带的运行环境。

另外,我增加style-loadercss-loaderlessless-loader这四个包用于加载.less文件模块。(注意,less-loaderless必须同时存在才能正常工作。)

根目录下文件部分说明

  • .babelrc : 什么是 .babelrc 文件呢?熟悉 linux 的同学一定知道,rc 结尾的文件通常代表运行时自动加载的文件,配置等。同样在这里也是有同样作用的。里面的 env 字段,可以对 BABEL_ENV 或 NODE_ENV 指定不同的环境变量,进行不同编译。

  • eslintignore 通知 eslint 忽略那些不应该被检测的文件

  • eslintrc eslint 配置文件,使 JavaScript 代码规范化,标准化书写。

使用es6改写demo

首先可以参考这篇文章React on ES6+,里面提及了关于如何使用es6进行react开发的方法

使用React.Component代替React.createClass

  1. // The ES5 way
  2. var Photo = React.createClass({
  3. handleDoubleTap: function(e) { },render: function() { },});
  4.  
  5. // The ES6+ way
  6. class Photo extends React.Component {
  7. handleDoubleTap(e) { }
  8. render() { }
  9. }

使用static关键字完成属性初始化工作(这是es7的内容,注意state可以直接通过state = { key: value }来定义)

  1. // The ES5 way
  2. var Video = React.createClass({
  3. getDefaultProps: function() {
  4. return {
  5. autoPlay: false,maxLoops: 10,};
  6. },getInitialState: function() {
  7. return {
  8. loopsRemaining: this.props.maxLoops,propTypes: {
  9. autoPlay: React.PropTypes.bool.isrequired,maxLoops: React.PropTypes.number.isrequired,posterFrameSrc: React.PropTypes.string.isrequired,videoSrc: React.PropTypes.string.isrequired,},});
  10.  
  11. // The ES6+ way
  12. class Video extends React.Component {
  13. static defaultProps = {
  14. autoPlay: false,}
  15. static propTypes = {
  16. autoPlay: React.PropTypes.bool.isrequired,}
  17. state = {
  18. loopsRemaining: this.props.maxLoops,}
  19. }

constractor中定义state

  1. // The ES5 way
  2. var Video = React.createClass({
  3. getInitialState: function() {
  4. return {
  5. loopsRemaining: ...
  6. };
  7. }
  8. });
  9.  
  10. //The ES6 way
  11. class Video extends React.Component {
  12. constructor(props) {
  13. super(props)
  14. this.state = {
  15. loopsRemaining: ...
  16. }
  17. }
  18. }

组件化思路

通过es6的模块功能,可以很方便地利用webpack实现页面组件化。

我们总共有7个小的demo,我把它们作为不同的组件,最终加载到根组件中:

  1. // app.js
  2.  
  3. import React,{ Component } from 'react'
  4. import Component1 from './demo1.js'
  5. import Component2 from './demo2.js'
  6. import Component3 from './demo3.js'
  7. import Component4 from './demo4.js'
  8. import Component5 from './demo5.js'
  9. import Component6 from './demo6.js'
  10. import Component7 from './demo7.js'
  11.  
  12. export default class Demo extends Component {
  13. render() {
  14. return (
  15. <div>
  16. <Component1></Component1>
  17. <Component2></Component2>
  18. <Component3 title='Props example'></Component3>
  19. <Component4>
  20. <span>Hello</span>
  21. <span>React</span>
  22. </Component4>
  23. <Component5 content='This is the content'></Component5>
  24. <Component6></Component6>
  25. <Component7></Component7>
  26. </div>
  27. )
  28. }
  29. }

具体请进入我的项目查看代码

可以看到,通过es6的改写,在react中实现组件化是非常清晰简单的,只需要把需要的组件import进来即可。

另外,由于我非常讨厌行内样式,并且是不写less会死星人,所以并没有按照官方推荐的样子去定义一个style object,而是通过less-loader在需要定义样式的地方直接把样式require进来,像这样:

  1. // demo7.js
  2.  
  3. render() {
  4. let word = this.state.words
  5. require('../less/test.less')
  6. return (
  7. <div>
  8. <h3 className='test-h1'>DEMO 7,state</h3>
  9. <p>{ word }</p>
  10. <input type="text" onChange={ this.stateFn }/>
  11. <hr/>
  12. </div>
  13. )
  14. }

结语

这个demo仅仅作为入门学习使用,react更多深层次的内容可能会在后续慢慢更新,比如加上react-router,redux什么的……如果这篇文章能够对你有所启发是最好不过,如果有任何错漏也欢迎拍砖指出,谢谢大家~

猜你在找的React相关文章