Study guide and cheatsheet Node.js, Express.js, TypeScript, React.js, and Next.js

Node.js

Overview: Node.js is a JavaScript runtime built on Chrome's V8 engine, enabling server-side scripting with JavaScript.

Key Features: - Non-blocking, event-driven architecture. - Package management with npm. - Cross-platform compatibility.

Basic Example: Creating a simple HTTP server:

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

Express.js

Overview: Express.js is a minimal and flexible Node.js web application framework that provides robust features for web and mobile applications.

Key Features: - Middleware support. - Routing capabilities. - Template engines integration.

Basic Example: Setting up a simple Express server:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

TypeScript

Overview: TypeScript is a superset of JavaScript that adds static typing, interfaces, and other features to enhance development.

Key Features: - Static type definitions. - Interfaces and type aliases. - Generics.

Basic Example: Defining and using an interface:

interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

const user: User = { name: 'Alice', age: 25 };
console.log(greet(user)); // Output: Hello, Alice

React.js

Overview: React.js is a JavaScript library for building user interfaces, particularly single-page applications where you can create reusable UI components.

Key Features: - Component-based architecture. - Virtual DOM for efficient rendering. - Hooks for state and lifecycle management.

Basic Example: Creating a functional component with a state hook:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

Next.js

Overview: Next.js is a React framework that enables functionality such as server-side rendering and static site generation for React applications.

Key Features: - File-based routing. - Server-side rendering (SSR) and static site generation (SSG). - API routes.

Basic Example: Creating a new page in Next.js:

1. Install Next.js:

   npx create-next-app my-next-app
   cd my-next-app
   npm run dev

2. Create a new page:

   Create a file named about.js in the pages directory:

   function About() {
    return <h1>About Page</h1>;
   }
   
   export default About;

   Access this page at http://localhost:3000/about.

Additional Resources:

• Express.js vs. Next.js vs. NestJS Cheatsheet: A comparative guide for beginners. citeturn0search1

• React + TypeScript Cheatsheets: Comprehensive guides for integrating TypeScript with React. citeturn0search2

• Next.js Cheat Sheet: An ultimate guide to Next.js features and usage. citeturn0search3

This guide provides foundational knowledge and examples to get started with each technology. For more in-depth information, refer to the official documentation and resources linked above.