How to configure the development tools for React Development?

The React development tools provide a small number of configuration options, which will allow us to configure the environment variables for the specific project.

here is the steps  for setting for the configuration.

1. create a .env.local file in the project folder.

2. add options to the file. I only add three options to the setting file

REACT_EDITOR will specific the editor  for the feature that opens the code file when you click on a stack trace in the browser. it is very convenient for tracing the error from browser to the code editor.

PORT :specify the port for the project being host.

HTTPS: will have SSL enable if it is true.

REACT_EDITOR=code
PORT=3500

HTTPS=true

React Application Development Quick tips and trick

1. it is Case sensitive to import library in the class.

Import react from 'react' will cause the issue with following error message

 Line 7:5:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 8:7:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 9:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 10:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 11:16:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 13:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope

the corrected syntax is Import React from 'react', the same apply to import Component

2. use npm init react-app <my-app-name> to create a react app without any specific template.

if you want to create  npx create-react-app <my-app-name>, you must provide a template like this below

npx create-react-app my-app --template typescript

3. we must use THIS keyword to access the variables and functions defined inside the component.
you will get this error message when you try to access the variable without THIS. The this keyword refers to the component instance.

./src/App.js
  Line 37:18:  'count' is not defined  no-undef

export default class App extends Component{

  count=4;

  isEven = () => this.count%2==0 ?"Even": "Odd"

  render = () =>

    <h4 className="bg-primary text-white text-center p-2 m-1"> 
number of things: {this.isEven()}</h4>

}

4. use spread attribute to pass properties to component, for example {...this.props}

 render={ (routeProps) => 

                            <DataGetter { ...this.props } { ...routeProps } >

                                <Shop { ...this.props } { ...routeProps } />

                            </DataGetter>

                        } />

how to use NVM in windows environment?

since NVM is target for Linux and Mac enviroment, which will allow us to setup the specific version of node.js for development. NVM stands for Node Version Management.

the official NVM only will support Linux and Mac, but Corey Butler build a a new utility to make NVM working exact the same in Windows enviroment. you can get more information and download from this link below

https://github.com/coreybutler/nvm-windows


after you complete the installation, then you can launch the CMD to run all the NVM commands like you execute in Linux and Mac

nvm     ---to all available command

nvm list available --- get all availale list of node


nvm install <version>  -- to install the specific version of Node.js

nvm use <version>  -- to set the specific version of Node.js for development