React Core Concepts for Beginners

What is React:

React is not a programming language. It is a simple JavaScript library that is using to build a user interface (UI). React is using in the front-end of a website. It means react can not work in the back-end. So we can say react is only focused on the front end.

Why React:

Despite the competition with Vue.js and Angular, React is proving to be the go-to choice for most developers. The main reason for this is it is easy to learn and has rich community support. React makes development smooth and fast. If you know the basics of javascript, es6, then you can learn it very quickly.

Virtual DOM:

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

React Performance:

ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API that deals with HTML, XML, or XHTML. The DOM exists entirely in memory.

React JSX:

JSX stands for JavaScript XML. JSX is an XML/HTML like extension to JavaScript.

What is Key:

When we are mapping an array in react every item has a different unique key or id. if you did not pass key in our components sometimes react has faced some problems. So we need to pass key in components.

What is State:

State is so important part of React. Sometimes we need to set a data anywhere & after need to use it. In this case, we can use the useState function. In this function, we can set & use our data so easily.

What is Context-API:

Context-API is another method to pass some data from components. We know props can pass data from parent component to child component. But sometimes we need to pass data from child to parent or others components that are not the same. In this situation, we use Context-API & easily pass data from every component in our react app.

Conditional Rendering:

Conditional rendering is a condition-based render function. Some we need like if the user is male show something else the user is female then shows another thing. In this case, we use conditional rendering & show output to the user.

React hooks:

A hook in a React component is a call to a special function. All hooks functions begin with the word “use.” Some of them can be used to provide a functional component with stateful elements (like useState), others can be used to managed side effects (like useEffect) or to cache/memoize functions and objects (like useCallback). Hooks are very powerful. React hook functions can only be used in functional components. You can’t use them in class components.