• Web Development

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

    By / October 15, 2019 / 0 Comments

    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 $_
    2. Initialize NPM project
      3. npm init -y
    3. Install React
      4. npm install react react-dom
    4. Configuring Webpack 4
      5. npm init -y
    5. Configuring Webpack 4
      6. npm install --save-dev webpack webpack-dev-server webpack-cli
    6. Add the following script to package.json
      7. "script": { "start": "webpack-dev-server --mode development",},
    7. Create an index.html file in your root with the following codes
      8. <!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>
    8. Create a new directory named src and create index.js file in the new dir
      9. 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"));
    9. Install Babel
      10. npm install --save-dev @babel/core @babel/preset
    10. Create a webpack config file
      11. 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']
        }]
    },
};
    11. Create a file named .babelrc
      12. 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]

    read more