content.txt

What is React.JS ?
--------------------
Open source Javascript library for busilding user interfaces

Why to learn React ?
-------------------
Creates and maintained by Facebook
Huge Community 

Component Based Development
------------------------------
Compoenent based development means designing our software applications by 
building loosely-coupled independent components

What is Compoenent ?
---------------
A component is a well-defined and independent piece of our app's user interface

A Compoenent could include, but not limited to

* Button
* Header 
* Footer
* Navigation
* Table
* Pagination

Why Do we need Compoenents ?
---------------------------
Compoenents build off of the concept of Aax Requests, 
in which calls to the server made directly from client-side,
allowing for the DOM to be dynamically updated without the 
need of `page refresh`

Because compoenets are independent, one component can refresh without
affecting other compoenents or th UI as a whole

Types components
-------------------
1. Function Components
2. Class Components


React JS Basics
----------------
props - Shortcut for properties 

props - We can use props to allow compoenenst to talk to each other

-> Get passed co component function parameters
-> props are immutable
-> props - function component
-> this.props - class component

state - React updates UI based on the application state. 
      - This is actuallys stored as a property of react Class Compoement

-> State is managed with in the component
-> state can be changed
-> useSate() - Function Component
-> this.state - Class Component


JSX - Javscript XML 
-------------------
Extension for javascript Language Syntax

XML-Like code for elements and components

JSX is not manadtory to write react compoenents

JSX makes our code simplified and elegant

JSX ultimately transpiles to pur javascript which is understood by the browsers

Conditional Rendering
----------------------
1. if/else 
2. Element variables 
3. Ternary Operator 
4. Short Circuit Operator

Basics of Styling in React Components
---------------------------------------
1. CSS StyleSheet
2. Inline Styling
3. CSS Modules
4. CSS in JSLibraries ( Using Boorstrap Already)

Life Cycle Methods
-------------------
When we create a React Compoenent it goes through several stages 
in its life Cycle

Note: Life Cycle Methods do not exist on function components
      Only available on class components 

4 Phases of lifecycle Methods
-------------------------------
Mounting 
-----------
When an instance of component is being created and inserted into the DOM 

LifeCycle Methods 
------------------
-> constructor
-> static getDerivedStateFromProps
-> render
-> componentDidMount 

constructor - A special function that will get called whenever a new compoenent is created

      When to use ? 
      -------------
      1. Initialize the state 
      2. Binding the event handler

      When not use ?
      ---------------
      When Making HTTP requests

      Two Imporant things
      --------------------
      1. We have to call special function 'super' , this will call the 
         base class constructor 
         In our component we have access to this.props only after 
         we initially called super passing the props 
      2. This is the only place where we change or set the state directly 
         overwriting this.state fields 

static getDerivedStrateFromProps
----------------------------------
Method is called every time a component is re-rendered

-> we can set the state 
-> Never use this method for HTTP Calls

render()
---------
-> Only Required method in our Components (Class)
- > We simply read props, state and return JSX
-> Do not make HTTP calls 
-> Right after the parent render method child 
   component life Cycle methods are executed

componentDidMount 
---------------------
-> Invoked immediately after a component and all its 
   child compoenents have been rendered to the DOM   

- > Place to make the Ajax Calls and load the data 

Updating
----------
When a compoenent is being re-rendered as a result of changes to either its 
props or state

LifeCycle Methods 
------------------
-> static getDerivedStrateFromProps,
-> shouldCompoenentUpdate
-> render,
-> getSnapShotBeforeUpdate
-> compoenetDidUpdate

Unmounting
-----------
When a compoenent is being removed from the DOM 

LifeCycle Method
------------------
-> componentWillUnMount

Error Handling  
----------------
When there is an error during the rendering in a life cycle method 
or in the constructor of any child component

LifeCycle Methods 
------------------
-> static getDerivedFromErrpr
-> componentDidCatch


React Routing
-----------------
navigating to other pages

we use react-router-dom

BrowserRouter - Used for doing client-side Routing with URL Segments

Switch - Returns only the first Matching Route rather than all matching routes

Route - "Conditionally Shown Compoenent" based on matching a path to a URL 

Link - Repacement for anchor tags

React Hooks
------------
Hooks are new featire addition in react version 16.8
Which allows us to use react features without having to write a class 

e.g state od component