ReactThings

reactthings

### Technology Used:
  react
  react-router-dom
  react-redux - <Provider/>, connect()
  redux - createStore(), applyMiddleware(), combineReducers()
  redux-logger - logger
  react-stripe-checkout - <stripeCheckout />
  redux-thunk
  
### to be Done:
  
- React Reselect
  - can be added to optimize the react-app configuration
- react-persist 
  - to get localStorage and SessionStorage in React to save data temporarily in browser
- styledComponents (Personally dont like them at first glance, will later look once more...)
  - use to add css in JS using ` styled.tag`` `etc.
- React-Saga
  - other alternative to redux-thunk, do async activities to update the store
  - uses generator functions i.e function\* a(){ yield something}
- Context API
- Optimaization
  - React Lazy + Suspense
  - Error Boundaries
  - useMemo
```

Notes: 
## React State
- Do Not Modify State Directly. use setState()
- React may batch multiple setState() calls into a single update for performance.
  - Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.
- State Updates are Merged
  - When you call setState(), React merges the object you provide into the current state.
- Data Flows Down
  - If you imagine a component tree as a waterfall of props, each component’s state is like an additional water source that joins it at an arbitrary point but also flows down.

## React Challenges:
- Decide on Components
- Decide the state and where it lives
- What changes when state changes


### Hooks(React 16.8+)
 - They let you use state and other React features without writing a class
 - use when u want to have functional Components but yet need to use state or any lifecycle Methods.
  - **useState**
    - Let us use state in functional Components
  - **useEffect**
    - The Effect Hook lets you perform side effects in function components
    - Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effect(interation with outside world).
    - Think useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
    - used in 2 ways:
      1. useEffect(()=> {})
        - this is called for any change in component, whether it is mounting, rendering or update.
      2.useEffect(()=>{}, [0 or more arguments])
        - always called on mounting, but only called on rendering if any of argument value is changed inside useEffect
  - **useReducer**
    - An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)
    - useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
  - useRef
  - useCallback
  - useMemo
  - useDefaultValue

## Containers and Presentational Components
  - Containers = components, that have state and uses some lifecycle methods
  - Presentational = components, that are dumb, rely on props to render the view only
  
## Firebase (https://www.npmjs.com/package/firebase)
- Adding server-side (Backend) code without writing server-side code.
- Include only the features you need,the full Firebase JavaScript client includes support for Firebase Authentication, the Firebase Realtime Database, Firebase Storage, and Firebase Cloud Messaging. Including code via the above snippets will pull in all of these features.
- Firestore(Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity.
- Firestore is a cloud-hosted, NoSQL database that your iOS, Android, and web apps can access directly via native SDKs. )
- Firestore returns two type of objects: Reference and Snapshot
- can read the data using .get() or .onSnapShot() methods over reference which returns a snapshot

```
firebase-app - The core firebase client (required). `firebase/app`
firebase-auth - Firebase Authentication (optional). `firebase/auth`
firebase-firestore - Cloud Firestore (optional). `firebase/firestore`
```

### Observable and Observer Pattern
- We have Observable, which is an object we’d like to observe (it may be also called Subject in the Observer pattern) and we can subscribe for observing changes in those object. Every object interested in those changes will be called Observer. We can have one Subject and many Observers, and these single Observers may know nothing about each other. We can also stop observing changes at any time.
- firebase onAuthChange(), onSnapshot() were the functions based on this pattern or to which we subscribed to, for ex- onAuthChange method is the mechansim to observe the auth changes whenever user sign in or sign out. and the onAuthChange(user => userWorkHere..., error=> errorHandlerHere) was the observer. if any auth changes happens observers are notified with value/error.and we can end the subscription when we dont want to listen to auth changed, which we have done in ComponentWillUnmount().
- observable is the chain of events that happens one after the other and we subscribe to this chain so to get notified about the changes/error/completeness and when anyof this happens observer reacts toward it.
  observer = {
  next(nextValue) // when any event in chain return some value this function runs ex- user => userWorkHere...,
  error(errorValue),
  complete() // when chain is complete and no further actions are there
  }

## Heroku Deployment (https://devcenter.heroku.com/articles/heroku-cli)
  - sudo snap install --classic heroku
  - https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
    - heroku create \$APP_NAME --buildpack mars/create-react-app
    - This buildpack deploys a React UI as a static web site. The Nginx web server provides optimum performance and security for the runtime.
    - git push heroku master