React configured to use with Webpack, Babel and ESLint
- Create a
package.jsonfile:
npm init
Or if you want to skip all the questions, add the -y flag:
npm init -y
- We need to install all the dependencies:
npm i react react-dom webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react eslint eslint-loader babel-eslint html-webpack-plugin html-loader -D
Explanation:
react- React libraryreact-dom- ReactDOM library to render Reactwebpack- module bundlerwebpack-cli- to use webpack in the command linewebpack-dev-server- development server@babel/core- transforms ES6 code into ES5babel-loader- Babel loader for webpack@babel/preset-env- for compiling Javascript ES6 code down to ES5@babel/preset-react- for compiling JSX and other stuff down to Javascripthtml-webpack-plugin- generates an HTML file with<script>injected, writes this todist/index.html, and minifies the filehtml-loader- for exporting HTMLeslint- ESLint JavaScript lintereslint-loader- ESLint loader for webpackbabel-eslint- wrapper for Babel's parser used for ESLint
- Create a file
.gitignore:
node_modules/
dist/
- Add the following scripts to
package.json:
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
- Create a file
webpack.config.jswith Webpack config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
- Create a file
.babelrcwith Babel config:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
- Create a file
.eslintrc.jswith ESLint config:
module.exports = {
parser: "babel-eslint",
};
- Create a file
src/App.jswith sample component content:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
Basic App demo
</div>
);
}
}
export default App;
- Create a file
src/index.jsand place the following code to render a component:
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- Create a file
src/index.htmlto render website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- To start development of project use command:
npm start
- To create bundle (in
dist/folder) that you can put on the server use command:
npm run build
Copyright (c) 2019 Piotr Kołodziejczyk
This project is licensed under the MIT License - see the LICENSE.md file for details