All fundamental concept of React.js

React is a library of javascript which is used for building user interfaces.
when a user working with a framework, Many smart design decisions are already made for the user and gives a clear path to focus on writing good application-level logic. We can use React to describe Web UIs.

1)Introduction:In React DOM is “Document Object Model” which is used to change a document structure ,style and it’s also the browser’s programming interface.

2) The React Language: In an array, we store a lot of value. But user can change, add, remove or update data. After changing the value of the array change automatically.

3) React’s tree reconciliation: When we tell React to render a tree of elements in the browser, it first generates a virtual representation of the tree. When we tell render the updated tree, it will compare the 2 virtual version that it has in memory, compute the difference between them and figure out which data should be changed or updated.

4)ReactDOM.render
ReactDOM.render is the entry point for a React application into the browser’s DOM. The first argument is WHAT to render to the browser. and the second argument is WHERE to render that React element(It’s a virtual element describing a DOM element) in the browser.

5)React.createElement
we represent DOM elements with objects using a call to the React.createElement method instead of working with strings to represent DOM elements in React. React.createElement can also be used to create elements from React components. There are many arguments of React.createElement.First, HTML “tag” for the DOM element to represent, which is div in this example. The second is the simple div we’re using has no attributes, so we used null in there. The third is the content of the DOM element which we have put a “Hello React” string in here.

6) Nesting React elements:
There are two types of nodes . one being controlled with the DOM API directly and another is controlled by React API. We are building these two nodes in the browser is that in the HTML version we used a string to represent the DOM tree. Pure javascript calls and represented the DOM tree with an object instead of a string in React version.

7)Update React elements:
By using Web timer API “setInterval” , we can easily repeat a Javascript function call in a browser. the whole React rendering code is within the ticking timer, React is changing only the content of the pre element and not the whole DOM tree. This is why the text input box was not regenerated and we were able to type in it. It only updates in the main DOM tree what actually needs to be updated while it keeps everything else the same.

8)React is all about components:
In a programming language, we use function and it gives us an expression that means result. functional programming in React is the same. we can use the many times the result, which is known as “props”.

9)Function vs Classes:
The React hooks release introduced a new API to make a function component stateful, most of what is usually done with React can be done with functions. The class-based syntax is only needed for advanced.
Use method Difference between class & function:
-User work with a simple function that is refreshed on each render. But the user doesn’t have to work with class “instances” and their implicit state.
-In function, we found stateful logic and separate it into self-contained composable and sharable units. It helps to break large component into the smaller part.

10)Accepting input from the user
Imagine we need to count the characters a user type in a text area, just like Twitter’s tweet form. With each character the user types, we need to update the UI with the new count of characters.
Here’s a component that displays a Textarea input element with a placeholder div for the character count:

const CharacterCounter = () => {
  return (
    <div>
      <textarea cols={80} rows={10} />
      <div>Count: X</div>
    </div>
  );
};ReactDOM.render(<CharacterCounter />, mountNode);

To update the count as the user types in the text area, we need to customize the event that fires when the user types. This event in React is implemented as onChange.