最近一直在学react,react的基础部分已经学得差不多了，然而自己并没有做详细的记录，有兴趣的同志可以参考阮一峰老师的教程，个人觉得挺不错的，链接如下：https://github.com/ruanyf/react-babel-webpack-boilerplate,

学完了基础就想倒腾倒腾，webpack整合react加es6。

1.webpack + react + es6

1.1 新建项目

项目目录如下

具体的内容就不解释了，大家应该都看得懂

1.2 配置webpack

配置文件如下

var path = require('path');

var webpack = require('webpack');

module.exports = {

    context: __dirname + "/",

    entry: ["./src/js/test.js"],

    output: {

        path: path.join(__dirname, './src/build'),

        filename: "main.js"

    },

    module: {

        loaders: [{

            test: /\.js$/,

            loader: 'babel',

            query: {

                presets: ['es2015', 'react']

            }

        }, {

            test: /\.scss$/,

            loader: 'style!css!sass',

        }]

    },

    // plugins: [

    //     new webpack.optimize.UglifyJsPlugin({

    //         compress: {

    //             warnings: false

    //         }

    //     })

    // ]

};

　　

module中功能包括jsx转js，es6装es5，scss转css，

这里使用到了 webpack 的一个内置插件 UglifyJsPlugin，通过他可以对生成的文件进行压缩，这里我注释掉了

1.3 上代码

接下来把重要的代码给大家

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script src="./build/main.js"></script>

</body>

</html>

foot.js

import React from 'react';

export default class Foot extends React.Component {

    constructor(props) {

        super(props);

    }

    render() {

        return <h1>Hello World</h1>;

    }

}

test.js

import React from 'react';

import ReactDOM from 'react-dom';

import Foot from './foot.js';

require('./../css/base.scss');

ReactDOM.render(

  <Foot />,

  document.getElementById("app")

);

这是最简单的webpack加react，test.js为入口文件

2.常见问题

问题1  Uncaught TypeError: Super expression must either be null or a function, not undefined

如果碰到这个问题不要去百度了，先狠狠的打自己一顿起，因为你是单词写错了，出现这个问题百分之99.99是因为单词写错了，反正我是把Component写成了Compontent

问题2  Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

　　　　

出现这个问题，我也搞了很久，最后把  import { Foot } from './foot.js'  改成了 import Foot from './foot.js' 就解决了，使用export default时，对应的import语句不需要使用大括号，不使用export default时，对应的import语句需要使用大括号。

最后: 我只是一个萌萌的前端，有问题一起思考，大家共同进步

webpack + react + es6, 并附上自己碰到的一些问题的更多相关文章

  1. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  2. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  3. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  4. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  5. webpack学习（六）—webpack+react+es6（第3篇）

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  6. webpack学习（六）—webpack+react+es6（第2篇）

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  7. webpack学习（五）—webpack+react+es6（第1篇）

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  8. webpack React+ES6

    webpack踩坑之路——构建基本的React+ES6项目   webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的 ...

  9. 一分钟搭建Webpack+react+es6框架

    最近react刷屏的厉害,而随着它一起走进我们视野的还有webpack,webpack只是个工具,为什么如此火呢?因为简单好了不废话.   直接进入正题: 打开命令行工具: npm install - ...

随机推荐

  1. 用花生壳实现内网映射，决解无域名、无公网IP、无服务器空间问题

    无域名.无公网IP.无服务器空间用花生壳提供的免费内网映射吧.你的PC就是服务器,花生壳提供的自定义二级域名轻松访问你的个人网站. 1.首先你得注册哦,然后申请免费的域名(2个) 2.设置路由器,下面 ...

  2. sql语句把字段中的某个字符去掉

    sql语句把字段中的某个字符去掉 )),'http://demo.m-school.net','') 例如: )),'http://192.168.2.180','') )),'http://zpzx ...

  3. Mysql数据库的使用总结之ERROR 1146 (42S02)

    在使用mysql数据库过程中,遇到了错误ERROR 1146 (42S02):Table doesn't exist,经过了两天,终于解决了这个问题.引起该错误的原因不同,对应的解决方法也不同.这里只 ...

  4. 转:django 接收页面form的post数组

    <input type="text" name="input[]"> <input type="text" name=&q ...

  5. [转]struts1.2的action参数配置

    转载地址:http://chenfeng0104.iteye.com/blog/796870 <struts-config>     <form-beans>         ...

  6. [课程设计]Scrum 3.7 多鱼点餐系统开发进度（留言板选择方案）

    Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...

  7. java反射类内容获取

    private void DtoReflect(Object obj, MqDto mqDto) throws Exception { Map map = getMap(mqDto); if(obj= ...

  8. Arduino学习经验(一)之解决舵机库和pwm输出冲突

    一.前言 最近在公司学习Arduino uno ,用它实现小车超声波避障功能.实现的功能很简单,就是在小车前方挂一个超声波模块,当碰到障碍物时,会通过舵机进行摆头,判断两边的距离,进行左右转弯.但是碰 ...

  9. 《利用python进行数据分析》读书笔记--第四章 numpy基础：数组和矢量计算

    http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...

  10. [DL学习笔记]从人工神经网络到卷积神经网络_2_卷积神经网络

    先一层一层的说卷积神经网络是啥: 1:卷积层,特征提取 我们输入这样一幅图片(28*28): 如果用传统神经网络,下一层的每个神经元将连接到输入图片的每一个像素上去,但是在卷积神经网络中,我们只把输入 ...