Have you ever met a problem with vertical centering? Have you ever heard of flex flexible layouts? Never heard of it. Find out more about flex layouts and see how powerful flex layouts are!!! Still worried Flexbox layout is not compatible with the latest browser? Click the compatible ie9+, ucbroswer flexlayout for compatibility flexlayout react components.
Recently in the development of learning amazeui-react, found that react is really a good thing, but the egg pain is webpack this thing is very difficult to configure, a little attention will lead to automatic compilation failure, there will be a bunch of problems, please follow me from the zero start learning react+ Webpack configuration, and how to use them well in webstorm.
1, download Webstorm11 and Nodejs.
Download too slow? Direct Baidu Cloud Packaging share it ~~windows mac OSX
Because my computer's MacBook is not windows, there may be slightly different installation and operation procedures, but the difference is not big, the following operation is basically generic, not generic I will specify. Or you can leave a message below.
set registry https://registry.npm.taobao.org
installation results will show some warn, ignore! But don't make any error.sudo npm install webpack webpack-dev-server babel -g sudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev
Parameter explanation:
-G: Allows the package to be used globally
--save-dev: Writes dependency information to the Package.json devdependencies.
Each component of the installation is interpreted as:
Babel: Can parse the ES6 syntax into ES5 (what is es??). ecmascript*6* introduction himself, JS is a subset of it, White is the latest JavaScript syntax), used to use Jsx-loader to parse, and now directly with the Babel replacement on the line.
Babel-preset-es2015 and Babel-preset-react: Let Babel support the two preset values for es2015 syntax and JSX syntax.
Webpack: Does this still mean anything?
React-dom: Depending on react, it is now rendered through the Reactdom.render () method instead of React.render (), as Facebook officials have said.
Webpack-dev-server:webpack Development Server to help developers monitor Webpack project file changes and reflect them to the browser in real time. So you can preview it in real time ~
Babel-loader css-loader babel-loader style-loader url-loader file-loader: Several types of webpack need to use the loader, convenient to parse CSS, ES6/JSX, and other static files.
Tips:
The global installation supports the command to enable the installation package directly on the command line, for example: If you install Webpack, then the command line input Webpack will appear the corresponding execution, but non-global does not support the use of this command OH.
var webpack=require(‘webpack‘); var commonsPlugin=new webpack.optimize.CommonsChunkPlugin(‘common.js‘); module.exports={
entry:{index:‘./src/js/entry.js‘},
output:{
path:‘dist‘,
filename:‘bundle.js‘
}, module:{
loaders:[
{
test:/\.css$/,
loader:‘style-loader!css-loader‘
},
{
test:/\.jsx?$/,
loader:‘babel‘,
exclude: /node_modules/,
query:{
presets:[‘es2015‘,‘react‘]
}
},
{
test:/\.(png|jpg)$/,
loader:‘url-loader?limit=8192‘
},
{
test:/\.less$/,
loader:‘style-loader!css-loader!less-loader‘
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
],
plugins:[
commonsPlugin
]
},
resolve:{
root:‘‘,
extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],
alias:{
AppStore:‘js/stores/AppStores.js‘
}
}
}
Then create a src folder in the current project directory, create a JS folder in Src, a new entry.js file in the JS folder, the file content is as follows: Next, create a new Dist folder in the current project directory, and create a new index.html file in the Dist folder. The contents are as follows:var React=require(‘react‘); var ReactDOM=require(‘react-dom‘); ReactDOM.render(<div>Hello world!</div>, document.getElementById("test"));
One last step, one last step.~ ~ Join the Package.json file to make it a project that can be executed with the NPM command.<html> <meta charset="utf-8"> <title>React webpack test</title> </head> <body> <div id="test"></div> </div> <script type="text/javascript" src="./bundle.js" charset="utf-8"></script> </body> </html>
{
"name": "react_webpack_test",
"version": "1.0.0",
"description": "just webpack and react hello world project!",
"scripts": {
"build": "webpack --progress --profile --colors",
"watch": "webpack-dev-server --port 63340 --content-base ./dist/",
"test": "echo \"Error: no test specified\" && exit 1"
}
The most important of these is the script tag.Then, in your terminal, you'll see the following.npm run build
If there's a red error inside, then you have some problems with the project configuration, if OK, open the browser and run your dist/index.html file inside to see if there is: Hello world! Output> [email protected]1.0.0 build /Users/你的工程所在目录/react_webpack_test > webpack \--progress \--profile \--color 2m0ms op1ms optimiz12ms emit Hash: 292766b53fb3969afd55 Version: webpack 1.12.14 Time: 5109ms Asset Size Chunks Chunk Names bundle.js 676 kB 0 [emitted] index \+ 159 hidden modules
Http://localhost:63340/webpack-dev-server/ Omit this part... Webpack: bundle is now VALID.Input: http://localhost:63340/webpack-dev-server/, you should be able to see the results you want, the results are as follows:
Drink a cup of tea ~
...
By the way, you can say that your project is done, and if you want to use the Amazeui-react component like I do, keep going with me.
install amazeui amazeui-react --save-dev
Var React=require(‘react‘);
Var ReactDOM=require(‘react-dom‘);
Var AMUI=require(‘amazeui/dist/css/amazeui.min.css‘);
Var AMUIReact = require(‘amazeui-react‘);
Var button=(
<AMUIReact.Button> This is a button </AMUIReact.Button>
);
ReactDOM.render(button,document.getElementById("test"));
Here is my test project link, download it yourself and take it.
React_webpack_test
Full ligatures Belt Test toss me an afternoon, in order to ensure that every place write no omission, I now unload my computer on the Webstorm and nodejs~~
If you feel that my article is useful to you, please feel free to make a reward. Your support will encourage me to continue to create!
_yuchen earthquake
Excuse me, why webpack. Config. JS without require (' path ')
And please ask the package. What is the function of/.dist/in the watch in JSON??????
Small yellow man: @_yuchen, webpack.config.js inside used to require, the beginning of this sentence, Var webpack=require (' Webpack '); all Nodejs dependencies if you need to reference an external class, The Require is unavoidable. Watch in the./dist/refers to the Webpack-dev-server listening directory, has been listening to the current Location Dist directory, can be guaranteed when the Dist directory file changes in real-time from the browser can be refreshed, Specific Webpack-dev-server usage Please check http://webpack.github.io/docs/webpack-dev-server.html, he is not necessary for webpack, just to assist the development of real-time view of the preview effect.
_yuchen earthquake: @ Small yellow man warrior good thank Bo Master answer ~ ~ There are also wooden amazeui+react+webpack project, hope to be like Bo Master study
_yuchen: Can you tell me how to write the modal frame of the next amuireact?
>var modal = <amuireact.modal title= "Amaze UI modal" > This one modal window. </AMUIReact.Modal>;
Module.exports =react.createclass ({
Render:function () {
Return (
<amuireact.modaltrigger modal={modal}>
<amuireact.button amstyle= ' primary ' > Open Modal window </AMUIReact.Button>
</AMUIReact.ModalTrigger>
);
}
});
This can only show buttons, no modal frame 0 0
Hstonel
Learn, thank you
Neon Court
@ Small yellow people heroes bo, I am back-end to the front end, I used to be IntelliJ idea, and then I saw some of the front-end tutorials, a lot of automation things yeomen,grunt, but also webpack and so on, but I think IntelliJ Does idea or webstorm seem to replace them? I have been very puzzled, please bo master to help answer.
Also want Bo Master writes the article I very much like, convenient leave a contact way QQ or mailbox?
Small yellow man: @ Neon Pavilion can not be said to replace, just like Nodejs can not be expected to completely replace Java, PHP, we must know that these technologies are good at the field, only need to take its director. And I think you might be talking about these development tools instead of the development tools you used? Development tools are always towards more intelligent, powerful and convenient development, learning more new things will continue to improve their development efficiency ~
708d0f26b105
Webstorm is automatically saved but auto-save that react auto-refresh can't be used
Small Huang Man: @708d0f26b105 You can turn off the auto-save function, set the Ctrl+s shortcut to save manually.
Small yellow man: @708d0f26b105 I this seems to have been wrong, react automatic refresh is the use of webpack-dev-server to test ~
AAFFF584FEC2: Set to Manual save, then the command line input NPM Run watch can only be detected once, the interface will not work after the switch
Jyoung
Specifically registered an account to thank for a while, the morning did not understand the configuration, fortunately the group of people recommend to check this article ~ now can be happy with the code ~
Small yellow man: @JYoung hehe, do not hesitate, your sincerity has been received, enjoy webpack and react to bring you the fun ~
Albertbreeze
The generated bundle.js file has more than 700 KB size, is there a way to compress it?
Small Huang Man: @AlbertBreeze about compression please go to Webpack official website to see the Code spliting section.
Vargent
According to your this configuration, or not configured successfully, can not find webpack himself novice
The small Huang Man warrior: @vargent Webpack did not install the success
Small yellow Warrior: @vargent Use global installation NPM install-g Webpack
Chozo
Error:cannot Find module ' webpack '
What's the situation?
Failed at the [email protected] Build script ' Webpack--progress--profile--colors '. and this.
I'm a Mac, too.
Little Yellow Warrior: @Chozo You do not have Webpack installed, use global command: NPM install webpack webpack-dev-server-g--save-dev installation Once
Autumn Night is cold
This is used to sucks, happy Singles Day!! Visible the author is a great God, write very good!??
The Little Yellow Man Warrior: @ Autumn Night has been cold??
Post a comment after logging in
Environment for building react projects
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
