Introduction
React is a JavaScript library used to build interactive, component-based user interfaces. It focuses on creating single-page applications (SPAs) where the page updates dynamically without full reloads.
React is widely used in full-stack applications and commonly paired with:
- Node.js
- Express.js
- MongoDB
(known together as the MERN stack)
Core Concepts of React Frontend
Component-Based Architecture
- UI is broken into reusable components
- Each component manages its own logic and view
Example:
function Header() {
return <h1>Welcome to My App</h1>;
}
State and Props
- Props → pass data between components
- State → dynamic data inside a component
const [count, setCount] = useState(0);
Handling User Interaction
<button onClick={() => setCount(count + 1)}>+</button>
Fetching Data from Backend
useEffect(() => {
fetch("/api/users")
.then(res => res.json())
.then(data => setUsers(data));
}, []);
Frontend Responsibilities
- Rendering UI
- Collecting user input
- Sending requests to backend
- Displaying API responses
- Managing authentication state
Introduction to MongoDB and NoSQL Databases
What is NoSQL?
NoSQL databases are designed to store data in a flexible, non-relational format, unlike traditional SQL databases that use tables and fixed schemas.
Characteristics of NoSQL Databases
- Schema-less or flexible schema
- High scalability
- Distributed architecture
- Optimized for large datasets
What is MongoDB?
MongoDB is a document-oriented NoSQL database that stores data in JSON-like documents (BSON).
Why MongoDB is popular:
- Easy to use with JavaScript
- Flexible schema
- High performance
- Cloud-ready
- Ideal for modern web apps
MongoDB Data Model: Collections and Documents
Database
A database is a container for collections.
Example:
ecommerce_db
Collections
A collection is a group of related documents (similar to a table in SQL).
Example:
users
orders
products
Documents
A document is a single record stored as a JSON object.
Example:
{
"_id": "123",
"name": "Alice",
"email": "alice@example.com",
"age": 25
}
Key Features
- Fields can vary between documents
- Nested structures allowed
- Each document has a unique
_id
Embedded Documents
{
"name": "Order1",
"items": [
{ "product": "Laptop", "price": 800 }
]
}
CRUD Operations in MongoDB
CRUD = Create, Read, Update, Delete
Create (Insert Documents)
Insert One
db.users.insertOne({ name: "John", age: 30 })
Insert Many
db.users.insertMany([
{ name: "Alice" },
{ name: "Bob" }
])
Read (Query Documents)
Find All
db.users.find()
Find with Condition
db.users.find({ age: { $gt: 25 } })
Update Documents
Update One
db.users.updateOne(
{ name: "John" },
{ $set: { age: 31 } }
)
Update Many
db.users.updateMany(
{ age: { $lt: 18 } },
{ $set: { status: "minor" } }
)
Delete Documents
Delete One
db.users.deleteOne({ name: "John" })
Delete Many
db.users.deleteMany({ age: { $lt: 18 } })
Indexing, Aggregation, and Querying Data
Indexing in MongoDB
Indexes improve query performance by allowing fast data lookup.
Create Index
db.users.createIndex({ email: 1 })
Types of Indexes
- Single field
- Compound
- Text index
- Unique index
Querying Data
MongoDB supports powerful query operators:
| Operator | Purpose |
|---|---|
$gt | Greater than |
$lt | Less than |
$in | Match multiple values |
$and, $or | Logical conditions |
Example:
db.users.find({ age: { $gte: 18, $lte: 30 } })
Aggregation Framework
Used for data processing and analysis.
Aggregation Pipeline Stages
$match– filter documents$group– group data$sort– sort results$project– reshape output
Example:
db.orders.aggregate([
{ $match: { status: "completed" } },
{ $group: { _id: "$userId", total: { $sum: "$amount" } } }
])
Working with MongoDB Atlas (Cloud Database)
What is MongoDB Atlas?
MongoDB Atlas is a fully managed cloud database service for MongoDB.
Key benefits:
- No server maintenance
- Automatic backups
- Built-in security
- Global availability
- Scales easily
Steps to Use MongoDB Atlas
1. Create an Atlas Account
- Visit: https://www.mongodb.com/atlas
- Create a free cluster
2. Create a Cluster
- Choose cloud provider (AWS/GCP/Azure)
- Select region
- Use free tier for learning
3. Configure Security
- Create database user
- Whitelist IP address
- Enable authentication
4. Get Connection String
mongodb+srv://username:password@cluster.mongodb.net/dbname
5. Connect from Node.js
import mongoose from "mongoose";
mongoose.connect(process.env.MONGO_URI)
.then(() => console.log("MongoDB connected"))
.catch(err => console.error(err));
Atlas Features
- Performance monitoring
- Data Explorer
- Automated scaling
- Backup and restore
- Alerts and logs
React + MongoDB in a Full-Stack App
Data Flow
React UI → Express API → MongoDB → Express → React
Example:
- React form submits data
- Express receives request
- MongoDB stores document
- Response sent back to React
- UI updates
Best Practices
- Validate data before inserting
- Use indexes for frequent queries
- Never expose MongoDB credentials in frontend
- Use environment variables
- Secure Atlas access properly
Summary
- React handles frontend UI and user interaction
- MongoDB stores flexible, scalable data
- CRUD operations manage data lifecycle
- Indexing and aggregation optimize performance
- MongoDB Atlas enables cloud-based deployment
- Together they form the foundation of modern full-stack applications