最近一直在学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. kali 渗透的一些笔记

    kali实战笔记 17:55 2016/7/19 by: _Silvers kali系统安装后的配置及美化安装vmwareToolstar zxvf VMwareTools-sfsfsfasfasfs ...

  2. Android 回调接口是啥，回调机制详解(zhuan)

    回调函数http://blog.csdn.net/a78270528/article/details/46918601 Android框架 android frame work: http://blo ...

  3. SWFUpload

    引用:http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非 ...

  4. angularJS——自定义服务provider之$get

    可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改. 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改. ...

  5. Java数据结构之字符串模式匹配算法---Brute-Force算法

    模式匹配 在字符串匹配问题中,我们期待察看源串 " S串 " 中是否含有目标串 " 串T " (也叫模式串).其中 串S被称为主串,串T被称为子串. 1.如果在 ...

  6. Dynamics AX 2012 R2 AIF 内部异常 output session was auto-closes

    今天调用AIF出现异常,异常信息如下 This chanel can no longer be used to send message as the output session was auto- ...

  7. libtool: line 990: g++: command not found的解决

    yum -y install gcc+ gcc-c++

  8. Saltstack之multi-master

    一.实验环境: 1.salt版本: [root@master master]# salt --versions-report Salt: 2015.5.10 Python: 2.7.5 (defaul ...

  9. ISO学习中代码截图

    自定义插件 1.使用时的调用方法 导入头文件,创建对象,设置尺寸,传入数据: 2,内部方法的实现 XMGPageView.m XMGPageView.h XMGPageView.xib 注意点 自定义 ...

  10. maven国内镜像（maven下载慢的解决方法）

    Maven是当前流行的项目管理工具,但官方的库在国外经常连不上,连上也下载速度很慢.国内oschina的maven服务器很早之前就关了.今天发现阿里云的一个中央仓库,亲测可用. <mirror& ...