React understanding for Beginers

Its been a long time I am thinking to write something about react what I know.

React is javascipt library for building user interfaces. It was developed by facebook in 2011. Currently it is one of the most popular javascipt library for building user interfaces. Nowadays, React is dominating this place for a long.

We can say that components are the heart of React applications. Component is a piece of user interface. Simple react application or complex react application, whatever it is, using a number of components to create the final product. It is helping the developer for the coming changes in the future.
Every React application has an App component which refered to as the root component. This component will represent the entire application and it contains all other child components. So every react application is a tree of components.
consider an example

Component is implemented as Javascript class or function. After the introduction of react Hooks everyone is mostly using the Functional components.

class component

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

functional component

function functionalComponent(props) {
  return <h1>Hello, {props.name}</h1>; // React element
}

The class component contains state and render method mainly. State is that we want to display when the component is renderd and the render method is describing how the UI looks like. The output of the render method is a react element which is a simple javascript object that maps to a DOM element it is not a real DOM element. It is just a plain javascript object that represents the DOM element in the memory. The representation of DOM element in the memory is refered to as Virtual DOM. When we change a state of component, then it will get a new React element. Thn react will compare this element and its children with the previous one and figures out what is changed and then it will update the part of the real DOM to keep it in sync with the virtual DOM. So we do not need to attach any evend handlers to DOM elements.
In case of functional component, using return instead of render method. It will return also a React element. There is no state. React 16.8 introduced Hooks. So in functional componets using hooks which can be called to create and maintain state.

If functional component is the first choice then the code will be shorter and easier to read.

As I mentioned earlier React is a library. Because of that need to use seperate libraries like Redux for state management and react-router for routing and etc. But it is not a big deal and it will not affect the performance of application development.

React is react to state change.

will continue ...