Setting up environment for React

You will need to install vscode and nodejs before setting up project. Once these tools are installed, You can start setting up react. There are several ways in which you can setup react.

create-react-app with base template
create-react-app with typescript template
Setup project from scratch

create-react-app with base template

Please follow below steps to create react app.

npx create-react-app my-app cd my-app npm start set HTTPS=true&&npm start

After above commands are executed, you can access app at http://localhost:3000/
You can execute command npm run build to create build for production use.

create-react-app with typescript template

Please follow below steps to create react app with typescript support.

npx create-react-app my-app --template typescript cd my-app npm start

After above commands are executed, you can access app at http://localhost:3000/

Setting up react project from scratch

Please follow below steps

npm init -y
npm i react react-dom
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader -D
Create src directory and index.js and index.html file in it
Create src/components directory and App.js file in it
Configure webpack.config.js
Create scripts - "start" : "webpack-dev-server --mode development --open --hot"
Script for prod - "build" : "webpack --mode production"

src/index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <div id='root'></div>
</body>
</html>

src/index.js file


import React from "react"
import ReactDOM from "react-dom"
import App from './components/App'
ReactDOM.render (<App/>, document.getElementById('root'));

components/App.js file


import React from "react"
import ReactDOM from "react-dom"
import App from './components/App'

export default function x()=>{
  return (
    <div>
    Hello
    </div>
  )
}

webpack.config.js


let path = require('path')
let HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry:'./src/index.js',
  output:{
    path: path.join(__dirname,'/dist'),
    filename:'bundle.js'
  },
  plugins : [

    new HTMLWebpackPlugin({
      template:'./src/index.html'
    })
  ],

  module:{
    rules:[
      {
        test:/.js$/,
        exclude : /node_modules/,
        use : {
          loader: 'babel-loader',
          options : {
            presets : ['@babel/preset-env','@babel/preset-react']
          }
        }
      }
    ]
  }
}

Folder structure of create-react-app

Here is the list of important folders/files in app created using above commands.

package.json - This file contains all dependencies of project and react scripts
public/ - This folder contains index.html and favicon.ico
src/ - This folder contains index.js (entry point of app) and App.js (Base component). JS and CSS files must go under src directory.

Environment Variables

Environment variables should starte with REACT_APP_ e.g. REACT_APP_STRIPE_KEY and then it can be accessed like process.env.REACT_APP_STRIPE_KEY



if (process.env.NODE_ENV !== 'production') {
  //disable ads
}

VS Code extensions for react

Below extensions are useful when working on react projects in vscode.

ES7+ React/Redux/React-Native - This extension provides snippets to create react components
live server
prettier - In big projects, prettier npm package is preferred over extension
ESlint - In big projects, ESLint npm package is preferred over extension
Gitlens

Web development and Automation testing

solutions delivered!!

Basics

Advanced

Miscellaneous