frontend

Understanding React: A Comprehensive Guide to Building Modern Web Apps

September 18, 2025

#React #JavaScript #Web Development #Frontend #UI Components #Single Page Applications

Understanding React: A Comprehensive Guide to Building Modern Web Apps

React has emerged as one of the most popular JavaScript libraries for building user interfaces, particularly for single-page applications (SPAs) where you want a fluid user experience without full page reloads. Created by Meta (Facebook) and open-sourced in 2013, React.js has transformed the way frontend developers build web applications. In this comprehensive React tutorial, we'll explore the core concepts of React, its features, and how to get started with building your own modern web applications. For backend integration, see our Backend Development Guide.

What is React?

React is a JavaScript library focused on building UI components for web applications. Its primary goal is to simplify the frontend development process by allowing developers to create reusable UI components that manage their own state. This component-based architecture makes it easy to build complex user interfaces composed of smaller, manageable pieces.

Key Features of React

Component-Based Architecture: React uses a component-based architecture, meaning that the UI is divided into reusable components. Each component manages its own state and can be composed together to create larger applications.
Virtual DOM: React employs a virtual DOM to optimize performance. Instead of directly manipulating the real DOM, React updates the virtual DOM and then reconciles it with the real DOM, minimizing changes and improving rendering speed.
Declarative Syntax: React's declarative syntax allows developers to describe what the UI should look like rather than how to achieve it. This leads to more predictable and easier-to-debug code.
JSX: React uses JSX, a syntax extension that allows developers to write HTML elements directly in JavaScript. This makes the code more readable and expressive.
Unidirectional Data Flow: In React, data flows in a single direction — from parent to child components. This unidirectional data flow makes it easier to understand how state changes affect the UI.

Getting Started with React

To start building with React, you’ll need to have a basic understanding of JavaScript and Node.js. Let’s walk through the steps to set up a new React project.

Setting Up Your Environment

Create a New React App: The React team officially deprecated Create React App in February 2025 — it's unmaintained and lacks built-in solutions for routing, data fetching, and code splitting¹. For new projects, the React docs now recommend starting with a framework such as Next.js or React Router in framework mode, or, for a lighter client-only setup like the one in this tutorial, a build tool like Vite². Open your terminal and run:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

This will create a new directory called my-app and start a development server. You can view your new React application in your browser at http://localhost:5173 (Vite's default port).

Understanding the Folder Structure

Inside the my-app directory, you’ll find several important files and folders:

index.html: Lives at the project root (not inside public/) — this is the page Vite serves, and it's where your bundled script gets injected.
src/: This is where you’ll spend most of your time. It contains your React components and styles.
public/: Static assets that should be copied as-is (favicons, robots.txt, etc.) without going through the build pipeline.
package.json: This file manages the dependencies of your project and scripts to run your application.

Core Concepts of React

Let’s delve into some of the essential concepts that make React powerful and effective for building user interfaces.

Components

Components are the building blocks of a React application. A component can be a class or a function. Here’s a simple functional component:

import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

You can use this component in your main application file (usually App.js):

import React from 'react';
import HelloWorld from './HelloWorld';

const App = () => {
  return (
    <div>
      <HelloWorld />
    </div>
  );
};

export default App;

Props

Props (short for properties) are how you pass data from one component to another. They’re read-only and allow for dynamic rendering of components. Here’s an example of how to use props:

const Greeting = ({ name }) => {
  return <h2>Hello, {name}!</h2>;
};

const App = () => {
  return <Greeting name="Alice" />;
};

State

State allows components to manage their own data. Unlike props, state is mutable and can change over time, usually in response to user actions. Here’s how you can use state in a functional component:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Counter;

Lifecycle Methods

In class components, lifecycle methods allow you to run code at specific points in a component’s life, such as when it mounts, updates, or unmounts. Here’s an example of using lifecycle methods in a class component:

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <p>Seconds: {this.state.seconds}</p>;
  }
}

export default Timer;

Hooks

Hooks are a newer addition to React (introduced in version 16.8, released February 2019) that allow you to use state and other React features without writing a class³. Common hooks include useState, useEffect, and useContext. Here’s an example using the useEffect hook to fetch data:

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

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default DataFetchingComponent;

Context

Props work well for passing data down one or two levels, but threading the same value through every component in a deep tree ("prop drilling") gets unwieldy. createContext and useContext solve this by letting you share a value — like a theme or logged-in user — with any descendant component that needs it, without passing it through every layer in between:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return <button className={`btn-${theme}`}>Current theme: {theme}</button>;
};

const App = () => {
  const [theme] = useState('dark');

  return (
    <ThemeContext.Provider value={theme}>
      <ThemedButton />
    </ThemeContext.Provider>
  );
};

export default App;

ThemedButton reads theme directly from context instead of receiving it as a prop, no matter how deeply it's nested inside App.

Building a Simple React App

Let’s put everything together and build a simple React app that displays a list of items. We’ll create a functional component that fetches data from an API and displays it in a list.

Step 1: Create the Components

First, create a new file called ItemList.js in the src directory:

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

const ItemList = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setItems(data));
  }, []);

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default ItemList;

Step 2: Integrate the Component into App

Next, modify your App.js to include the ItemList component:

import React from 'react';
import ItemList from './ItemList';

const App = () => {
  return (
    <div>
      <ItemList />
    </div>
  );
};

export default App;

Step 3: Run Your Application

Now that you’ve set up your components, run your application by executing:

npm run dev

Open your browser and navigate to http://localhost:5173. You should see a list of items fetched from the API!

Conclusion

React has revolutionized the way developers build user interfaces by introducing a component-based architecture, state management, and a powerful ecosystem of libraries and tools. Whether you're building a simple application or a complex enterprise solution, React provides the flexibility and efficiency needed to create modern web applications.

Key takeaways from this React tutorial:

React's component-based architecture promotes code reusability and maintainability
React Hooks like useState and useEffect simplify state management in functional components
The Virtual DOM provides significant performance optimizations
JSX makes frontend development more intuitive and readable

As you continue to learn and explore React, you'll find a vibrant developer community and an abundance of resources to help you along the way. Don't forget to experiment with different components, hooks, and React libraries like React Router, Redux, and Next.js to enhance your development experience. Happy coding!

Related Articles:

Recommended Courses:

React Blog — "Sunsetting Create React App" (February 14, 2025). https://react.dev/blog/2025/02/14/sunsetting-create-react-app ↩
React Documentation — "Creating a React App." https://react.dev/learn/creating-a-react-app ↩
React Blog — "React v16.8: The One With Hooks" (February 6, 2019). https://legacy.reactjs.org/blog/2019/02/06/react-v16.8.0.html ↩