Introduction to React. Js

1. Is React a framework ?: React is not a framework, its a javaScript library. Now, lets talk about the difference between library and framework. When someone is using library, he/she can choose where and when he/she can use functions, one can code in his/her own way. On the other hand , when someone is using framework ,he/she can not choose where or when he/she can use functions.It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
2. DOM Vs Virtual DOM: DOM or document object model is the representation of what you see in web browser. In react it makes a clone of DOM called virtual DOM. React usually compare this two DOM this process is called reconciliation algorithm,if it find any change, it only update that change rather rearranging the whole DOM. So, it is a faster process.
3. Life Cycle Method: Each components has several life-cycle method that you can override to run code at particular time in the process . Each components have some phase such as : 1. Mounting , 2. Updating, 3. Unmounting . Life-cycle method means , whats methods does a component run in each phase.
4. JSX in React : JSX allow one to put HTML in javascript code and also put javascript code in HTML. In react, to create an element one has to use React.createElement(). For example:

<MyComponent color="blue" shadowSize={2}>
  Click Me
</MyComponent> // its JSX

when it compile,its look like,

React.createElement(
  MyComponent,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

So, JSX makes code easier.

5. PropsTypes: In react applications propstypes is used to tell what will be the type of the props. If the props do not satisfied the types error will show. Its a type checker of props. For example:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Here we can see the type of props.name is given string, if anyone pass the name which is not a string it will throw a error.

6. Default Props: Default props is used for undefined props. For example :

class CustomButton extends React.Component {
  // ...
}
CustomButton.defaultProps = {
  color: 'blue'
};

it will render color as blue until the props is defined .

7. Declarative Behavior of React: In react application we just tell react what we want, react will translate our declarative descriptions to actual UIs in the browser. In declarative programming, developers only describe what they want to achieve and there’s no need to list all the steps to make it work. React do the same thing. Thats why react is declarative.

8. State : To handle dynamic data react offer state. At the beginning, you set the default state of the component. For example:

const [value,setValue]= useState(0)
const handleClick=()=>{
     setValue(value+1)
}...
...
...
return{
   <button onclick={handleClick}>Plus<button/>}

here, when one click on the button the value will dynamically change.

9. React’s tree reconciliation: In DOM updating, removing,or insert new elements is a slow process. When we tell React to render a tree of elements in the browser, it first generates a virtual representation of that tree and keeps it around in memory for later.When we tell React to update the tree of elements it previously rendered, it generates a new virtual representation of the updated tree. Then it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them and update the change, its call reconciliation.

10. React is all about components: In react we define small small components.React components are exactly the same; their input is a set of “props” and their output is a description of a UI. We can reuse a single component in multiple UIs and components can contain other components. The basic form of a React component is actually a plain-old JavaScript function.