Home > Developer > Web Develop
Recently has been learning react,react the basic part has been learned almost, but I did not do a detailed record, interested comrades can refer to Nanyi Teacher's tutorial, personally feel very good, the link is as follows: https://github.com/ruanyf/ React-babel-webpack-boilerplate,
After learning the foundation to want to Daoteng Daoteng, Webpack integration react plus es6.
1.webpack + react + es61.1 new projectThe project directory is as follows
The specific content will not explain, we should all understand
1.2 Configuring WebpackThe configuration file is as follows
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 features include jsx to Js,es6 es5,scss to CSS,
Here I use a built-in plugin for Webpack, which UglifyJsPlugin allows you to compress the generated files, which I commented out.
Then we'll give you the important code.
Index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <DivID= "App"></Div> <Scriptsrc= "./build/main.js"></Script></Body></HTML>
Foot.js
Import React from ' React '; export default class Foot extends React.component { Constructor (props) { Super (props ); } Render () { returnTest.js
Import React from ' React 'react-dom'./foot.js '; require ('./... /css/base.scss '); Reactdom.render ( <foot/>, document.getElementById ("app"));This is the simplest webpack plus react,test.js for the entry file
2. Frequently Asked QuestionsQuestion 1 uncaught typeerror:super expression must either is null or a function, not undefined
If you encounter this problem do not go to Baidu, first mercilessly beat their own, because you are the word is wrong, the problem arises 99.99 is because the word is wrong, anyway I was Component written compontent .
Issue 2 Warning:React.createElement:type should not is null, undefined, Boolean, or number. It should is 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 (fo R composite components) but got:undefined.
This problem, I also engaged for a long time, and finally the import {Foot} from './foot.js ' changed to import Foot from './foot.js ' It's settled, and I don't know why
Finally: I'm just a cute front end, there are problems to think together, we progress together
Webpack + react + es6, and attach yourself to some of the problems
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
