Initializing the NPM project
npm init --yesInstall React.
npm install react react-domInstall webpack.
npm install -D webpack webpack-dev-server webpack-climkdir -p public
touch public/index.htmlCreate an index.html file.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>Add a NPM start script.
cat package.json | jq .scripts{
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
}
Install babel.
npm install -D @babel/core @babel/preset-reactConfigure webpack to use babel.
cat webpack.config.jsconst path = require('path');
const config = {
entry: ['./src/index.js'],
module: {
rules: [
{
test: /\.jsx?/,
loaders: ['babel-loader'],
exclude: /node_modules/,
},
],
},
};
module.exports = config;
Install the babel-loader webpack plugin.
npm install -D babel-loaderAdd babel configuration to package.json.
cat package.json | jq .babel{
"presets": [
"@babel/preset-react"
]
}
Load the index.html page.
npm install -D html-webpack-pluginAdd the plugin to the webpack.config.js file.
{
//...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
]
}Handle CSS with post-css.
npm install -D \
style-loader \
css-loader \
precss \
postcss-loaderAdd a rule in webpack.config.js for handling CSS files.
node -p "
require('./webpack.config.js')
.module
.rules
.find((r) => r.test.exec('is.css'))
"{ test: /\.css$/,
use:
[ 'style-loader',
{ loader: 'css-loader', options: [Object] },
'postcss-loader' ] }
And setup postcss in package.json.
cat package.json | jq .postcss{
"map": false,
"plugins": {
"postcss-import": {},
"postcss-preset-env": {
"stage": 3
}
}
}
Now we install the postcss plugins.
npm install -D postcss-import postcss-preset-envNow we setup a eslint configuration.
npm install -D eslintcat .eslintrc.json{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
And prettier.
npm install -D prettiercat .prettierrc{
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "es5",
"semi": true,
"arrowParens": "always"
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent