Explore React | Some Basic Concepts
Hello programmers! In todays blog I am going to explain some basic concepts of react.js. Let’s get started!
First of all you should know what is react. Let’s learn :
React js :
React is a javascript library used for building user interface. React is only concern about the UI. It made for UI solution. Mainly it is used for building SPA ( Single page application)
Let’s learn some other concepts of react :
2. JSX :
The fullform of JSX is Javascript XML . It looks like HTML but actually it’s not HTML. It takes HTML code and compile it to executable javascript code with the help of babel.
3. Components :
Component is a very important concept in a website. In react a component is a part of the UI. For example in a home page navigation menu is component . The whole page is also a component. Every part of the website UI is a component. In React there are two type of component.
1. Class Component
2. Functional Component
4. Class component :
In react a class component is way to define a component. It uses ES6 class and extend it to component class.
5 . Functional Component :
Functional component is the another way to declare a component. It is like a javascript function in which you can pass props as argument and it return a view or element.
6. React Element :
A react element is a thing we get from component. For example we have a component name Hello that returns html . This HTML part is an element
7. props :
In react props stand for properties. Actually props are used to pass and receive data in components. props are passed as an argument in component. When we call a component we define the props as a attribute
8. State :
In react state is an instance of react component. It’s like somthing that can change. It’s an object. We can declare a state by using useState hook
9. Reconciliation :
Reconciliation is a DOM updating process in react. React is a bit intelligent here. React doesn’t update the whole DOM rather it updates the changes made in the DOM. For this react create a vertual DOM and compare two DOM. This process is known as reconciliation.
10. Hook :
Hook is a great feature in react. It was introduced in version 16.8. React hooks are function which hooks into react state and lifecycle features from function components. React has some build in hooks . You can also make your own hooks.