Before learning about React is good to understand why it exists, the problem React is solving, and why it makes frontend development easier.
A lot of time people learn tools without understanding the core concepts that make the tools great. By learning these concepts you will have a solid foundation about the tool and know what their best practices are.
This article will enlighten us on the core concepts of React, without further ado let's dive into the concepts React introduces to the marketplace.
The success of ReactJS comes down to four key things and these concepts is what I'm going to explain in this article.
What Is React?
React is a JavaScript library for building user interfaces
The Birth Of ReactJS
Before ReactJS came out in 2013, the frontend landscape was very different initially we just have basic HTML, CSS, and JavaScript.
HTML- Display the text on our webpages
CSS- Display the styles
Javascript helps us to have some interactivity on our website
When you access a webpage, the webpage makes a request to the server and it shows the contents that you are looking for, when you click a button on the webpage a request will be made to the server again and the webpage will be reloaded, this is the cycle on how things work before ReactJS was introduced.
React developed a whole new way to develop Frontend applications.
The Concepts ReactJS Introduced
- Handling the DOM by itself.
Many libraries and frameworks before ReactJS, were directly manipulating the DOM(Document Object Model) you either do it manually or you use jQuery or any other libraries that allow us to use the API in a more fashionable way.
DOM manipulation is one of the biggest performance bottlenecks. The browser has to do two intensive operations One is to change an element added to a page and two is to recalculate the layout of the page.
So React team came up with a declarative approach that says declare to me what your apps look like and I will find the best way for it to work on the DOM.
All we need to do is by declaring a Javascript object how we want the app to look and React will hold this Javascript object and find the best way to use the DOM and never allow us to touch the DOM. This approach resulted in less complexity, better code quality, and faster developer times.
- Component Architecture
React is designed around the concept of reusable components, the idea of small components that you put together to form bigger components.
Components are just simply Javascript functions that received some sort of attributes which we call props and return something that looks like HTML but inside Javascript.
The component architecture is really the key in React because it allows us to reuse and share components between projects.
For example, if you want to build a date picker, you don't have to build it from the ground up, you can Google React date picker component and use it in your projects.
- Unidirectional data flows
React uses unidirectional data flow. This means you can only transfer data from parent to child and not vice versa. The data from the parent is known as props.
This means that the child components cannot update or modify the data on their own, making sure that a clean data flow architecture is followed. This also means that you can control the data flow better.
This approach to unidirectional data flows made it easier for debugging in React.
- UI Library
React cares about the components and Virtual DOM. React only works only with the view which is the user interface. For everything else that will need in our application, we can use other modules or libraries to make them match in order to achieve what we are building.
Conclusion
These are the concepts that made React takeoff in the marketplace and it gives developers a whole new way to think about their applications and how they build them.
Thank you for reading.