React core concepts
React
React is a javascript library. It is an open-source, frontend, and building user interface. It gives a better user experience and better developer experience and especially for single-page applications. Recently it is the most popular javascript library. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. It works on a virtual dom system. It is design base on Components.
Jsx
Jsx full form is javascript XML.The purpose of jsx is to write HTML code in Javascript. JSX makes it easier to write and add HTML in react. The JSX syntax looks a lot like HTML. But is not HTML and nor it is a string of javascript. Rather it is a syntax extension of javascript.It has been added for the benefit of developers.
Components
One of the features of React is component feature. Components are the main building block of react. React is the component base library. The component is similar in look different in data. That means it looks similar but its inside functionality, code, or data is different. Makes component coding much easier.No need to rewrite data or code when using components. This has made the simple task of the developer much easier.If the same data needs to be used different place then it can be done easily throw the component. Component can be navbar or sidebar , card-type etc. See the example of the component below.
React Virtual Dom
React A same to same creates another dom similar to the one in this browser called a virtual dom. Now, this dom looks exactly like the real dome, but this virtual dome is actually a JavaScript object. React makes it so that any element can be modified easily and efficiently using JavaScript with this DOM.
Props
In React, we often need to transfer data from one component to another when we go to work. Props has made this task easier.We can transfer data one component to another component with props method.The component to which the data is to be sent imports to the parent component and accepts the props as the value inside the component.
Conditional Rendering
Conditional rendering will show another dependent data or component of a logic.Suppose we have two elements, one is << home /> the other is <sign in />. If the user is logged in, he will be shown the home page and if he is not logged in, he will be taken to the login page.
Hooks
React has 10 hooks. Which mainly comes base on the functional component. The hooks make developer life much so easier. The hook is mainly a function.The class component has many features that were not in the functional component that led to the hooks.
useState() hooks
The use of state has made the work of state management much easier. The use state function basically returns an array. Distrctuting to that array provides two things. One is the name of the variable and a function to control that variable and the initial value inside the bracket of the use state.