React is an open-source JavaScript library that allows you to build user interfaces based on components.
It was developed by Facebook (now Meta) in 2013 with the goal of simplifying the development of modern, dynamic, and scalable web applications.
Unlike full frameworks like Angular, React focuses exclusively on the view layer.
Since then, it has gained immense popularity and has become one of the most popular tools for developing modern web applications.
Without being my preferred choice for development (it’s not that I don’t like it, it’s that I like others even more 💚), it’s the one I’ve had to work with the most.
And it’s also one of the ones you’ll encounter the most. So, this zone is coming up so we can talk about our beloved React.
React is Open Source and all its code and documentation are available on the official page React.dev and the project repository on GitHub - facebook/react
What is React?
As we’ve seen, React is an Open Source JavaScript library that allows us to build web applications in a declarative and component-based way.
Let’s review some of React’s most important features,
React is based on creating components that can be reused in different parts of the application 🧩.
This means user interfaces are divided into independent and reusable “pieces”, each managing its own state and logic.
This promotes modularity and makes code maintenance easier.
React uses JSX (JavaScript XML), a syntax extension of JavaScript that allows writing HTML code directly in JavaScript files.
This makes the code more readable and easier to write 📝.
React uses a virtual DOM to optimize performance. The virtual DOM is an internal representation of the browser’s DOM.
Instead of updating the real DOM every time there’s a change, React updates its virtual DOM and then synchronizes only the parts that have changed.
This (in theory, and almost always) reduces computational cost and improves application speed ⚡.
React follows a unidirectional data flow ➡️, which means data flows from parent components to child components.
Furthermore, it relies heavily on the concept of object immutability, as part of its internal management system (this is an advantage or a weakness, depending on how you want to sell it).
This facilitates debugging and tracking changes in the application.
React uses a declarative approach. This means you simply describe how the interface should look in a given state.
Under the hood, React takes care of updating the DOM (Document Object Model) when that state changes.
That makes your life as a developer easier 😊, besides eliminating many errors and improving efficiency.
What is React used for?
Basically… for everything. Although the long answer is for “building modern web applications with dynamic UIs”.
From SPA (Single Page Application) applications like Netflix or Instagram, to interactive dashboards and mobile apps with React Native.
What do you need to know?
React is a tool for making web pages. Therefore, it’s convenient to have some prior knowledge (even a little bit) of:
- HTML and CSS: To structure and style user interfaces.
- JavaScript: React is a JavaScript library, so… well, you have to know some JavaScript 😃
If that’s not your case, or if at any point you need a little refresher, I’ll leave you a link to this very nice JavaScript course 👇
Learn to program in JavaScript
Advantages of React
If React has become so popular, it’s because using it has some advantages that have earned it its fame (although there is also a certain luck factor).
Some of them are,
Easy to learn: It has a very gentle initial learning curve, and its component-based approach is intuitive.
Performance: Thanks to the Virtual DOM, React is able to update the user interface efficiently (almost always 🤭)
Active community: React has a huge and active community, which means you’ll have a vast amount of resources, tutorials, and libraries available.
It also has certain disadvantages, such as bundle size, mastering it can be complicated, or that it “hides” the standard and replaces it with its own ecosystem. But…
However, despite its initial simplicity, mastering React completely can be difficult. Furthermore, it is constantly evolving (which is good).
So whether you want to learn how to use it, improve your skills, or update yourselves because you got stuck on a version from “who knows when”, you can continue reading the course.
