LEARNING THE FUNDAMENTAL

Essential React: Learn the basics concepts to develop High-Performance web applications

Frontend Roadmap: React Part I

Whether you’re struggling with the core concepts or simply want to strengthen your knowledge base. Today in this post, we’ll explore the fundamental features of React and how it facilitates the building of reusable components, the use of the Virtual DOM for efficient updates, and much more.

And if you’re wondering why React? Well, React is the JavaScript library that revolutionizes the way we build interactive websites. If you’re looking to expand your job opportunities in the field of web development, learning React is a smart decision. With its growing demand in the industry and its focus on creating intuitive and responsive interfaces, React provides you with the necessary tools to stand out as a developer. Its clear and organized syntax, ease of creating reusable components, and broad support community are just some of the benefits that make React a powerful choice.

Learning the concepts

React is an open-source JavaScript library (or multi-library) developed by Facebook or now called Meta.

💡 It is used for building interactive and responsive user interfaces for web applications. React focuses on building reusable components that manage their own state and efficiently update when data changes.

Below is a brief summary of the key features of React, but we’ll delve deeper into them in future articles.

Components

React is based on the concept of components, which are reusable blocks of code used to build user interfaces. Components encapsulate state and behavior, making it easier to create and maintain complex applications in an efficient and organized manner.

Virtual DOM

React uses a virtual DOM to efficiently update the browser.

You might wonder if it’s the same or similar to the DOM that you learned when you were studying HTML and JavaScript. Well, it’s similar.

The virtual DOM is a lightweight representation of the real DOM, and it allows for efficient comparisons to identify minimal changes needed and update only those parts in the actual DOM.

P.S. We’ll deep more about this concept in the next post. So for now you just need to understand the concept that englobe virtual DOM.

JSX

React uses JSX (JavaScript XML), a syntax extension that allows you to write code similar to HTML within JavaScript. JSX makes it easier to create components and combine logic and presentation in one place.

JSX stands for “JavaScript XML.” It is a syntax extension used in React. JSX allows you to write code that closely resembles HTML within your JavaScript files.

Imagine you’re building a web page and need to create a component to display a header. Instead of writing just JavaScript to create that header, with JSX, you can write code that looks like HTML. For example, you could have something like this:

const Header = () => {
  return <h1>Welcome to my Website</h1>;
};

In the above code, the line <h1>Welcome to my website</h1> is JSX. It's similar to the HTML tag <h1> used to create a header on a web page. In JSX, you can use tags like <h1>, <div>, <p>, etc., much like you would in HTML.

JSX is useful because it allows you to combine logic and presentation in one place. You can use JavaScript expressions within JSX tags to dynamically generate content. For example:

const name = "Ana";
const greeting = <p>Hi, {name}!</p>;
// Result: <p>Hi, Ana!</p>

In the above code, the variable name contains the value "Ana." Inside the <p> tag, we use curly braces {} to insert that variable and dynamically generate the greeting.

JSX gets compiled into regular JavaScript code before being executed by the browser. This means that even though you write JSX code, it ultimately becomes valid JavaScript code.

In summary, JSX is a convenient way to write code that resembles HTML within your JavaScript files in React. It allows you to combine logic and presentation in one place and makes it easier to create components in your React applications.

Hooks

Hooks were introduced in version 16.8 of React in 2019. So by this date, 2023, is a concept that you need to master in relation to creating solid projects.

They are functions that allow you to use state and other React features in functional components. Hooks eliminate the need for using classes and simplify state management and handling side effects in components.

If you have previously used componentDidMount() or shouldComponentUpdate() in React components, they are now considered obsolete because they have been replaced by hooks such as useState or useEffect, which, in my humble opinion, are much simpler to use and remember.

EXAMPLE

import React, { useState, useEffect } from 'react';

// Componente secundario
const CounterDisplay = ({ count }) => {
  return <h1>Count: {count}</h1>;
};

// Componente secundario
const CounterButton = ({ increment }) => {
  return <button onClick={increment}>Increment</button>;
};

// Componente padre o principal
const ExampleComponent = () => {

  // 1. Componentes: Definición de un componente funcional
  //    que gestiona su propio estado
  const [count, setCount] = useState(0);

  // 2. Virtual DOM: Utilización del Virtual DOM para
  //    actualizar eficientemente el DOM real
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  // 3. Unidireccionalidad de datos: El estado fluye desde
  //    el componente principal hacia los componentes secundarios
  const incrementCount = () => {
    setCount(count + 1);
  };

  // 4. JSX: Uso de JSX para combinar lógica y presentación
  return (
    <div>
      {/* Componente secundario */}
      <CounterDisplay count={count} />
      {/* Componente secundario */}
      <CounterButton increment={incrementCount} />
    </div>
  );
};
export default ExampleComponent;

In this example:

1. Components and Hooks: The functional component ExampleComponent manages their own state using the hooks useState to store and update the counter. CounterDisplay is also a functional component that shows the actual counter. Receive the counter’s value (count) as a property (count) and it shows in an element h1 . CounterButton is a functional component that represents an incremental button. Receive a function (increment) as a property (increment ) and it uses as a click event of a button.
2. Virtual DOM: The hook useEffect is used to update the document’s title (document.title) each time the counter state (count) changes. This proves that React uses the virtual DOM to update in an efficient way only the relevant part of the real DOM.
3. Unidirectional Data Flow: The counter state flows from the principal component (ExampleComponent) to the rest of the secondary components: CounterDisplay y CounterButton
4. JSX: The JSX code is used to define the component’s structure and to combine the logic (count) to the render (<h1>Count: {count}</h1> y <button onClick={incrementCount}>Increment</button>).

Technical Interview Questions

Okay! Now we’ve reached the section of potential questions you might face during a job interview. Remember that the answers can vary based on your experience and personal explanation style.

Here’s a summary of some key concepts we discussed in this post, but we’ll delve deeper into each of them in subsequent posts if you want to provide more in-depth answers.

What is React?

React is an open-source JavaScript library used to build dynamic and interactive user interfaces in web applications. Its focus on component-based development allows for organized structures across the entire application.

What is JSX?

JSX refers to the combination of JavaScript and XML. It’s the file extension used when creating components in React, allowing you to write a syntax similar to HTML and CSS alongside JavaScript code.

What is virtual DOM? and How does it differ from the real DOM?

The Virtual DOM is a lightweight representation of the actual DOM used by React to perform efficient updates in the browser. Through smart comparisons, the Virtual DOM identifies the minimal necessary changes and updates only those parts in the real DOM, improving application performance.

What are the Hooks?

Hooks are “recently” introduced functions in React that allow you to use state and other React features in functional components. Hooks like useState or useEffect replace the need for using classes in components and simplify state management and handling side effects.

What are the components of React?

In React, components are reusable blocks of code used to build user interfaces. Components encapsulate state and behavior, making it easier to create and efficiently maintain complex applications.

Get ready to shine in your next interview with this knowledge about React! Remember, as we dive deeper into each concept, you’ll be able to provide more detailed and comprehensive answers.

P.S. If you are a native Spanish speaker or learning this beautiful language, you can check out the twin post that will be in Spanish. The same concept and explanations but in another language 😉 every week.

React esencial: Aprende los conceptos básicos para desarrollar aplicaciones web de alto rendimiento