ReactJS

React Setup: 1. npm init 2. npm i webpack webpack-cli --save-dev 3. Add a build script to package.json "build": "webpack --mode production" 4. npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 5. Create a .babelrc and configure it: { "presets": [ "@babel/preset-env", --for compiling Javascript ES6 code down to ES5 "@babel/preset-react" --for compiling JSX and other stuff down to Javascript ] } 6. Configure webpack.config.js: const path = require('path'); module.exports = { entry: './src/index.jsx', devtool: 'inline-source-map', module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ ".jsx", ".js" ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist...

Typescript and React setup steps: 1. npm init 2. npm install typescript -g (if it was not already installed globally) 3. npm install typescript (ts-loader needs a local version of typescript installed in the project) 4. tsc --init 5. Example tsconfig.json {   "compilerOptions": { "target": "es5",                        "jsx": "react", // Important                          } } 6. npm install --save react react-dom @types/react @types/react-dom 7. npm install --save-dev ts-loader webpack webpack-cli 8. Sample webpack.config.js const path = require('path'); module.exports = {   entry: './src/index.tsx',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   },   resolve: { extensions: [ ".ts...

Typescript: 1. Install typescript: npm install typescript 2. Command to convert a typescript file(*.ts) to a javascript file (*.js) tsc file_name.ts 3. Initialize npm npm init 4. Install lite-server npm install lite-server --save-dev 5. Add a script command to package.json to start the lite-server "start": "lite-server" 5. Initialize tsc tsc --init Add the following to the tsconfig.json if it doesn't exist already: "sourceMap": true, "exclude": [ "node_modules" ] 6. To compile all typescript files to javascript simply run: tsc 7. For Modules npm install --save-dev ts-loader webpack webpackconfig.js: const path = require('path'); module.exports = {   entry: './index.ts',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   }, ...