Some important topic about react:
React is not a framework
React is not a framework but an open source, Javascript library. It is used to make UI components and a good user interface. Easy to use. It can work nicely on other third party libraries. You can choose any component from this library and easily implement it into your code.
React is declarative
In React we write code as we want. And react run the code simultaneously. For instance, you can use map function without using for loop . React takes all responsibilities to perform our written codes.
You separate the concerns
In our project we can write html, css and javascript codes in different files. Normally it is the trend. But there shouldn’t be confusion separating these files. If the codes are separate then you can easily replace the part of code if needed without changing on another file.
Data goes down
In React, it follows the tree structure and data goes downward. If you want to access data in the child component from the parent component you have to use props. Props bears the values you are passing from the parent to child.
How rendering works
React uses virtual DOM. When setState have some changes virtual DOM saves the changes and while rendering it updates the value what have changed and save and display on real DOM without reloading the page.
Events go up
It means to pass data from child component to parent component. Local method pushChangesUp() is added to a button and while clicking on that it push up the data from props to parent component. Then parent component can store the data and can pass it down while needed of child component.
State
In React, state is a very interesting thing. We create a stateful component in React so that in case of passing down data or any changes applied. We can change the state. In that case we use usestate() functionality, which has two property initial state, and setState. We change the state with this setState() property.
Conditional rendering
It means the rendering happens based on some conditional logic . If the conditions are met then the rendering takes place. Most common conditional rendering is “if / else”. In React, we can do this using the ternary operator.
Syntex,
Condition ?(if) return output :(else) return output
React Component:
render()
render() method is required in a class component. This method should not change or modify the component state. It gives the same output every time while calling this method. It helps to think components more easily if the working process of the render() method remains the same.
Virtual DOM
Virtual DOM means virtual Document Object Model. When we write any in JavaScript it creates a collection with all html elements or tags which are used here. It is called the DOM. Virtual DOM is a clone of real DOM. React uses virtual DOM. When we make any changes on our tags or codes it saves on Virtual DOM . It then compare or “diffed” with the previous DOM after rendering. That’s why the page doesn’t reload but it shows the newly added or changed elements on the browser and also added it with the real DOM. It saves space and increases performance of the website.
React is a single page application. And we add components on it to make the website or code more cleaner. It makes a DOM tree for every change on the virtual DOM. And changes the previous DOM with the DOM tree.