How to set up base frameworks with npm, Webpack and React 2019
October 15, 2019
This is a guide of the simple React configuration I have used for my current React projects.
- Start off by creating your project directory
- Initialize NPM project
- Install React
- Configuring Webpack 4
- Configuring Webpack 4
- Add the following script to package.json
- Create an index.html file in your root with the following codes
- Create a new directory named src and create index.js file in the new dir
- Install Babel
- Create a webpack config file
- Create a file named .babelrc
mkdir webpack-react-tutorial && cd $_
npm init -y
npm install react react-dom
npm init -y
npm install --save-dev webpack webpack-dev-server webpack-cli
"script": { "start": "webpack-dev-server --mode development",},
<!DOCTYPE html><html> <head> <title>My base framework setup with npm, Webpack and React</title> </head> <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body></html>
mkdir src && cd src && touch index.js
And then, write a React component in the index.js
import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
render() {
return (
<h1>
Hello World from React boilerplate
</h1>);
}
}
ReactDOM.render( , document.getElementById("root"));
npm install --save-dev @babel/core @babel/preset
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist', publicPath: '/',
filename: 'bundle.js'
},
devServer: { contentBase: './dist', },
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}]
},
};
touch .babelrc
And then, write the following codes
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Now run, npm run start!
npm run start
References
Previous