que-es-y-como-empezar-con-react

What is and how to start with React

  • 4 min

React is an open-source JavaScript library that allows building 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 great popularity and has become one of the most popular tools for modern web application development.

react-course

Although it’s not my preferred choice for development (it’s not that I don’t like it, it’s just that I like others even more 💚), it’s the one I’ve worked with the most.

And it’s also one of the ones you’re most likely to encounter. So here comes this section for us to talk about our beloved React.

What is React?

As we have 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 the most important features of React,

React is based on the creation of components that can be reused in different parts of the application 🧩.

This means that user interfaces are divided into independent and reusable “pieces,” each of which manages its own state and logic.

This promotes modularity and makes code maintenance easier.

React uses JSX (JavaScript XML), an extension of JavaScript syntax that allows you to write 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 is 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 that data flows from parent components to child components.

Additionally, it relies heavily on the concept of object immutability, as part of its internal management system (this can be an advantage or a weakness, depending on how you want to sell it).

This makes debugging and tracking changes in the application easier.

React uses a declarative approach. This means that you simply describe how the interface should look in a given state.

Underneath, React takes care of updating the DOM (Document Object Model) when that state changes.

This makes your life easier as a developer 😊, and it eliminates many errors while improving efficiency.

What is React used for?

Basically… for everything. Although the long answer is “to build modern web applications with dynamic UIs”.

From SPA (Single Page Application) apps like Netflix or Instagram to interactive dashboards and mobile apps with React Native.

Prerequisites to learn React

Before diving into React, it’s advisable to have basic knowledge of:

  1. HTML and CSS: To structure and style user interfaces.
  2. JavaScript: React is built on JavaScript, so it’s essential to understand concepts like arrow functions, destructuring, promises, and modules.
  3. Node.js and NPM: To manage dependencies and run scripts.
  4. Code editors: Like Visual Studio Code

In other words, more or less the usual tools for any web development. But, in case you’re not familiar with any, I’ll leave some links 👇.

Advantages of React

If React has become so popular, it must be because its use has some advantages that have earned it its fame (although there is also a certain luck factor).

Some of them are,

  1. Easy learning: It has a very gentle initial learning curve, and its component-based approach is intuitive.

  2. Performance: Thanks to the Virtual DOM, React can efficiently update the user interface (almost always 🤭)

  3. Active community: React has a huge and active community, which means you’ll have a wealth of resources, tutorials, and libraries available.

It also has certain disadvantages, such as bundle size, the complexity of mastering it, or that it “hides” the standard and replaces it with its own ecosystem. But…

However, despite its initial simplicity, mastering React completely can be complicated. Moreover, it is constantly evolving (which is good).

So whether you want to learn how to use it, improve your skills, or update yourself because you were stuck on a version from “who knows when,” you can keep reading the course.