React Js Most Important Topics
React js is the most popular front-end UI library that was discovered by Facebook software engineer. Now at this time, this is highly recommended to learn this React Js technology.
- Prototype: The prototype concept in Javascript is from the beginning of Js. Javascript is called a prototyped-based language. When we want to set something to be accessed from any object or constructor that time we will use prototype. When we create a function Javascript creates a prototype object into that function. In Prototype we can attach our methods and property. This also enables other objects to inherit methods and property from this prototype. For example,
If we create a function constructor like this,
Here in the console.dir() we can see the Protype and it is a Object. When we set the prototype country or anything we can access this from anywhere.
If we create a constructor and also create a prototype. Here monib is a new constructor and it can access the country prototype. It is shown that a prototype method or property can be inherited to other objects.
2) Props vs state: there are some differences between props and state.
- Props are read-only. Whereas state changes are asynchronous.
- Props can not be modified. Whereas state can be modified.
- Props are immutable whereas states is mutable
Props are used to send data from a parent component to a child component. And it is called props drilling. In this way, we can access data or pass data to another component. React data flow is unidirectional.
State is used to store the state of a component. State can be accessible from that component. We can not access a state from other components. State is the very important thing in react js to set and store data. State is used to manage data.
3) JSX: JSX stands for Javascript XML. it is syntactic sugar of HTML. if we want to create an element in react we need to use React.createElement(). But with the help of JSX, we can now easily write Html in react with JSX way. JSX produces react element. It works internally to convert our HTML code to react element. We can write html in react with the help of JSX.
4) Context API: context api is the process to pass data through the component without sending props down to every level. If we want to send props from parent to child then we need to pass as prop in every component. And it is called props drilling. Context api is the update version of props drilling. In context api we don’t need to send data in every children. We declare the context and where the context is needed when we just call it will works. It will get the data without props drilling.
5) Virtual Dom: react js is mainly popular for the virtual dom feature of this. React js use virtual dom to render its data. When any changes happen in any element than it will only change the new dom element. It will not affect the real dom. Then the updated dom element is render without taking too much memory of real dom. The main feature of virtual dom is it only changes the new element and add to the real dom. And it updates the UI.
6) React Performance: there are several ways to improve the performance of react js application. Some of them are,
- Use production build: we need to use the production build to get better performance of our react application.
- Webpack: webpack is also a reason to get better performance in our react application.
- Devtool: browser developer tool is the best option to check the performance and improve the performance with the requirements.