The Power and Popularity of React: A Comprehensive Guide to the Must-Learn JavaScript Library

Let's face it, choosing the right JavaScript library for your project can be a daunting task. It's also important to consider which library can potentially increase your earning potential.

In this article, we'll take a deep dive into React, the most popular JavaScript UI library. You'll learn why React should be your first choice before exploring other user interface libraries such as Next.js, Vue.js, and more.

By the end of this article, you'll have a clear understanding of the benefits of learning React and how it can help you build impressive projects. So, let's get started!

React Prerequisites

• Basic knowledge of HTML & CSS
• Understanding of Javascript and ES6
• Know what is the DOM and how it works

JavaScript Power: React's Foundation

When talking about React, it's important to touch on its relationship with JavaScript. JavaScript is a client-side scripting language that developers use to create website interactions such as dynamic and conditional rendering, event handling, and data fetching.

However, JavaScript isn't specifically designed for creating user interfaces. To do that, you need to use the two main layers of any website - HTML and CSS.

This is where React comes in. With this library, you can effortlessly create user interfaces combined with their logic, all encapsulated in component blocks.

React simplifies the process of creating UIs and makes it easier for developers to work with JavaScript in creating amazing web applications. So if you're looking to build user interfaces that are both functional and visually appealing, React is the way to go!

Why React Was Created

Did you know that React is a JavaScript library that was developed by Facebook and first released on their website in 2011? Its initial purpose was to implement Facebook Ads in the news feed.

At the time, traditional technologies weren't cutting it for creating dynamic features. They were resource-intensive, difficult to maintain, and didn't provide the best user experience.

To solve this problem, Jordan Walke, an engineer at Facebook, came up with React as one of the solutions. With React, developers could create dynamic features much more efficiently and with better performance, leading to a smoother and more enjoyable user experience.

So, thanks to React, we can enjoy more efficient and dynamic web applications today!

Mixing Static and Logic with JSX

React uses a unique feature called JSX, which stands for JavaScript XML. JSX is a syntax extension to JavaScript that combines rendering logic and UI logic.

Unlike traditional web development, where HTML, CSS, and JavaScript are separated into different files, React developers create files based on a separation of concerns. The HTML markup, JavaScript logic, and styles can all be together in the same file as long as they serve the same purpose. These units are called "components," and we will discuss them in more detail later in this article.

Using JSX is quick and easy, as demonstrated in this example:

1const element = <h1 className="title">Hello, world!</h1>;

In Vanilla JS, you would need to create the same element using this code:

1const element = React.createElement('h1', { className: 'title' }, 'Hello, React!')

JSX allows you to write HTML-like syntax to create JavaScript, making it easier for developers to have an idea of what the DOM will look like. JSX

Here's a more complex example that shows how to use JSX with JavaScript expressions:

1function formatName(user) {
2  return user.firstName + " " + user.lastName;
3}
4
5function isLoggedIn {
6  // Some code to check if the user is logged in
7  // returns true or false
8}
9
10const user = {
11  firstName: "John",
12  lastName: "Doe",
13};
14
15const element = isLoggedIn() ? (
16  <h1 id="greeting" className="title">Hello, {formatName(user)}!</h1>
17) : (
18  <h1 id="greeting" className="title">Hello, Stranger.</h1>
19);

In this example, we use JavaScript functions that return values, and an object called user with 2 properties. We then conditionally attribute a value to element based on whether isLoggedIn() returns true. If it does, we display the formatted user name - otherwise, we render a different text. This is what we call ‘conditional rendering’

You can put any JavaScript expression in between these parentheses.

React's Component-Based Architecture

React is a powerful and flexible open source library that focuses on building reusable components in front-end development. The concept of component reusability is at the core of React.

A component can be thought of as a building block that has three main characteristics:

• Single-purpose code: Each component serves a specific functionality or interface in your application.
• Independence: Each component operates independently, and we will see later that each component has its own state.
• Reusability: Components can be reused across the same application and even in different applications.

To better understand the concept of component reusability, let's consider a car as an analogy.

Each component of a car is responsible for a specific function:

• The steering wheel is used to turn the wheels.
• The wheels are used to move the car.
• The turn signal lamp is used to signal a turn.
• The horn is used to alert other drivers.

Just as each car component has a specific function, each React component is designed to serve a specific purpose.

Each component in a car has its own state. For example:

• The steering wheel is turned at a 65-degree angle.
• The wheels are turning at a speed of 20km/h.
• The turn signal lamp on the right is ON and the signal lamp on the left is OFF.
• The horn is OFF.

Similarly, each React component has its own state that is separate from other components.

Lastly, React components are designed to be reusable. Just as a wheel component can be reused four times across a car, a React component can be reused across the same application and even in different applications. For example, a wheel component can be used in a motorcycle, a truck, or even a wheelchair.

By building with reusable components, developers can save time, reduce redundancy, and create applications that are more efficient and scalable.

Function VS Class Components

There are 2 ways to define a component in React:

Function

1function Welcome(props) {
2  return <h1>Hello, {props.name}</h1>;
3}

Class

1class Welcome extends React.Component {
2  render() {
3    return <h1>Hello, {this.props.name}</h1>;
4  }
5}

There are a few key difference, for example when it comes to accessing the props object. In a class-based component, you need to use the keyword this to access it, whereas in a function-based component, props is simply passed as an argument.

It's important to note that the render() method is required for class-based components, as it's responsible for rendering the component to the DOM.

Another thing to keep in mind is that the return statement can only return one parent element. So, if you need to return multiple elements, you'll need to wrap them in a Fragment to avoid any errors. The syntax for a Fragment is simply <> ... </>.

You might be wondering where are those props coming from? This is the subject of the next section

Custom Components as Markup

The whole point of creating components is to make them reusable throughout your application, just like any DOM tag.

For example, instead of defining our element like this:

1const name = "John";
2const element = <h1>Hello, {name}</h1>

We could define it this way:

1const element = <Welcome name="John" />

In this case, React recognizes the <Welcome /> tag as a user-defined component. JSX attributes and children are passed as a single object called props (short for 'properties') that we can access in the component.

In this case, the value of props is {name: "John"}.

Note that the props are read-only values, which means you cannot modify them from within the component.

Navigating the Component Life Cycle

A very important concept to understand is the component lifecycle.

A component is going through 3 phases:

• Mounting: When the component is added to the DOM
• Updating: When something is updated in the component such as a state (more on that in the next section)
• Unmounting: When the component is removed from the DOM.

You can access these 3 phases using 3 functions defined in the classe-based component:

1componentDidMount() {
2    // Component has been mounted
3}
4
5componentDidUpdate() {
6    // Component finished updating
7} 
8
9componentWillUnmount() {
10 // Component is being removed from the DOM

In function component, you can access these phases using the useEffect hook.

• componentDidMount using useEffect :

1useEffect(() => {
2    // Component has been mounted
3}, [])

Putting an empty array as the dependency of the useEffect hook will execute the code inside of it once the component has been mounted

Usage: This is the perfect place to fetch data

• componentDidUpdate using useEffect:

1useEffect(() => {
2    // Code will be executed when the dependencies value will be updated
3    // causing the component to update
4}, [dependencie]}

Usage: This is where you should put any code that should execute when a specific value is updated.

• componentDidUnmount using useEffect:

1useEffect(() => {
2    return (
3        // Any code inside the return statement of useEffect will be execute when
4        // the component is unmounting
5    )
6}, []}

Usage: This is usually where we remove any event listener that has been set on the first phase of the component lifecycle

Managing State in React

As we saw in the previous section, we can kind of manipulate data and pass it between components, but we can just read it inside a given component.

What if we want to manipulate that data? Well, you could store it in a database, or in a variable. You would then need to create specific functions to manipulate this data.

But React has a better solution: state. With state, you can easily store any type of value and it automatically creates a function with it for you to change the value of the state.

The good part? Remember our analogy of the car, each component has its own state. Meaning that each instance of your component can have a different state and you don’t have to store it anywhere. It will be reinitialized each time the component is unmount.

To give you an example, I’ve create a tiny React app using create-react-app I’m not going to detail the step as it’s out of the scope of this article.

From now on, I will assume that you are using function-based component. To create a state in React function-based component, you have to use the useState hook.

Here’s how you can use states to create a counter:

1import "./App.css";
2import { useState } from "react";
3
4function App() {
5  const [count, setCount] = useState(0);
6
7  return (
8    <div className="App">
9      <h1>Counter</h1>
10      <p>{count}</p>
11      <button onClick={() => setCount(count + 1)}>Add</button>
12    </div>
13  );
14}
15
16export default App;

In our App component, I’m defining a state. I’m getting the 2 attributes returned by useState with ES6 Array Destructuring. The first one, count is the variable that is storing the current state. setCount is the function that allows us to modify the current state.

setState function will force the component and its children to re-render and to be updated with the new state value

Mutating the state directly by assigning a new value like this count = count + 1 will not force the component to re-render which mean that the UI won’t be updated.

setState is not actually changing the value of the state, it is recreating the state in an immutable way. Immutability is one of the core principles of react, this is why you should always use setState to update the value of your state.

Global State

As your application grows larger, managing state between components can become challenging, especially if you need to share state between components that are far apart in the component tree. Imagine passing a prop from a component to its fourth-generation children through three other components that don't even use the prop - this is known as "prop drilling," and it can clutter your code.

To keep your code organized and clear, you might want to use a global state management solution. React provides a built-in Context API that you can use, or you can opt for a third-party library like Redux. These tools allow you to manage state at a higher level and provide a way for components to access the shared state without having to pass props through intermediary components. With global state management, you can keep your code more maintainable and easier to reason about.

Virtual DOM: React's Speed Secret

As mentioned in the introduction, React was designed with the goal of enhancing user experience and speeding up the process of updating the DOM.

One of the techniques used by Facebook's engineers to achieve this is called partial re-rendering. It's a simple concept that involves keeping a copy of the DOM in memory, known as the "Virtual DOM".

When there's an update, the Virtual DOM is updated first, and then it's compared with the actual DOM on the webpage. Only the components that have been changed will be re-rendered, instead of re-rendering the entire DOM. This approach is much faster and more efficient, as it minimizes the amount of work required to update the page.

Building Single-Page Apps with React

With conditional rendering, a new way of developing web applications emerged - the single page apps. Typically, when creating a website, we create a file for each page. When a user navigates from page to page, the browser sends a request to the server according to the URL requested by the user. The server then responds by sending the static HTML page that corresponds to the requested URL. This means that every time you go to a new page on the website, you have to go through this entire process again.

However, React introduces a new paradigm. You can request a single page from the server that serves as the skeleton of the application. Then, every time the user requests a new URL, React only renders the necessary components for that page instead of making another request to the server. This is why React apps are much faster than traditional websites. With React, you can create a smooth and dynamic user experience that feels like a single-page app, while still enjoying the benefits of a multi-page website.

Why Learn React?

Having a good grasp of the main concepts of React will help you understand why many JavaScript frameworks are based on it. That's why starting with React is a wise decision, as it will make it super easy to switch to Next.js or any other React-based framework.

React is also the most popular library and has the highest demand in the market. Furthermore, it's easy to learn with just a basic understanding of programming, JavaScript, and the Document Object Model (DOM).

Conclusion

I hope this article helps you understand a bit more about React and why it is so popular.

If you want to know more about it, I highly suggest having a look at their amazing documentation and watch the Honeypot documentary about React.