Introduction to React.js in the PERN Stack

Introduction

In the previous article, we learned how to build professional RESTful APIs using:

• Express.js

• PostgreSQL

• Controllers

• Routes

• Middleware

Now it is time to move toward the frontend part of the PERN stack using React.js.

React is one of the most popular frontend libraries in the world and is used by companies like:

• Facebook

• Instagram

• Netflix

• Airbnb

• WhatsApp Web

In this article, we will learn:

• What React.js is

• Why React is used

• JSX

• Components

• Props

• State

• Event handling

• React project structure

• Connecting frontend basics

---

What is React.js?

React is a JavaScript library used to build modern and interactive user interfaces.

It was developed by:
Meta

---

Why React is Popular

React makes frontend development:

• Faster

• Easier

• Reusable

• Dynamic

Instead of reloading the entire page, React updates only the required parts of the UI.

This improves:

• Performance

• User experience

• Speed

---

Traditional Websites vs React Applications

Traditional Website	React Application
Full page reload	Partial UI updates
Slower	Faster
Less interactive	Highly interactive
Harder to manage	Component-based

---

What is a Component?

A component is a reusable part of the user interface.

Examples:

• Navbar

• Login form

• Footer

• Sidebar

• Product card

React applications are built using multiple components.

---

Example of a Simple Component

function Welcome() {
    return <h1>Welcome to React</h1>;
}

export default Welcome;

---

Understanding the Code

Function Component

function Welcome()

creates a component.

---

Return Statement

return <h1>Welcome to React</h1>;

returns UI elements.

---

Export

export default Welcome;

allows the component to be used in other files.

---

What is JSX?

JSX stands for:

JavaScript XML

JSX allows us to write HTML-like code inside JavaScript.

---

Example of JSX

const element = <h1>Hello React</h1>;

---

Why JSX is Useful

JSX makes code:

• Easier to read

• Easier to write

• More organized

Without JSX, React code becomes difficult to understand.

---

Rules of JSX

1. Return Only One Parent Element

Correct:

return (
    <div>
        <h1>Hello</h1>
        <p>Welcome</p>
    </div>
);

Wrong:

return (
    <h1>Hello</h1>
    <p>Welcome</p>
);

---

2. Use className Instead of class

Correct:

<div className="box"></div>

because class is a reserved keyword in JavaScript.

---

Creating Your First React Project

Open terminal and run:

npx create-react-app client

Move inside folder:

cd client

Start application:

npm start

---

Understanding React Project Structure

client
│
├── public
├── src
├── package.json
└── node_modules

---

Important Folders

Folder	Purpose
public	Static files
src	Main source code
node_modules	Installed packages

---

Most Important File

src/App.js

This is the main React component.

---

Understanding App.js

Default React app:

function App() {
    return (
        <div>
            <h1>Hello React</h1>
        </div>
    );
}

export default App;

---

What are Props?

Props are used to pass data from one component to another.

Props stands for:

Properties

---

Example of Props

Child Component

function Student(props) {
    return <h1>{props.name}</h1>;
}

export default Student;

---

Parent Component

<Student name="Shivam" />

Output:

Shivam

---

Understanding Curly Braces {}

Inside JSX:

{}

is used to write JavaScript expressions.

Example:

<h1>{5 + 5}</h1>

Output:

10

---

What is State in React?

State stores dynamic data inside components.

Examples:

• Counter values

• Form data

• User login status

• API data

---

Using useState Hook

React provides:

useState()

for state management.

---

Example of useState

import { useState } from 'react';

function Counter() {

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

    return (
        <div>
            <h1>{count}</h1>

            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}

export default Counter;

---

Understanding useState

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

Part	Meaning
count	Current value
setCount	Function to update value
0	Initial value

---

Event Handling in React

React handles events using:

• onClick

• onChange

• onSubmit

---

Button Click Example

<button onClick={showMessage}>
    Click Me
</button>

---

Input Handling Example

<input
    type="text"
    onChange={(e) => console.log(e.target.value)}
/>

---

What is Virtual DOM?

React uses a concept called:

Virtual DOM

Instead of updating the real DOM directly, React:

1. Creates virtual copy

2. Finds changes

3. Updates only required elements

This improves performance significantly.

---

Advantages of React

Reusable Components

Write once and use multiple times.

---

Faster Rendering

Virtual DOM improves speed.

---

Large Community Support

Huge ecosystem and tutorials available.

---

Easy Frontend Development

React simplifies complex UI creation.

---

Common Beginner Mistakes

Forgetting export default

Wrong:

function App() {}

Correct:

export default App;

---

Using class Instead of className

Wrong:

<div class="box"></div>

Correct:

---

Not Returning JSX Properly

Wrong:

function App() {
    <h1>Hello</h1>
}

Correct:

function App() {
    return <h1>Hello</h1>;
}

---

Real-World Uses of React

React is used in:

• Social media platforms

• Admin dashboards

• E-commerce websites

• Online learning platforms

• SaaS applications

• Chat applications

---

How React Fits in the PERN Stack

In the PERN stack:

• PostgreSQL stores data

• Express.js creates APIs

• Node.js runs backend

• React displays frontend UI

Complete Flow

React Frontend
       ↓
Express API
       ↓
Node.js Server
       ↓
PostgreSQL Database

---

Building Dynamic User Interfaces

React helps create:

• Real-time updates

• Interactive forms

• Dynamic dashboards

• Responsive applications

This is why React is extremely popular in modern web development.

---

Best Practices for React Beginners

Keep Components Small

Create separate components for:

• Navbar

• Footer

• Forms

• Cards

---

Use Meaningful Names

Good:

StudentCard

Bad:

Data1

---

Practice Component Reusability

Reusable code reduces development time.

---

Learn JavaScript Properly

Strong JavaScript knowledge improves React development skills.

---

Conclusion

You have now learned the fundamentals of React.js, the frontend part of the PERN stack.

You learned:

• Components

• JSX

• Props

• State

• Event handling

• Virtual DOM

• React project structure

These concepts form the foundation of modern frontend development.

Now you are ready to connect React with your Express backend and build fully dynamic applications.