Understanding React Components & JSX

React has transformed the way we build user interfaces by introducing the concept of components—reusable and isolated blocks of code that manage their own state and presentation. In this article, we will dive into the core of React's architecture, exploring how components work alongside JSX to streamline the development process. Whether you're a beginner or an experienced developer, understanding these fundamentals is crucial for crafting efficient React applications.

Learning Goals

By the end of this article, you should be able to:

• Understand what React components are and how they function.
• Build and effectively utilize React components, adhering to common naming conventions and code patterns.
• Explain the relationship between components and JSX.
• Write JSX code and understand its benefits over traditional HTML and vanilla JavaScript.
• Create React components both with and without JSX.
• Develop your first basic React apps

What are Components?

Definition and Fundamentals

Components in React are self-sufficient, reusable building blocks that manage a part of the User Interface (UI) for a React application. Each component encapsulates its own structure, behavior, and styling which can be reused throughout the application, thereby adhering to the DRY (Don't Repeat Yourself) principle. A great way to understand components is by examining a typical web application's layout. For instance, a basic website might comprise several components such as:

• Header Component: Includes elements like the navigation bar with links to different pages.
• Main Section Component: Could house sub-components like an authentication form with input fields and a submit button.
• Footer Component: Contains copyright and other generic information.

In this structure, each of these components can be developed independently and integrated into a larger application environment, showcasing React's component-based architecture.

Reusability and Composition

A key feature of React components is their reusability. Components are designed to be used multiple times throughout an application or even across different applications. For example, a 'Button' component with specific styling and functionality could be used in multiple forms across an application.

React also encourages the composition of components. Smaller components can be nested within larger components. For example, a LoginForm component might include Input components and a SubmitButton component. This hierarchical nesting helps in building complex UIs while keeping the code manageable and organized.

Why Use Components?

Components help in breaking down the complex UI into smaller, manageable pieces. Rather than managing a huge chunk of HTML or JSX code, developers can divide the UI into logical sections managed by components. This not only makes the code more maintainable but also enhances the scalability of the application.

Technical Insight

Components can be defined either as Class Components or Functional Components:

• Class Components are ES6 classes that extend from React.Component and use lifecycle methods for operations like component mounting and unmounting. (in old versions)
• Functional Components are simpler and defined as functions. They can utilize hooks like useState and useEffect to handle state and side effects, respectively.

function SubmitButton() {
  const [isSubmitted, setIsSubmitted] = useState(false);
 
  function submitHandler() {
    setIsSubmitted(true);
  }
 
  return (
    <button onClick={submitHandler}>
      {isSubmitted ? "Loading..." : "Submit"}
    </button>
  );
}

Modularity and Isolation

Each component in React is isolated, meaning it operates independently of other components. This isolation allows for easier testing and debugging as each component maintains its own state and logic. Components communicate by passing data through props, which enhances the predictability and reliability of the application.

Importing and Exporting Components

React components are typically kept in separate files to maintain cleanliness and organization of the codebase. For instance, a SubmitButton component might reside in its own file and can be imported wherever needed:

import SubmitButton from "./SubmitButton";
 
function LoginForm() {
  return (
    <form>
      <input type="text" />
      <SubmitButton />
    </form>
  );
}

This modular approach, supported by ES6 import/export syntax, simplifies project management and increases development efficiency.

What Does React Do with All These Components?

React's Component Architecture

React's architecture is fundamentally built around the concept of components, which are the reusable and isolated units that manage their own state and presentation in the application. But understanding how React uses these components to construct and manage complex UIs requires a closer look at the lifecycle and rendering process that React orchestrates behind the scenes.

Initialization and Mounting

When a React application starts, the root component (usually denoted as App) is mounted to the DOM. This process begins in the entry script of the project, typically index.js, where the React and ReactDOM libraries are imported. Here's a common setup:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
 
root.render(<App />);

This code snippet sets the stage for the entire application. The ReactDOM.createRoot() method creates a new root container where the React component tree will be attached. The root.render(<App />) method then takes the root component and renders it into the container.

Rendering Process

React's rendering process involves taking the JSX defined in components and converting it into actual DOM elements that can be placed in the web page. This process is efficient because React computes the minimal set of changes needed to update the DOM based on changes to the component's state or props.

For instance, consider the following component structure:

function Greeting() {
  return <p>Welcome to this book!</p>;
}
 
function App() {
  return (
    <div>
      <h2>Hello World!</h2>
      <Greeting />
    </div>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById("app"));
 
root.render(<App />);

In this example, App includes a Greeting component. React will evaluate the JSX in App, identify the nested Greeting component, and build a complete UI structure. This structure is then translated into a set of DOM operations to construct the web page dynamically.

The Role of react-dom

The react-dom package is essential as it acts as the bridge between React components and the actual DOM in the browser. It handles the updates to the DOM when the state of a component changes, ensuring that the user interface reflects the current state of the application accurately.

Handling Dynamic Content

React components can also dynamically generate content based on props and state, enabling interactive and dynamic user interfaces. Changes in component state trigger re-renders of the component and its children, but React efficiently updates only the parts of the DOM that have changed, rather than the entire tree.

Optimizations and Real-World Usage

In real-world applications, React's component model provides several optimizations to minimize the number of costly DOM operations required during updates. This is achieved through techniques such as virtual DOM comparison and reconciliation, where React compares the newly generated virtual DOM tree with the previous tree to determine the exact changes needed in the actual DOM.

JSX vs HTML vs Vanilla JavaScript

Introduction to JSX

JSX, or JavaScript XML, is a syntax extension for JavaScript commonly used in React development. It allows developers to write HTML-like code directly within their JavaScript files—a feature that has significantly influenced modern web development by enhancing the developer's productivity and making the code more readable.

JSX vs. HTML

Although JSX looks similar to HTML, there are several key differences:

• JavaScript Integration: JSX allows you to embed JavaScript expressions directly within the markup using curly braces ({}), which is not possible in regular HTML.
• Attribute Differences: HTML uses certain attributes like class and for, which in JSX are replaced by className and htmlFor to avoid conflict with JavaScript reserved words.
• Self-closing Tags: In HTML, tags like <img> and <br> do not require a closing tag, but in JSX, all tags must be closed, either as a self-closing tag like <img src="url" /> or with closing tags like <div></div>.

JSX vs. Vanilla JavaScript

While JSX is an extension of JavaScript, it is not part of the core JavaScript language. JSX code written by developers is transformed into JavaScript that browsers can understand, specifically through calls to React.createElement. This transformation process is managed by tools like Babel during the build process. Here's how JSX translates into vanilla JavaScript:

• JSX Element: <p>Hello World!</p>
• Vanilla JavaScript Translation: React.createElement('p', , 'Hello World!') This translation process allows React to create virtual DOM elements that can be managed efficiently, as opposed to directly manipulating the browser's DOM.

The Role of React.createElement

The function React.createElement() is crucial in the React rendering process. It takes three arguments:

1. The type of element to create (e.g., 'div', 'p').
2. A props object for passing any attributes or data.
3. Children of the component, which can be text, more React elements, or none at all. For example, a more complex JSX element like:

<a href="https://my-website.com">Visit my website</a>

translates to:

React.createElement(
  "a",
 
  { href: "https://my-website.com" },
 
  "Visit my website"
);

Building Without JSX

It is entirely possible to write React applications without using JSX by directly using React.createElement. However, this can lead to cumbersome and hard-to-read code, especially with nested or complex component hierarchies. Thus, while optional, JSX is highly recommended for its simplicity and clarity.

Understanding Virtual DOM and Real DOM Interactions

React uses the virtual DOM to optimize updates to the web page, making UI updates much more efficient. When a JSX element is converted into React.createElement calls, React maintains this structure in memory (virtual DOM). It then compares this virtual DOM with the real DOM to detect changes and updates only the necessary parts of the real DOM, minimizing performance costs.

Practical Implications for Developers

• Readability: JSX enhances the readability of the code by allowing a more declarative approach to defining the UI structure.
• Maintainability: By using JSX, developers can more easily visualize the UI components they are developing, which aligns closely with the design and layout of the application.
• Performance: Although JSX requires a build step to transform into JavaScript, this overhead is offset by the performance gains from using React's virtual DOM.

Outputting Dynamic Content in React

Introduction to Dynamic Content

In React, dynamic content refers to the capability of an application to update and display data that changes over time or in response to user interactions. Unlike the static content example <p>Hello World!</p>, dynamic content in React can change based on state, props, or context changes.

The Role of JSX in Dynamic Content

JSX plays a crucial role in the output of dynamic content in React applications. It allows developers to embed JavaScript expressions directly within the HTML-like syntax by using curly braces ({}). This powerful feature makes it straightforward to integrate dynamic content right within the UI markup.

Example of Simple Dynamic Content

Consider a simple React component that displays a user's name:

function App() {
  const userName = "Max";
 
  return <p>Hi, my name is {userName}!</p>;
}

In this example, userName is a variable containing a static value. The content dynamically reflects the value of userName within the JSX by using {userName}. Although this example uses a static variable, the structure allows for dynamic updates if userName were part of the component's state or props.

Integrating JavaScript Expressions

Within JSX, you can embed any valid JavaScript expression that returns a value. This includes variables, function calls, and operations:

• Function Call: {getMyName()} might call a function that fetches or generates a name.
• Calculations: 2 will render "2" in the JSX. It's important to note that JSX does not support statements like loops or conditional expressions directly within the curly braces. For these, you must use JavaScript's array methods or ternary expressions outside the braces or encapsulate logic in functions that return JSX.

Dynamic Lists and Keys

One common use case for dynamic content is rendering lists of items, which often come from dynamic data sources like APIs:

function TodoList({ todos }) {
 
  return (
    <ul>
      {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
    </ul>
  );
}

Here, todos is an array of todo items, and .map() is used to create an array of <li> elements for each todo. The key prop is crucial for helping React identify which items have changed, added, or removed, which enhances performance during updates.

Managing State and Reactivity

To truly make content dynamic—responsive to user actions or events—React components use state. State allows components to maintain data that should render and update the UI when the data changes. React's state management is typically handled via the useState hook in functional components or state properties in class components.

Example with State

Here's how you might make the earlier App component dynamic by allowing a user to update their name:

function App() {
 
  const [name, setName] = React.useState('Max');
 
  return (
    <div>
      <p>Hi, my name is {name}!</p>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

This example introduces an input field bound to the name state. As the user types, the name is updated, which in turn updates the content displayed in the <p> tag dynamically.

Summary and Key Takeaways

• Component-based Architecture: React's design revolves around reusable components that encapsulate functionality and facilitate code reuse.
• JSX Over HTML: JSX simplifies the development process by allowing HTML-like syntax integrated with JavaScript logic, offering a more expressive way to build UIs.
• Efficiency: React efficiently updates the DOM, changing only the necessary parts when the data changes, which optimizes performance and user experience.
• Dynamic Content: Easily manage and render dynamic content using JSX and stateful components.
• Modularity: By dividing the UI into components, React ensures code is manageable and scalable.

Embracing these concepts will not only improve your ability to work with React but also enhance your overall approach to building modern web applications. Whether you're creating a small widget or a large-scale enterprise application, the principles of components and JSX are fundamental to delivering efficient, effective UIs with React.

Test Your Knowledge!

Gauge your understanding of the key concepts covered in this article about React components and JSX by answering the following questions:

1. What is a React component and why are they used in building user interfaces?
2. Describe the difference between a class component and a functional component in React.
3. How does JSX differ from HTML and how is it processed by React?
4. Explain the purpose and usage of React.createElement() and how it relates to JSX.
5. What role does the ReactDOM.createRoot() method play in a React application?
6. How does React handle dynamic content within components using JSX?
7. What must you include in JSX to output JavaScript expressions or variables?
8. Identify the limitations of embedding JavaScript expressions within JSX. What types of expressions are not allowed?
9. What is the significance of the key prop when rendering lists of elements in React?
10. Explain how state influences the re-rendering of components in React and provide an example where state might be used to update the UI dynamically.

These questions are designed to solidify your understanding of React's component architecture, JSX, and dynamic content handling, which are crucial for developing effective and interactive web applications with React.

P.S. Want to become a better Frontend Web Engineer? 👩💻👨💻

Subscribe to the branded new CodeDancing with Milos newsletter and get two practical articles every week.

Follow me on LinkedIn.