10 Core Concepts of React.js

React is a JavaScript library that creates user interfaces (UI) is a efficient way. Remember react is not a framework, its just a JavaScript library. React uses declarative code to help build mobile apps, web apps, single page applications (SPA) and other complex applications using the react libraries. This declarative code is a more efficient way to write codes as here you don’t tell react how to do the task. You tell react what to do and under the hood react does it’s job. unlike other programming languages that uses imperative codes, react uses declarative code to make it more efficient to use react for the developers.

Learning react is not rocket science and at the same time its not that easy also. First of all, you need a brief understanding about JavaScript. JavaScript is the heart of react. We cannot thing of using react without proper understanding of JavaScript.

For understanding React, one must have knowledge of the basic react core principles. Because without the understanding of the core principles of react we can’t move further in learning this awesome library. So here I’m going to give a little explanation of 10 basic core principles of react.

1. How React Works:

At the very core of its functionality, react just maintains a DOM tree for us and shows it in the browser using various efficient algorithms and computations. Your browser renders a DOM tree of HTML that is pretty basic of any browser to show the information on a website. React here uses a virtual DOM that keeps another copy of the browser DOM and that compares the actual DOM with a diffing algorithm that finds any changes made into the DOM tree and only saves those changes that were made. So unlike the native approach, the browser DOM does not need to be re-render as a whole. React just updates the things that have been changed in an efficient way.

This concept of virtual DOM makes react a faster and optimized option to build applications. It reduces the slow process and makes the browser efficiently render the HTML to show the users.

2. JSX:

JSX is simply a syntactic sugar for creating very specific JavaScript objects. Its a JavaScript extension. JSX is used to write HTML codes in a react component and render it to the browser. First of all, browsers don’t understand JSX. This JSX have to be first converted to an understandable form of the browser. This is done by the WebPack (which uses Babel and other things) to transpile the JSX syntax into JavaScript code that could be understood by the browser.

If we write this code in a functional component of react,

<Button color=”blue”>Click Me</Button>

then the transpiler would convert this JSX into JavaScript to be understandable to the browser

React.createElement(Button, {color=”blue”}, Click Me)

Then this code will be rendered to the browser using the technologies that react uses under the hood.

3. Components:

Components are the main building block of react. React is known as a component based library as other frameworks like angular also uses components. Every part of a web application is a component. Components are made in a small scale and those small components are gathered together to show a piece of the application as a whole. React uses two types of components. Functional components and class based components. Now a days functional components are getting more attraction to developers because of their usability and less strain to work with.

4. Hooks:

Hooks are a new addition in React 16.8. Hooks are basically a JavaScript function that does certain things. Hooks in react has made the use of functional component more reliable. Hooks are used extensively in a react application and to have a proper understanding of react, one must have the knowledge of hooks. There are different hooks to work with in react such as useState, useEffect, useContext, useHistory, and a whole lot more.

5. State:

State is an instance of react component and can be defined as an observable property of the behavior of the components. When a property changes such as a count when button is clicked, this property change is stored in react in a most efficient way manipulated with react useState(). React state change is a very important topic to be familiar with. When a state is changed in a react component the DOM is re-rendered to save the changes made.

6. Props:

Props are another important concept in react. Sometimes it is required to pass data from one component to another. This can be done using props. Props stands for properties. Props are read-only data and in can be send in an unidirectional flow. values like number, strings, objects even functions can be send to another component from one component by using props. Props is a convenient way to make data interchangeable in react components.

7. Default Props:

React components share their data or information with another component by using props. But sometimes a component might not have to send props to another component. So the child component can initialize default props if it does not get any props from its parent components. The component will try to find the values from props and if the props is never sent to the component then it can use the default values or the default props inside it.

8. The Top-Level Component:

When a component is about the share its data to its sibling components, it might not be able to share the data without any state management system. The first thing it can do is to lift the state to their parent component and then manipulate the state from the sibling components as the parent will share the data by using props. This concept of Top-Level Component is much easier when we want to share the data between sibling components although for more complex work, we have to use state management systems for a more efficient way of handling.

9. Optimizing performance:

Although react uses the most efficient way to render the virtual DOM to the browser and reduces many costly operations to update the UI on state changes, there can be a slight improvement more than this of your react application . For example, use the production build. Its expected that you use the development mode when working on your app and use the production mode when deploying the app to the users. And there are a lot more ways to fasten your apps performance.

10. Conditional Rendering:

Its possible that the developer would want to show some data to the user on a certain condition. If the condition is fulfilled then the user can see the data or they might not see. This concept of conditional rendering is a must known concept for react developers. You can use the ternary operator of conditions to make the data render if the condition is fulfilled. You must remember that you can’t use the basic if else statement normally. You have to use the ternary operator must.

React is a robust, optimized and efficient way to build mobile applications, web applications, SPA’s and many more complex UI’s. The declarative way of using react makes it more reliable for developers to use this library than many of the frameworks available. To have a brief understanding of react one must have this basic core principles of this awesome library.