React Starter Template

Simple instructions to create a basic react starter code with styled components using Webpack 5

React

1. Create a folder and initialise yarn

yarn init -y

2. Add dependencies for react, Webpack and babel

yarn add react react-dom styled-components
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin style-loader css-loader webpack webpack-cli webpack-dev-server

3. Create a webpack.config.js file

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  devServer: {
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        },
      },
      {
        test: /\.css/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

4. Create an /src folder and include the following files in it.

5. Add scripts for start and build to package.json

"scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
},

6. Build & Run

Use yarn build to build the application and yarn start to run the app for development locally.