React/Next.js
02-Introduction

React and Next.js Introduction

Traditional JavaScript Approach

  • In traditional web development, we used native JavaScript along with libraries like Bootstrap to create dynamic web pages. This involved directly manipulating the DOM using JavaScript methods (innerHTML, addEventListener(), etc.) and utilizing template literals and array methods to dynamically create and modify HTML elements.

This approach works for small-scale applications but becomes unmanageable for larger applications due to the complexity of maintaining and updating code

MVVM Pattern (Model-View-ViewModel)

  • Model: Represents the application's data and business logic (e.g., bank accounts). The model is independent of the user interface and is often managed by server-side code with AJAX calls.
  • View: The visual representation of the application's UI. It displays data from the ViewModel and responds to user interactions (like button clicks). The view is typically written in HTML, CSS, and JavaScript.
  • ViewModel: Acts as a bridge between the Model and the View. It retrieves data from the Model and updates the View based on user interactions. The ViewModel is responsible for handling the application's logic and state management. This separation allows for a more manageable and testable code structure.

Example: For a to-do list app:

  • Model: The list of tasks.
  • ViewModel: Methods to add or remove tasks.
  • View: The actual list displayed on the web page.

React.js

  • React is a JavaScript library for building user interfaces. It follows a component-based architecture, where UI elements are broken down into reusable components. React components are written in JSX (a syntax extension for JavaScript) and can be composed together to create complex UIs.
  • React uses a virtual DOM to efficiently update the actual DOM, reducing the number of direct DOM manipulations and improving performance.
  • Component: A reusable piece of UI (both ViewModel and View).

Next.js

  • Next.js is a React framework that simplifies the development of server-side rendered (SSR) and static websites. It provides features like automatic code splitting, server-side rendering, and optimized production builds out of the box.

Benefits of React and Next.js

  • Component-Based Architecture: Reusable components make code more modular and maintainable.
  • Virtual DOM: Efficiently updates the actual DOM, improving performance.
  • Server-Side Rendering: Faster initial page loads and better SEO.
  • Automatic Code Splitting: Optimizes bundle sizes for faster loading times.
  • Static Site Generation: Generates static HTML files for improved performance and SEO.
  • Developer Experience: Simplifies development with features like hot module reloading and automatic routing.

File Structure of a Next.js App

  1. /pages: Contains components that act as routes (e.g., index.js is the home route /).
  2. /api: Contains API route files (e.g., hello.js returns {"name":"John Doe"}).
  3. /public: Stores static assets (e.g., images, icons).
  4. /styles: Contains CSS files for styling the app.
    • globals.css: Global styles.
    • Home.module.css: CSS Modules for locally scoped styles. Note: CSS Modules allow for unique, locally-scoped class names, preventing style conflicts across files.
  • A typical Next.js app has the following file structure:
my-next-app/
├── pages/
│   ├── index.js
│   ├── about.js
│   └── contact.js
├── api/
│   └── hello.js
├── public/
│   ├── favicon.ico
│   └── logo.svg
└── styles/
    ├── globals.css
    └── Home.module.css
01-Attribute Conversion03-Component