# React Javascript Framework

# React

In React components, code reuse is primarily achieved through composition rather than inheritance.

How to implement state into component?

There are 2 ways

javascript ES6 (Objects, Arrays, Conditionals, Classes, types, async await, Promises, arrow fn, destructuring)
Components have states
states can be updated on certain browser events
Anatomy of a Component
- component extends to React.Component Class
- render() lifecycle method returns JSX
React developer tools
create-react-app is like a CLI
react-scripts - webpack magic
- eject - if you want to customize webpack files
How data and props are added to components?
- each componet have state Object
- this.props.todos.map((todo) => (
  { todo.title }
  ))

HTTP 3-way Handshake sequence diagram

OSI reference model data units

Browser (cilent) makes a request to server (website server), like google.com etc
Server respods to client request and starts transmitting response
response is downloaded by Browser
Browser parses the response
Browser generates a DOM - DOMContentLoaded
browser issues document.Load event
control is passed to react js
react js maintains a virtual-DOM. Why?
1. apparently writes/frequent modifications to traditional DOM are expensive
2. so we minimize write to DOM my maintaining a virtual DOM
3. How virtual DOM is synced with actual DOM? Reconcilation step
4. by taking diff and updating only the parts/elements which needs to update and leave the remaining tree un touched
  1. better than recreating entire DOM on every update

virtual DOM reconcilation virtual DOM diff computation

ReactDOM.render(
  <h1>Hello, world!</h1>,             // element
  document.getElementById('root')     // container
);

node --version
v10.19.0
npm --version
6.14.4
dotnet --version
3.1.202
tsc --version
Version 3.9.2