Setup

create-react-app Sample React application

npx: Node Package Execute

yarn
npm

npx create-react-app@latest react-learning --use-npm
npm install (npm i)

Learnings

(6th May)

• State/ Props
• Class Components (state, constructor)
• bind & arrow functions

(9th May)

• Lifecycle (Mount / Update / Unmount) https://reactjs.org/docs/react-component.html https://medium.com/codex/the-lifecycle-of-a-react-component-8e01332a068d

(10th May)

• Practices
• Function Components

Class Component

• A class component requires you to extend from React. Component and create a render function which returns a React element (JSX).

• It must have the render() method returning JSX (which is syntactically similar to HTML)

• Also known as Stateful components because they implement logic and state.

• React lifecycle methods can be used inside class components (for example, componentDidMount).

• It requires different syntax inside a class component to implement hooks.

• Constructor are used as it needs to store state.

  example:

constructor(props) {
  super(props);
  this.state = {name: ‘ ‘}
}

Functional Component

• A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element (JSX).
• There is no render method used in functional components.
• React lifecycle methods (for example, componentDidMount) cannot be used in functional components. Hooks can be easily used in functional components to make them Stateful.
• Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.
• Constructors are not used. example:

const [name, setName] = React.useState(‘ ‘)

Hooks

useState

• Implement state in Functional components

useEffect

• Implement lifecycle methods in Functional components