React Components and MongoDB Fundamentals

Posted on Apr 4, 2025 in Computers

What is a React Component?

A React Component is a reusable, independent piece of UI that divides the user interface into smaller, manageable parts. Each component can have its own logic, structure, and styling. Components help make applications modular and easier to maintain.

There are two main types of components in React:

Functional Components

A JavaScript function that returns JSX (HTML-like syntax) to define the UI.
Introduced as “stateless components” initially, but with React Hooks like useState and useEffect, they can now manage state and lifecycle.

Example:
Imagine a component that displays a greeting message:

function Greeting() {
  return <h1>Hello, Welcome to React!</h1>;
}

Class Components

Uses ES6 classes to define the component.
Can have lifecycle methods and its own state.
Before hooks, class components were the only way to manage state and lifecycle.

Example:
A class-based counter component:

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Key Differences:

Functional components are simpler and preferred for most cases, especially with hooks.
Class components offer more control over lifecycle but are becoming less common in newer projects.

What is MongoDB?

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format called BSON (Binary JSON). It’s designed to handle large volumes of unstructured data and offers high scalability, flexibility, and performance. Unlike traditional relational databases, MongoDB doesn’t use tables and rows — instead, it uses collections and documents, making data storage more adaptable to changing requirements.

Key Concepts in MongoDB

Database:
- A container that holds collections, similar to a database in relational systems.
- Example: A “LibraryDB” database could contain collections like “Books” and “Members.”
Collection:
- A group of related documents, similar to tables in relational databases.
- Collections are schema-less, meaning documents in the same collection don’t have to follow a fixed structure.
- Example: A “Books” collection might contain data about different books.
Document:
- The basic unit of data in MongoDB, stored in a JSON-like structure with key-value pairs.
- Documents can contain nested data and arrays, providing flexibility.
- Example of a document in the “Books” collection:
```
{
  "title": "Node.js Basics",
  "author": "Jane Doe",
  "publishedYear": 2023
}
```

MongoDB’s document-based structure makes it ideal for handling complex, dynamic, or hierarchical data in web applications, analytics, and big data projects.

Mongo Shell Commands

Create a New Database

Use the use command followed by the database name.
If the database doesn’t exist, MongoDB creates it when data is first inserted.

use LibraryDB

Create a New Collection

Use the db.createCollection() method:

db.createCollection("Books")

Alternatively, inserting the first document automatically creates the collection:

db.Books.insertOne({ title: "Node.js Basics", author: "Jane Doe" })

Find Documents

Use the find() method to retrieve documents from a collection:

db.Books.find()

Delete Documents

Use the deleteOne() method to delete a single document matching a condition:

db.Books.deleteOne({ title: "Node.js Basics" })

To delete multiple documents that match a condition, use deleteMany():

db.Books.deleteMany({ author: "Jane Doe" })

These commands form the foundation of working with MongoDB, allowing for easy database creation, data insertion, retrieval, and deletion.