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>

                        } />