React

React Overview

What is React? 

• JavaScript Library
• Not a framework
• Focus on UI 
• Routing and other functionalities can be implemented with Rich Ecosystem
• Maintained by Facebook

Architecture

• The website built in React has Component Based Architecture
• Components can be reused

Components

• React can have functional or class based component. 

Functional based	Class based
Simple Absence of 'this' No state (forces you to avoid to make component have a lot of data  Useful for UI	Feature Rich States and owns the data Complex UI logic Lifecycle Hooks

JSX

JSX - is an extension for javascript

In each component react needs to be imported to read JSX.

Props / State

- Props are passed through components

- Props can have children. 

- Functional components can have state. State is in another word container with memory where data can be saved and manipulated. 

props	state
props are immutable  passed to components props - Function comp this.props - class comp	Can be changed useState Hooks - functional components  thisState - class Component

- Change state with setState, without state it won't change the UI, but will be updated in console.

- setState accepts two parameters: object and callback function.  

 

- prevState example. 

Summary: 

1) Always make use of setState and never modify the state directly

2) Code has to be executed after the state has been updated

3) When you have to update state based on the previous state value , pass in a function as an argument instead of the regular object. 


Shortcuts:

- Download ES7 snippet on Visual Basic to use shortcuts.

- type 'rce' and tab to get class component. 

- type 'conts' to get constructor

- type 'rfce' to get function based component

 

Destractoring props and state. 

- Makes it possible possible to unpack values from arrays  or properties from objects into distinct variable.

There are two ways do destructoring. 

1. Destructor in directly in the function. 

2. Destructor in the body. 

Distroctoring in State based component:

Event Handling and Event Binding:  

don't use brackets on calling a function on event handler because if you do it becomes a function call.

npx create-react-app (name of the app) - to create an application

to implement Bootstrap into the app 

npm start

npm install react-bootstrap.   ---- to install bootstrap dependency on your project. 

ROUTING

NPM installation: 

    - npm i react-router-dom

    - npm react-router-bootstrap

BackEnd

node.js -javascript run time

express = backend framework allows 

mongoose - object data mapping

HTTP methods

- GET ex: /api/products

- POST ex: /api/products

- PUT ex: /api/products/25

- DELETE ex: /api/product/25

npm init - create a json file

npm i express - crate server.

npm i axios - install axios, it is https request library. 

Run backend and frontend at the same time

install packages: 

nodemon - no need to constantly restart 

- concurrently

Environments: 

- npm i dotenv 

REACT HOOKS: 

USESTATE:

1) The useState hook lets you add state to functional components - In clsees, the state is always an object. 

2) With the useState hook, the state doesn't have to be an object

3) The useState hook returns an array with 2 elements. 

- The first element is the current value of the state, and the second element is a state setter function. 

4) If the state value depends on the previous state value, you can pass a function to the setter function. 

5) When dealing with objects or arrays, always make sure to spread your state variable and then call the setter function. 

USEEFFECT:

1 The useEffect Hook lets you perform side effects in functional components. 

2) It is a close replacement for componentDidMount, componentDidUpdate, componentWillUnmount

CONTEXT:

Context - provides a way to pass data through the component tree without having to pass props down manually at every level. 

useContext - 

useReducer -

 - is an alternative for useState

- useState is built using useReducer

- when to use useReducer vs useState?

Hooks are relevant to their names: 

- useState = state

- useEffect = side effects

- useContext - context API

- useReducer - reducers