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

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/

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') {
  analytics.disable();
}      

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']
          }
        }
      }
    ]
  }
}

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
Complex problems, Simple Solutions