MERN Stack Guide

JavaScript

Arrow Functions

A concise syntax for writing function expressions in JavaScript, introduced in ES6.

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Async/Await

Syntactic sugar built on top of Promises, making asynchronous code easier to write and understand.

// Using async/await
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Destructuring

A JavaScript expression that allows unpacking values from arrays or properties from objects into distinct variables.

// Object destructuring
const person = { name: 'John', age: 30 };
const { name, age } = person;

// Array destructuring
const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;

MongoDB

Document

A record in MongoDB, similar to a row in a relational database but with a flexible schema. Documents are stored in BSON format.

{
  "_id": ObjectId("507f1f77bcf86cd799439011"),
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com",
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
}

Collection

A grouping of MongoDB documents, equivalent to a table in a relational database but without enforcing a schema.

Aggregation Pipeline

A framework for data processing in MongoDB that allows for the transformation of documents as they pass through different stages.

db.orders.aggregate([
  { $match: { status: "active" } },
  { $group: { _id: "$customer_id", total: { $sum: "$amount" } } },
  { $sort: { total: -1 } }
])

Express.js

Middleware

Functions that have access to the request and response objects, and the next middleware function in the application's request-response cycle.

// Example middleware function
const loggerMiddleware = (req, res, next) => {
  console.log(`${req.method} ${req.path}`);
  next();
};

app.use(loggerMiddleware);

Router

A mini Express application capable only of performing middleware and routing functions.

const express = require('express');
const router = express.Router();

router.get('/users', (req, res) => {
  res.send('Get all users');
});

app.use('/api', router);

Request Object

Represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, etc.

React

Component

Independent, reusable pieces of UI that can be composed together to build complex interfaces.

// Functional component
function Welcome(props) {
  return Hello, {props.name};
}

// Class component
class Welcome extends React.Component {
  render() {
    return Hello, {this.props.name};
  }
}

JSX

A syntax extension for JavaScript that looks similar to HTML and allows you to write HTML elements in JavaScript.

const element = Hello, world!
;

Hooks

Functions that let you use state and other React features without writing a class.

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

function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
  
  return (
    
      You clicked {count} times
      
    
  );
}

Node.js

Event Loop

The mechanism that allows Node.js to perform non-blocking I/O operations despite JavaScript being single-threaded.

Module

A reusable block of code whose existence does not impact other code. Node.js uses the CommonJS module system.

// Exporting a module
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

// Importing a module
const math = require('./math');

Stream

Objects that let you read data from a source or write data to a destination in continuous fashion.

const fs = require('fs');

const readStream = fs.createReadStream('input.txt');
const writeStream = fs.createWriteStream('output.txt');

readStream.pipe(writeStream);

Web Development Dictionary