Understanding React: A Comprehensive Overview

2025 4/01

2025年4月1日 2025年4月1日

React, often referred to as React.js or ReactJS, stands as a prominent free and open-source front-end JavaScript library.¹ Its central objective is to streamline the creation of user interfaces (UIs) through the utilization of reusable components.¹ This emphasis on simplifying UI development suggests a deliberate effort to address the inherent complexities often encountered in building interactive web applications. Traditionally, direct manipulation of the Document Object Model (DOM) could present challenges, leading to more intricate and potentially error-prone code. React’s component-based approach offers a structured and more manageable alternative for constructing intricate UIs.

This powerful library is actively maintained by Meta (formerly Facebook) alongside a dynamic community comprising individual developers and various companies.¹ The involvement of a major technology corporation and a thriving community signifies a robust and continuously evolving ecosystem. This provides a significant advantage for developers who choose to adopt React, as it ensures ongoing updates, bug resolutions, and the introduction of new functionalities. Furthermore, a large community translates to readily available resources, extensive support networks, and a plethora of third-party libraries that can further enhance development workflows.

React operates based on a declarative programming paradigm.² This means that developers define the desired appearance and behavior of the UI for each possible state of the application. React then takes over the responsibility of efficiently updating and rendering the necessary components whenever the underlying data changes.² This approach contrasts sharply with imperative programming, where developers must explicitly specify each step involved in manipulating the DOM to achieve the desired UI changes. The declarative nature of React simplifies the development process by allowing developers to concentrate on the intended outcome rather than the intricate steps required to achieve it. By abstracting away the direct manipulation of the DOM, React handles the complexities of efficiently updating the user interface, potentially resulting in cleaner code and a reduction in common programming errors.

The versatility of React extends to the development of various application types. It serves as a cornerstone for building single-page applications (SPAs) that offer a fluid and responsive user experience.² Moreover, through the use of React Native, developers can leverage their React knowledge to create native mobile applications for platforms like iOS and Android.⁹ Additionally, React can be employed in the development of server-rendered applications, often in conjunction with frameworks such as Next.js and Remix, which can enhance initial page load times and improve search engine optimization.² This broad applicability underscores React’s adaptability and its relevance in the contemporary landscape of web development. The ability to utilize React for both web and mobile development through React Native offers the potential for significant code reuse, leading to increased development efficiency and a more consistent user experience across different platforms.

While React provides a powerful toolkit for building UIs, its primary focus remains on the user interface and the efficient rendering of components within the DOM.² For other essential functionalities commonly required in web applications, such as managing navigation between different views (routing) and handling data flow on the client-side, React applications often rely on external libraries.² This deliberate separation of concerns allows developers the freedom to select the most appropriate tools for various aspects of their application development, fostering flexibility and preventing the library from becoming overly complex or opinionated. By concentrating on the view layer, React maintains a relatively lightweight core, enabling it to be seamlessly integrated with a diverse range of back-end technologies and other front-end libraries as needed.

The Language of React: JavaScript and JSX

React as a JavaScript Library

React fundamentally operates as a JavaScript library, not as an independent programming language akin to Python or CSS.¹¹ Instead, it represents a comprehensive collection of pre-written JavaScript code, offering a rich set of reusable functions and components specifically designed to simplify and accelerate the process of building user interfaces.¹ This distinction is crucial for developers approaching React, as it signifies that a foundational understanding of JavaScript is essential for effective utilization of the library. Because React is built upon the principles and syntax of JavaScript, developers can leverage their existing JavaScript knowledge and skills in their React projects.

The development of React applications heavily utilizes various features inherent to JavaScript, including its fundamental syntax, versatile data structures like objects and arrays, and control flow mechanisms such as loops and conditional statements.⁴ The very core of the React library is implemented using JavaScript, and developers primarily write their React code in JavaScript, often enhanced by the use of JSX.³ Given its nature as a JavaScript library, React’s capabilities and potential are intrinsically linked to the features and inherent limitations of the JavaScript language itself. This also implies that React stands to benefit directly from advancements and the introduction of new features within the JavaScript language specification, allowing it to continually evolve and adapt to the changing landscape of web development.

Introducing JSX: Syntax and Purpose

Basic JSX Syntax and Rules: JSX, which stands for JavaScript XML, is a syntax extension for JavaScript that is highly recommended for use in conjunction with React.² Its primary purpose is to provide a more intuitive and declarative way to describe the desired structure and content of the user interface directly within JavaScript code.³ Essentially, JSX allows developers to write code that closely resembles HTML markup within their JavaScript files. This approach effectively bridges the gap between the structural aspects of HTML and the dynamic logic of JavaScript, making UI development more accessible and understandable for those already familiar with HTML. By enabling the use of HTML-like syntax within JavaScript, JSX enhances code readability and facilitates a clearer visualization of the UI hierarchy directly within the component’s code.

While JSX code bears a visual resemblance to HTML, it is not directly interpreted by web browsers in the same way. Instead, during the build process of a React application, tools like Babel step in to transform this JSX code into standard JavaScript function calls, specifically calls to the React.createElement() function.³ This underlying transformation process is largely transparent to the developer, allowing them to work with the more abstract and developer-friendly JSX syntax without needing to directly manipulate the lower-level JavaScript function calls. This abstraction simplifies the development workflow and enables developers to focus more on the structure and presentation of the UI rather than the intricate details of DOM element creation. To ensure that JSX code is correctly processed, it adheres to certain fundamental rules. For instance, every JSX tag, whether it’s a standard HTML tag like <div> or a custom React component, must be properly closed. This includes self-closing tags, which must be explicitly closed with a forward slash (e.g., <img />).³ Furthermore, when returning multiple JSX elements from a component, they must be enclosed within a single parent element. This can be a standard HTML element like a <div> or a more lightweight React Fragment, denoted by empty angle brackets <></>.³ These rules ensure that the JSX is well-formed and can be accurately parsed and converted into its JavaScript equivalent. The requirement for a single parent element stems from the fact that a React component’s render method (in class components) or the function body in functional components is expected to return a single root element that encapsulates the entire UI structure of that component.

Embedding JavaScript Expressions: One of the most powerful features of JSX is its ability to seamlessly embed JavaScript expressions directly within the markup using curly braces {}.⁵ This capability is fundamental for creating dynamic and interactive user interfaces where the content displayed changes based on the application’s state or in response to user interactions.¹² By enclosing JavaScript expressions within curly braces inside JSX tags, developers can easily insert values of variables, call functions to generate dynamic content, or conditionally render different elements based on specific conditions.¹² For example, a developer might use this feature to display a user’s name stored in a JavaScript variable within a greeting message, or to show a particular component only when a certain condition is met.

JSX Attributes and Children: Attributes in JSX function similarly to attributes in standard HTML, but there are some key differences in naming conventions. Because JSX is embedded within JavaScript, certain HTML attribute names that are reserved keywords in JavaScript are written using camelCase. For example, the HTML attribute class is written as className in JSX, and the for attribute (used with <label> elements) becomes htmlFor.¹² This convention ensures compatibility with JavaScript syntax and avoids potential naming conflicts. In addition to attributes, React components can also accept children. These children can be other JSX elements, HTML tags, or even plain text, and they are passed between the opening and closing tags of a component.¹² Within the receiving component, these children are accessed through a special props object using the property name children.¹² This mechanism allows for the creation of highly reusable and composable components, where the parent component can customize the structure and content rendered by its children. For instance, a generic container component could accept various types of content as its children, providing a flexible way to structure different parts of the application’s UI.

JSX Transformation: The JSX code that developers write is not directly understood by the browser. Instead, it undergoes a transformation process. Tools like Babel play a crucial role in this by converting the JSX syntax into standard JavaScript function calls, specifically invoking the React.createElement() function.⁵ This function is the fundamental building block for creating the underlying React elements that represent the user interface. The React.createElement() function takes three primary arguments: the tag name (or the component to render), an object containing any props (attributes) to be passed to the element, and any child elements or content.¹² This transformation process is typically automated and occurs during the build step of a React application, allowing developers to work comfortably with the more expressive JSX syntax while React handles the underlying details of creating and managing the user interface.

React Grammar and Coding Principles

Fundamental Rules of React

React employs a specific set of guidelines, often referred to as the Rules of React, which are designed to promote the development of well-structured, secure, and easily maintainable applications.¹⁴ Adhering to these principles helps to prevent common pitfalls and ensures that the codebase remains understandable and adaptable over time.

Purity of Components and Hooks: A cornerstone of React development is the concept of purity in both components and Hooks.¹⁴ This means that given the same set of inputs, a component should consistently produce the same output.¹⁴ This predictability is essential for React to efficiently manage and update the user interface. Furthermore, side effects, which are operations that interact with the outside world (such as fetching data from an API or directly manipulating the DOM), should not be performed directly within the main body of a component or Hook. Instead, they should be carefully managed using the useEffect Hook in functional components or within specific lifecycle methods in class components.¹⁴ This separation ensures that the rendering logic remains focused on producing the UI based on the current data, while side effects are handled in a controlled and predictable manner. Another critical aspect of purity is the principle that props and state are immutable within the context of a single render cycle.¹⁴ This means that once props are passed to a component or the component’s state is set, they should not be directly modified. Instead, state updates in functional components should be performed using the state setter function provided by the useState Hook.¹⁴ This practice of immutability aids in tracking changes and ensures that state updates are handled in a predictable and efficient way by React.

How React Calls Components and Hooks: React takes on the responsibility of rendering components and invoking Hooks at appropriate times to optimize the user experience.¹⁴ This declarative approach means that developers describe what the UI should look like based on the application’s state, and React handles the underlying mechanisms of how to best display it. Consequently, there are specific rules regarding how components and Hooks should be used. Component functions should never be called directly in the same way as regular JavaScript functions.¹⁴ Instead, they should only be invoked within the JSX syntax. This allows React to manage the component’s lifecycle and rendering process correctly. Similarly, Hooks should only be called within the body of a React function component or a custom Hook (a JavaScript function whose name starts with “use”).¹⁴ They should not be passed around as regular values or called from standard JavaScript functions. This restriction is in place to ensure that Hooks can maintain their internal state and lifecycle correctly within the React component model.

The Rules of Hooks

Introduced in React version 16.8, Hooks are a powerful feature that allows developers to utilize React state and lifecycle features within function components.² They come with two fundamental rules that must be strictly adhered to ²:

Only call Hooks at the top level: Hooks must be called unconditionally at the very beginning of a functional component or a custom Hook. They should not be called inside any loops, conditional statements (like if or else), or nested functions.² This rule is crucial because React relies on the order in which Hooks are called during each render to correctly associate state and effects with the appropriate component instance. Calling Hooks within conditional logic or loops can lead to inconsistencies and unpredictable behavior, as the order of execution might change between renders.

Only call Hooks from React functions: Hooks should only be called from within the body of a React function component or from within a custom Hook (a JavaScript function whose name starts with “use”).² They should never be called from regular JavaScript functions.² This rule ensures that Hooks are used within the context of React’s component model and can properly access the internal mechanisms that manage component state and lifecycle. Breaking this rule can lead to errors because Hooks depend on React’s specific execution environment to function correctly.

Component-Based Architecture in React

Core Concepts of Components

React applications are fundamentally structured around a component-based architecture.¹ In this paradigm, the user interface is broken down into a collection of independent and reusable building blocks known as components.² This modular approach offers significant advantages, making it easier to develop, maintain, and test large and complex UIs. By dividing the interface into smaller, self-contained units, developers can work on different parts of the application in isolation and reuse these components across various sections of the UI, promoting code efficiency and consistency.

Components can be conceptualized as self-contained entities that encapsulate both their own data (referred to as state) and the logic responsible for rendering their visual representation (typically written in JSX).² React provides two primary ways to define these components: functional components and class components.² Understanding the distinctions between these two types is crucial for effective React development.

Functional Components: The Modern Approach

Syntax and Definition: Functional components represent a more recent and increasingly preferred approach to defining React components. They are declared using standard JavaScript functions or arrow function expressions.² These functions accept a single argument, conventionally named props (short for “properties”), which is an object containing data passed down to the component from its parent components.² The primary responsibility of a functional component is to return JSX, which describes the visual elements that should be rendered on the screen.² The inherent simplicity of functional components makes them generally easier to write, understand, and test. Their straightforward nature, being essentially JavaScript functions, often leads to more predictable behavior compared to their class-based counterparts.

Managing State with useState: A significant turning point in the evolution of functional components came with the introduction of React Hooks in version 16.8. This feature empowered functional components with the ability to manage their own internal state using the useState Hook.² The useState Hook provides a way to declare state variables directly within a functional component and returns a pair of values: the current state and a function that can be used to update that state.² This capability fundamentally changed the landscape of React development, allowing functional components to become stateful and reducing the reliance on class components for managing local data. Before the advent of Hooks, only class components had the built-in capacity to handle local state, which often limited functional components to primarily presentational roles.

Handling Side Effects with useEffect: Another crucial Hook that significantly enhanced the capabilities of functional components is the useEffect Hook.² This Hook enables functional components to perform side effects, which are actions that interact with the outside world or have effects beyond the component’s rendering. Common examples of side effects include fetching data from an API, setting up subscriptions, or directly manipulating the DOM. The useEffect Hook serves a similar purpose to lifecycle methods found in class components, providing a unified way to manage tasks associated with different phases of a component’s lifecycle, such as mounting (when the component is added to the DOM), updating (when the component re-renders due to changes in props or state), and unmounting (when the component is removed from the DOM).²¹ By utilizing dependency arrays with useEffect, developers can precisely control when the effect runs, effectively mimicking the behavior of specific lifecycle methods in class components and ensuring that side effects are handled in a controlled and efficient manner.

Class Components: A Traditional Perspective

Syntax and Definition: Class components represent a more traditional approach to defining React components, particularly prevalent in older React codebases. They are defined using ES6 classes that extend the React.Component base class provided by the React library.² A fundamental requirement for class components is the implementation of a render() method. This method is responsible for returning the JSX that describes the visual output of the component.² Class components offer a more object-oriented approach to component creation, which can be advantageous for developers with a background in object-oriented programming. The class syntax and the use of the this keyword for accessing component properties and state are characteristic features of this paradigm.

Lifecycle Methods: A defining characteristic of class components is their set of built-in lifecycle methods.² These are special methods that are automatically invoked by React at different stages of the component’s existence. These methods allow developers to execute specific code at particular times, such as after the component is initially added to the DOM (componentDidMount), when the component’s props or state are updated (componentDidUpdate), or just before the component is removed from the DOM (componentWillUnmount).³ Lifecycle methods provide fine-grained control over a component’s behavior throughout its lifespan, enabling developers to perform setup tasks, respond to changes, and clean up resources as needed.

State Management: Class components manage their internal data, known as state, using the this.state property.² This property is typically initialized within the component’s constructor method. To update the component’s state, class components use the this.setState() method.¹⁵ Calling this.setState() triggers a re-render of the component, causing its render() method to be called again and the UI to be updated based on the new state. This method provides a controlled way to modify the component’s state and ensures that React is aware of the changes, allowing it to efficiently update the DOM. Directly modifying the this.state property without using this.setState() would not trigger a re-render, leading to inconsistencies between the component’s internal state and the rendered user interface.

Functional vs. Class Components: A Comparative Analysis

Feature	Functional Components	Class Components
Syntax	Simpler, utilizes JavaScript functions	More verbose, employs ES6 classes extending React.Component
State Management	Using useState and useReducer Hooks	Using this.state and this.setState()
Lifecycle	Using useEffect and other Hooks	Using lifecycle methods (componentDidMount, etc.)
Performance	Generally better	Can be optimized but generally slightly less performant
this Keyword	Not used	Used extensively, requires careful binding
Hooks	Can use Hooks	Cannot use Hooks
Code Size	Typically smaller	Typically larger
Modern Usage	Preferred for new development	Primarily in legacy code or specific advanced cases

The landscape of React development has seen a significant shift towards functional components, particularly with the advent of Hooks.¹⁵ Their inherent simplicity, often leading to more concise and readable code, coupled with their performance advantages, makes them the favored choice for most new React projects. The ability to manage state and side effects directly within functional components using Hooks has largely eliminated the need for class components in many common scenarios. However, class components still hold relevance, especially when working with older, established codebases that heavily rely on them.¹⁵ Additionally, there might be specific, albeit less frequent, situations where the direct control offered by certain lifecycle methods in class components provides a more straightforward solution for complex logic or advanced optimizations. For instance, error boundaries, a mechanism for catching JavaScript errors within a component tree, were initially only implementable using class components.¹⁵ Nevertheless, the prevailing trend within the React community strongly favors the use of functional components with Hooks for the majority of development tasks due to their ease of use, improved performance, and overall flexibility.

The Historical Journey of React

Origins and Initial Development at Facebook

The genesis of React can be traced back to Jordan Walke, a software engineer at Meta (formerly Facebook).² Walke initially conceived and developed a prototype named “F-Bolt”, which was later rebranded as “FaxJS”.²⁵ Documentation of this early iteration can still be found in Jordan Walke’s GitHub repository.²⁵ The conceptual foundation for React was significantly influenced by XHP, an HTML component library developed for PHP.⁸ This influence suggests that the idea of building user interfaces through reusable components was already gaining traction in other development ecosystems before the emergence of React. Walke likely recognized the benefits of this component-based approach in the context of PHP’s XHP and sought to bring similar advantages to the realm of JavaScript-based UI development.

The initial deployment of React occurred within Facebook’s News Feed in 2011 ⁷, followed by its integration into Instagram in 2012.⁷ A primary driving force behind the creation of React was the need to enhance the performance of these increasingly complex and heavily used applications.⁵ The performance challenges faced by Facebook with traditional methods of DOM manipulation likely served as a catalyst for the innovative solutions that React introduced, most notably the concept of the Virtual DOM.

Key Milestones and Significant Releases

Open Source Release: A pivotal moment in React’s history was its official release as an open-source project in May 2013 at JSConf US.⁵ The initial version of React focused on enabling the creation of dynamic user interfaces and introduced JSX, a syntax extension that allowed developers to write HTML-like code directly within their JavaScript.⁸ This move to open source was instrumental in fostering a large and active community around React, which has significantly contributed to its growth and widespread adoption. The collaborative nature of open-source development has led to the creation of numerous third-party libraries and tools that extend and enhance React’s core functionalities.

Introduction of the Virtual DOM (2014): In 2014, the Virtual DOM was introduced as a core feature of React.⁵ This innovation proved to be a key factor in React’s performance优势 and a major reason for its popularity among developers. The Virtual DOM is an in-memory representation of the actual DOM. Instead of directly manipulating the browser’s DOM, which can be a slow and resource-intensive process, React first updates this virtual representation. It then compares the previous and current states of the Virtual DOM and efficiently applies only the necessary changes to the real browser DOM.² This process, known as reconciliation, significantly speeds up UI updates and results in a smoother and more responsive user experience.

React Native (2015): The announcement and subsequent open-sourcing of React Native in 2015 marked a significant expansion of React’s reach.⁹ React Native enabled developers to utilize their existing React knowledge and skills to build native mobile applications for both Android and iOS platforms using JavaScript. This development allowed for a significant degree of code sharing between web and mobile applications, leading to increased development efficiency and a more consistent look and feel across different platforms.

React Fiber (2017): A major architectural overhaul occurred in 2017 with the release of React 16, which introduced React Fiber.⁸ Fiber represents a new core architecture and rendering algorithm for React, designed to address limitations in the previous rendering system, known as Stack. Fiber enabled more efficient handling of complex updates, improved responsiveness for animations, and better error handling capabilities.⁸ It introduced the concept of incremental rendering, allowing React to break down rendering tasks into smaller, interruptible units, which improved the overall performance and smoothness of applications, especially those with intricate UI updates.

React Hooks (2019): In February 2019, React 16.8 was released, introducing React Hooks.² Hooks provided a revolutionary new way for functional components to manage their own state and handle side effects, capabilities that were previously exclusive to class components.² The introduction of Hooks significantly simplified React development, promoted the use of functional components, and offered a more direct and intuitive way to access React’s core features without the complexities often associated with class components and their lifecycle methods.

Concurrent Rendering with React 18 (2022): React 18, released in March 2022, brought forth concurrent rendering, along with automatic batching of state updates and enhanced support for server-side rendering using Suspense. Concurrent rendering allows React to work on multiple rendering tasks simultaneously, prioritizing those that are most important for maintaining a responsive user interface. This feature represents a significant step forward in React’s ability to efficiently handle complex and highly interactive applications, leading to a smoother and more seamless user experience, particularly in applications with frequent UI updates.

Introducing React Actions in React 19 (2024): The latest major release, React 19, arrived in December 2024, introducing Actions. Actions are designed to simplify state updates, especially in scenarios involving asynchronous operations. This release also brought improvements to server components and static site generation. React Actions aim to streamline the process of handling data mutations and enhance the developer experience when dealing with asynchronous tasks that result in changes to the application’s state.

Evolution and Impact on Web Development

React’s introduction of fundamental concepts like reusable components and the Virtual DOM has profoundly transformed the way developers approach the construction of web applications.⁵ It has risen to become one of the most widely adopted and highly regarded front-end JavaScript libraries, powering a vast array of successful web applications and services across numerous industries.³ The widespread success of React has also nurtured a vibrant and extensive ecosystem of third-party libraries and tools that cater to various development needs, including routing, state management, testing frameworks, and UI component libraries.⁵ The continuous evolution of React, with the introduction of features like Hooks and concurrent rendering, underscores its ongoing commitment to enhancing both the developer experience and the performance of the applications built with it.² React’s impact extends beyond simply being a technical library; it has significantly influenced the architectural patterns and development methodologies employed in modern web application development, popularizing concepts such as component-based user interfaces and declarative programming paradigms. The extensive adoption of React has resulted in a large and supportive community, comprehensive documentation, and a wealth of readily available learning resources for developers, further solidifying its position as a leading technology in the front-end development landscape.

Conclusions

React has established itself as a cornerstone of modern web development, offering a powerful and flexible approach to building user interfaces. Its foundation in JavaScript, enhanced by the intuitive JSX syntax, provides a familiar yet efficient environment for developers. The component-based architecture promotes reusability and maintainability, while the introduction of Hooks has simplified state and side effect management in functional components, making them the preferred choice for contemporary React development. The historical evolution of React, from its origins at Facebook to its continuous innovation with features like the Virtual DOM, React Native, Fiber, and concurrent rendering, demonstrates its commitment to performance and developer experience. The vibrant ecosystem surrounding React further amplifies its capabilities, providing solutions for routing, state management, and various other development needs. As React continues to evolve, it remains a crucial skill for front-end developers aiming to build dynamic and interactive web applications.