Installation Guide

Run this to create a new project

npx create-react-vscode <your-project-name>

This is a react project generator with preconfigured vscode settings. This includes, Eslint & File associations for reactjavascript (jsx)

Setup Guid

This is the guid if you want to recreate this project manually

1. npm init

2. installing webpack

   npm i webpack webpack-cli
   

   npm i webpack-dev-server
   

3. installing Dependencies

   npm i react react-dom
   

4. Dev Dependencies

   npm i -D style-loader, css-loader
   

   npm i -D sass sass-loader
   

   npm i resolve-url-loader html-loader
   

   npm i -D mini-css-extract-plugin
   

   npm i -D html-webpack-plugin
   

   npm i -D clean-webpack-plugin
   

   npm i babel-loader @babel/core @babel/node @babel/preset-env @babel/preset-react
   

   Eslint Dependencies

   npm i -D @babel/eslint-parser babel-jest eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
   

   Jest Dependencies

   npm i -D jest babel-jest react-test-renderer -> ject testing library
   

5. Eslint configrations

   Add .eslintrc.js file to root

   module.exports = {
   	parser: '@babel/eslint-parser',
   	root: true,
   	env: {
   	  browser: true,
   	  commonjs: true,
   	  es6: true,
   	  node: true,
   	  jest: true,
   	},
   	parserOptions: {
   	  babelOptions: {
   	    presets: ['@babel/preset-react'],
   	  },
   	  sourceType: 'module',
   	},
   	plugins: ['react', 'react-hooks'],
   	extends: [
   	  'eslint:recommended',
   	  'plugin:react/recommended',
   	  'plugin:react-hooks/recommended',
   	  'airbnb',
   	],
   	settings: {
   		react: {
   	      version: 'detect',
   	    },
   	},
   	rules: {
   		'linebreak-style': 0,
   	    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
   		'react/function-component-definition': [0],
   	},
   };

6. initlial directory structure

   📦create-react-vscode
    ┣ 📂.vscode
    ┃ ┗ 📜settings.json
    ┣ 📂node_modules
    ┣ 📂src
    ┃ ┣ 📂components
    ┃ ┃ ┗ 📜App.js
    ┃ ┣ 📂styles
    ┃ ┃ ┗ 📜main.scss
    ┃ ┣ 📜index.html
    ┃ ┗ 📜index.js
    ┣ 📜.eslintrc.js
    ┣ 📜.gitignore
    ┣ 📜babel.config.js
    ┣ 📜package-lock.json
    ┣ 📜package.json
    ┣ 📜README.md
    ┗ 📜webpack.config.js
   

7. Configuring Webpack

   Add .webpack.config.js file to root with these settings

   /* eslint-disable global-require  */
   /* eslint-disable  new-cap */
   
   const path = require('path');
   
   const CURRENT_NPM_TASK = process.env.npm_lifecycle_event;
   const environment = CURRENT_NPM_TASK === 'build' ? 'production' : 'development';
   
   const { CleanWebpackPlugin: cleanWebpack } = require('clean-webpack-plugin');
   
   const plugins = {
   
     miniCssExtract: require('mini-css-extract-plugin'),
     htmlWebpack: require('html-webpack-plugin'),
     cleanWebpack,
   };
   
   const config = {
     entry: './src/index.js',
     output: {
       filename: 'main.[fullhash].js',
       path: path.resolve(__dirname, 'dist'),
     },
     plugins: [new plugins.htmlWebpack({ template: './src/index.html' })],
     devServer: {
       port: 8080,
       static: {
         directory: path.join(__dirname, 'dist'),
       },
       hot: true,
   
     },
     mode: environment,
     module: {
       rules: [
          {
       	test: /\.html$/i,
       	loader: 'html-loader',
       	options: {
       	  // Disables attributes processing
       	  sources: true,
       	},
     	  },
     	  {
     	    test: /\.scss$/,
     	    use: ['style-loader', 'css-loader', 'resolve-url-loader',
     	      {
     	        loader: 'sass-loader',
     	        options: {
     	          sourceMap: true,
     	        },
     	      },
     	    ],
     	  },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
         },
         {
           test: /\.m?js$/,
           exclude: /(node_modules|bower_components)/,
           use: {
             loader: 'babel-loader',
           },
         },
       ],
     },
   
   };
   
   if (environment === 'production') {
   // eslint-disable-next-line no-console
     console.log('environment:', environment);
     config.module.rules[0].use[0] = plugins.miniCssExtract.loader;
     config.module.rules[1].use[0] = plugins.miniCssExtract.loader;
     config.plugins.push(
       new plugins.miniCssExtract({ filename: 'main.[fullhash].css' }),
       new plugins.cleanWebpack(),
     );
   }
   
   module.exports = config;

8. Creating npm Scripts for Development

   Add these script in package.json, scripts object,

   "scripts": {
   	"start": "npx webpack-dev-server",
   	"build": "npx webpack",
    	"test": "echo \"Error: no test specified\" && exit 1"
   }