Welcome to the React Mastery Series!

This series is designed to take you from understanding the fundamentals of React to building modern, maintainable, and production-ready applications.

Whether you're a JavaScript developer exploring React for the first time or someone looking to strengthen your frontend fundamentals, this series will help you understand not only how React works, but also why it works the way it does.

In this first article, we'll focus on the foundations:

• What React is
• Why React was created
• The problems React solves
• Declarative vs. imperative programming
• Understanding the DOM
• Single Page Applications
• The component-based architecture
• Creating your first React application
• Building your first components

Let's get started!

Table of Contents

1. What Is React?
2. Why Was React Created?
3. The Problem with Traditional DOM Manipulation
4. Declarative vs. Imperative Programming
5. What Is the DOM?
6. What Is a Single Page Application?
7. React Is a Library, Not a Framework
8. The Component-Based Architecture
9. Understanding React's Rendering Process
10. Setting Up Your React Environment
11. Creating Your First React Application
12. Understanding the Project Structure
13. Your First React Component
14. Component Composition
15. Practical Example: Building a User Profile
16. Understanding React's Mental Model
17. Common Beginner Mistakes
18. What We Learned
19. What's Next?

1. What Is React?

React is a JavaScript library for building user interfaces.

It was originally developed at Facebook, now Meta, and is used to create interactive web applications.

React allows developers to build interfaces using reusable pieces called components.

Instead of manually updating individual DOM elements whenever something changes, React lets us describe what the UI should look like based on the current data.

Consider a simple website:

Hello World

This is straightforward HTML.

Now imagine a dashboard containing:

• A navigation bar
• A sidebar
• A profile section
• A list of products
• Notifications
• Search functionality
• Interactive filters

Managing all of these elements manually can become difficult.

React helps us organize the interface into smaller, reusable components.

For example:

function App() {
return (

);
}

Each component represents a specific part of the interface.

This makes applications easier to maintain, reuse, and scale.

1. Why Was React Created?

To understand React, we first need to understand the problems developers faced when building complex interfaces.

Imagine you're building an online shopping application.

The interface contains:

• A product list
• A shopping cart
• A total price
• A checkout button

When a user adds a product to the cart, several things need to change:

1. The cart contents update.
2. The number of items changes.
3. The total price changes.
4. The UI reflects the new data.

Using traditional DOM manipulation, you might manually update each element.

const cartCount = document.querySelector(".cart-count");

cartCount.textContent = 3;

This works for simple applications.

However, imagine dozens of components depending on the same data.

Now you must carefully coordinate every DOM update.

This creates several problems:

• UI logic becomes scattered.
• DOM updates become difficult to maintain.
• Bugs become harder to track.
• Components become tightly coupled.
• Reusing UI logic becomes more complicated.

React provides a different approach.

Instead of manually updating every affected element, you update the application state and describe the UI based on that state.

React handles the necessary rendering work.

1. The Problem with Traditional DOM Manipulation

Let's build a small example using plain JavaScript.

0

Increment

JavaScript:

const countElement = document.getElementById("count");

const button = document.getElementById("increment");

let count = 0;

button.addEventListener("click", () => {
count++;

countElement.textContent = count;
});

This is perfectly valid JavaScript.

But notice what we are doing:

• Keeping track of the count manually.
• Finding the DOM element.
• Listening for an event.
• Updating the DOM manually.

For a small example, this is fine.

But imagine an application with hundreds of interactive elements.

You would need to manually synchronize:

• Application data
• DOM elements
• Event handlers
• UI states

This is where maintaining consistency becomes difficult.

React changes this approach by making the UI a function of data.

Conceptually:

Application State
↓
React Components
↓
UI

When the state changes, React determines what needs to be updated.

1. Declarative vs. Imperative Programming

This is one of the most important concepts to understand before learning React.

Imperative Programming

Imperative programming describes how to perform a task.

You provide instructions step by step.

Example:

const heading = document.createElement("h1");

heading.textContent = "Hello React";

document.body.appendChild(heading);

We explicitly tell the browser:

1. Create an element.
2. Set its text.
3. Add it to the document.

Declarative Programming

Declarative programming describes what the result should look like.

function App() {
return

Hello React

;
}

We describe the desired UI.

React handles the underlying DOM operations.

The difference

Imperative| Declarative
Describes how to do something| Describes what should happen
Requires manual DOM operations| React manages DOM updates
UI logic can become scattered| UI is described through components
Developer coordinates updates| React manages rendering

React's declarative model becomes especially powerful when the UI depends on changing data.

1. What Is the DOM?

DOM stands for Document Object Model.

When a browser loads an HTML document, it creates a structured representation of that document.

For example:

Hello

Welcome to React

The browser represents this document as a tree.

Conceptually:

Document
|
└── html
|
└── body
|
└── div
|
├── h1
|
└── p

This structure allows JavaScript to interact with the document.

For example:

document.querySelector("h1").textContent = "Updated";

This changes the DOM.

React works with the browser DOM through its rendering system.

You usually don't need to manipulate DOM elements manually when building ordinary React interfaces.

1. What Is a Single Page Application?

A Single Page Application, or SPA, is a web application that typically loads an initial HTML document and then updates its interface dynamically as users interact with it.

Traditional multi-page applications often navigate by requesting a new HTML document from the server.

In a typical SPA:

1. The browser loads the application.
2. JavaScript initializes the UI.
3. User interactions update the interface.
4. Navigation may happen without a full document reload.

For example:

User opens application
↓
Initial HTML loads
↓
JavaScript initializes
↓
React renders the UI
↓
User interacts
↓
UI updates

React is commonly used to build SPAs.

However, React is not limited to SPAs.

React can also be used with frameworks such as Next.js that support server rendering and other rendering strategies.

1. React Is a Library, Not a Framework

This distinction is important.

React focuses primarily on building user interfaces.

It provides:

• Components
• Rendering
• State
• Hooks
• UI composition

But React itself doesn't prescribe a complete solution for every application concern.

For example, React doesn't include a complete built-in routing system.

You may use additional tools:

Requirement| Common Solution
UI| React
Routing| React Router
Server rendering| Next.js or another framework
Client state| React state, Zustand, Redux Toolkit
Server state| TanStack Query
Forms| React Hook Form
Styling| CSS, Tailwind CSS, CSS Modules

You don't need all these tools when starting React.

Learn React fundamentals first.

1. The Component-Based Architecture

Components are the foundation of React.

A component is a reusable piece of UI.

For example, a website might contain:

Application
│
├── Navbar
│
├── Sidebar
│
├── Dashboard
│ ├── Statistics
│ ├── Chart
│ └── RecentActivity
│
└── Footer

Each part can be implemented as a separate component.

This approach is called component-based architecture.

Why components?

Components help us:

• Reuse UI
• Separate responsibilities
• Organize code
• Maintain applications
• Build complex interfaces from smaller pieces

Imagine building a dashboard without components.

You might end up with one enormous function containing hundreds of lines of JSX.

With components, each section can have its own logic and structure.

A component should have a clear responsibility

For example:

function Navbar() {
return

Navigation;
}

function Footer() {
return

Footer;
}

function App() {
return (
<>

Main content

</>
);
}

This is easier to understand than placing everything inside one component.

1. Understanding React's Rendering Process

At a high level, React applications follow this pattern:

State or Props Change
↓
React Renders Components
↓
React Determines Necessary Updates
↓
React Commits Updates
↓
Browser Displays the UI

Let's simplify this.

Imagine a counter displaying:

0

The user clicks a button.

The state changes to:

1

React renders the component again using the new state.

React then determines what changes are necessary in the browser DOM.

The important idea is:

You describe the UI. React manages the rendering process.

Rendering a component does not necessarily mean that React changes the DOM.

React may render a component and determine that the resulting DOM is unchanged.

We'll explore rendering and reconciliation in more detail later in this series.

1. Setting Up Your React Environment

Before creating a React application, make sure you have Node.js installed.

Node.js allows JavaScript tools to run outside the browser.

Check your versions:

node -v
npm -v

You should see version numbers.

If Node.js is not installed, download it from the official website:

https://nodejs.org

For modern React development, Vite is a common choice.

Vite provides:

• A development server
• Fast startup
• Hot Module Replacement
• Build tooling

1. Creating Your First React Application

Let's create a React project using Vite.

Run:

npm create vite@latest react-mastery

Choose:

Framework: React
Variant: JavaScript

If you want TypeScript, choose the TypeScript variant instead.

Then:

cd react-mastery
npm install
npm run dev

Vite will start a development server.

You can open the local URL displayed in your terminal.

Your application should now be running.

What is Hot Module Replacement?

Hot Module Replacement, or HMR, allows Vite to update parts of your application during development without requiring a complete page reload in many situations.

This makes the development experience faster.

For example, when you change a component, Vite can update the application while preserving certain existing state.

1. Understanding the Project Structure

A typical Vite React project looks like this:

react-mastery/
│
├── public/
│
├── src/
│ ├── assets/
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ └── main.jsx
│
├── index.html
├── package.json
└── vite.config.js

Let's understand the important files.

App.jsx

This is usually where the main application component lives.

function App() {
return

Hello React

;
}

export default App;

main.jsx

This is the entry point that connects React to the browser DOM.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App.jsx";

createRoot(document.getElementById("root")).render(



);

index.html

Vite provides an HTML document containing a root element.

React renders the application inside this element.

1. Your First React Component

Let's create a simple component.

function Welcome() {
return

Welcome to React!

;
}

export default Welcome;

This is a React function component.

Let's break it down.

function Welcome()

We define a JavaScript function named "Welcome".

return

Welcome to React!

;

The function returns JSX.

React uses this returned description to render the UI.

Now use the component in "App.jsx":

import Welcome from "./Welcome";

function App() {
return (

);
}

export default App;

Notice the syntax:

We use the component like a JSX element.

This is one of the fundamental ideas of React.

1. Component Composition

Component composition means combining smaller components to create larger interfaces.

Let's create three components.

function Header() {
return

My Application;
}

function MainContent() {
return

Welcome to the dashboard;
}

function Footer() {
return

© 2026 My Application;
}

Now compose them:

function App() {
return (
<>

</>
);
}

The final interface is created from smaller components.

This approach makes your code easier to read and maintain.

Why not create one giant component?

A giant component often becomes difficult to:

• Understand
• Debug
• Test
• Reuse
• Maintain

Breaking it into smaller components improves organization.

However, don't create a component for every single HTML element.

Components should represent meaningful pieces of UI or reusable behavior.

1. Practical Example: Building a User Profile

Let's build a small React application using multiple components.

Step 1: Create the Profile component

function Profile() {
return (

src="https://placehold.co/100"
alt="User avatar"
/>

 <h2>Hamed Farazi</h2> <p>Frontend Developer</p> <button>View Profile</button> </div> 

);
}

export default Profile;

Step 2: Create the App component

import Profile from "./Profile";

function App() {
return (

Team Members

 <Profile /> </div> 

);
}

export default App;

The "App" component uses the "Profile" component.

Step 3: Reuse the component

function App() {
return (

Team Members

 <Profile /> <Profile /> <Profile /> </div> 

);
}

Now we have three profile cards.

This demonstrates component reuse.

However, all three profiles currently display the same information.

In the next part of this series, we'll learn how to make components dynamic using Props.

1. Understanding React's Mental Model

The most important thing to understand when learning React is its mental model.

React applications are built around a few fundamental ideas:

Components describe the UI

function Greeting() {
return

Hello

;
}

Props provide inputs

function Greeting({ name }) {
return

Hello, {name}

;
}

State represents changing data

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

React renders the UI based on these inputs

Conceptually:

Props + State
↓
React Component
↓
UI

When props or state change, React can render the component again.

This is the core mental model behind React.

Instead of manually updating the interface, you describe how it should look for the current data.

1. Common Beginner Mistakes

Mistake 1: Thinking React is HTML

JSX looks like HTML, but it is JavaScript syntax transformed into JavaScript.

const element =

Hello

;

This isn't ordinary HTML.

Mistake 2: Thinking React automatically makes everything faster

React helps manage UI rendering, but it doesn't guarantee that every application will be faster than manually written JavaScript.

Performance depends on architecture, rendering behavior, and implementation.

Mistake 3: Creating one massive component

Break your UI into meaningful components.

Mistake 4: Learning advanced hooks too early

Don't begin with "useMemo", "useCallback", or complex state management.

First understand:

• Components
• Props
• State
• Events
• Rendering

Mistake 5: Memorizing syntax without understanding the mental model

The goal isn't to memorize every React API.

The goal is to understand how React describes and updates interfaces.

1. What We Learned

In this article, we covered the fundamentals of React:

• React is a JavaScript library for building UIs.
• React uses a declarative programming model.
• Components are reusable pieces of UI.
• React manages rendering and DOM updates.
• JSX allows HTML-like syntax inside JavaScript.
• React applications can be built using Vite.
• Components can be composed to create larger interfaces.
• Props and state will help make components dynamic.

These concepts form the foundation of everything else in React.

1. What's Next?

In Part 2: JSX, Props, State & Events, we'll explore the concepts that make React applications interactive.

We'll cover:

• JSX in depth
• JavaScript expressions inside JSX
• Props and destructuring
• Passing data between components
• State with "useState"
• State updates
• Event handling
• Conditional rendering
• Rendering lists
• Keys
• Practical examples

By the end of Part 2, you'll understand how to build dynamic React components instead of static interfaces.

Continue the React Mastery Series

Part 1: React Fundamentals — From Zero to Components

Part 2: JSX, Props, State & Events

Part 3: React Hooks — Complete Practical Guide

Part 4: React Forms & API Integration

Part 5: React Architecture & Best Practices

Part 6: React Performance Optimization

Part 7: React Internals — Virtual DOM, Fiber & Reconciliation

Part 8: Modern React 19 Features

Part 9: Routing & State Management

Part 10: Testing React Applications

If you're learning React, share what you're currently working on in the comments.

Let's build better React applications together.

Happy coding!

React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS