Web Development

How to set up base frameworks with npm, Webpack and React 2019

This is a guide of the simple React configuration I have used for my current React projects.

  1. Start off by creating your project directory
  2. mkdir webpack-react-tutorial && cd $_
  3. Initialize NPM project
  4. npm init -y
  5. Install React
  6. npm install react react-dom
  7. Configuring Webpack 4
  8. npm init -y
  9. Configuring Webpack 4
  10. npm install --save-dev webpack webpack-dev-server webpack-cli
  11. Add the following script to package.json
  12. "script": { "start": "webpack-dev-server --mode development",},
  13. Create an index.html file in your root with the following codes
  14. <!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>
    
  15. Create a new directory named src and create index.js file in the new dir
  16. 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"));
    
  17. Install Babel
  18. npm install --save-dev @babel/core @babel/preset
  19. Create a webpack config file
  20. 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']
            }]
        },
    };
  21. Create a file named .babelrc
  22. touch .babelrc
    And then, write the following codes
    {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }
    Now run, npm run start!
    npm run start

References

  • How to set up & deploy your React app from scratch using Webpack and Babel by Nathan Sebhastian [LINK]
  • Tutorial: How to set up React, webpack, and Babel 7 from scratch (2019)[LINK]
  • React JS Setup using Npm Babel and Webpack By frugalis_blog [LINK]

Leave a Reply

Your email address will not be published. Required fields are marked *