gem-hunter

Click ★ if you like the project. Your contributions are heartily ♡ welcome.

• HTML Basics
• CSS Basics
• JavaScript Basics
• React Coding Practice
• React Multiple Choice Questions
• React Quick Reference
• React 19 Basics
• Next.js Basics
• Redux Basics
• Redux Quick Reference
• Jest Quick Reference
• React Best Practices
• React Unit Testing
• React Unit Testing Project
• React Project - ToDo App
• React Project - My Store App

Focus: React basics, environment setup, JSX syntax, and core component concepts.

• Introduction: What is React, Virtual DOM, unidirectional data flow, and React vs other frameworks.
• React Setup: Vite, Webpack, Babel, ReactDOM, PWA setup, and development environment configuration.
• React JSX: JSX syntax, transpilation, injection prevention, comments, and rendering patterns.

Focus: Components, props, state, hooks, events, lists, and forms.

• React Components: Stateful vs stateless, conditional rendering, StrictMode, and component patterns.
  • Functional Components: Hooks-based functional components and modern React patterns.
  • Class Components: ES6 class components, ordering, shouldComponentUpdate, and render().
  • React Lifecycle: Mounting, updating, and unmounting phases with lifecycle hooks.
• React Props: Passing data, prop types, default props, and prop drilling.
• React State: State management, setState, immutability, and state patterns.
• React Hooks: useState, useEffect, useRef, useCallback, useMemo, useReducer, and custom hooks.
• React Events: Synthetic events, event handlers, and event delegation.
• React Lists: Rendering lists, keys, and dynamic rendering patterns.
• React Forms: Controlled components, uncontrolled inputs, and form validation.

Focus: Styling, routing, API integration, context, and advanced component patterns.

• React CSS Styling: CSS modules, styled-components, inline styles, and Tailwind CSS.
• React Router: Client-side routing, nested routes, dynamic routes, and navigation guards.
• React RESTful API: Fetching data, async patterns, Axios, and error handling.
• React Context: Context API, useContext, and avoiding prop drilling.
• React Composition: Composition patterns, compound components, and render props.
• Pure Components: React.PureComponent, React.memo, and shallow comparison.
• Higher Order Components: HOC pattern, wrapping components, and cross-cutting concerns.
• React Refs: useRef, createRef, forwardRef, and direct DOM access.
• React Error Boundaries: Catching render errors, fallback UIs, and error recovery.
• Lazy Loading: React.lazy, Suspense, and code splitting strategies.

Focus: Internationalization, TypeScript, accessibility, security, and data fetching libraries.

• React Internationalization: i18n, react-intl, locale handling, and multi-language support.
• React Miscellaneous: Portals, StrictMode, profiler, and miscellaneous advanced patterns.
• React TypeScript: Typing components, hooks, props, events, and generics with TypeScript.
• React Accessibility: ARIA roles, keyboard navigation, focus management, and accessible components.
• React Security & Authentication: XSS prevention, authentication flows, JWT, and secure patterns.
• React Data Fetching Libraries: React Query, SWR, Apollo Client, and caching strategies.

Focus: Concurrent features, GraphQL, micro-frontend, real-time data, and technical leadership.

• React Concurrent Features: Concurrent mode, useTransition, useDeferredValue, and Suspense boundaries.
• GraphQL with React: Apollo Client, queries, mutations, subscriptions, and GraphQL patterns.
• Micro-frontend Architecture: Module federation, independent deployments, and micro-frontend composition.
• Real-time Data with React: WebSockets, SSE, polling, and real-time state synchronization.
• Technical Lead Role: Code reviews, architecture decisions, team mentoring, and best practices.

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application view layer.

The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. It uses virtual DOM (JavaScript object), which improves the performance of the app. The JavaScript virtual DOM is faster than the regular DOM. We can use ReactJS on the client and server-side as well as with other frameworks. It uses component and data patterns that improve readability and helps to maintain larger apps.

Reference:

• https://reactjs.org/tutorial/tutorial.html

• Virtual DOM: React maintains a lightweight copy of the actual DOM in memory. When state changes, React creates a new virtual DOM tree, compares it with the previous one (diffing), and calculates the minimal set of changes needed to update the real DOM.

• Component-Based Architecture: React apps are built from reusable components - JavaScript functions or classes that return JSX (HTML-like syntax). Each component manages its own state and props (data passed from parent).

• Reconciliation: When data changes, React uses its reconciliation algorithm to efficiently update only the parts of the DOM that actually changed, rather than re-rendering everything.

• Unidirectional Data Flow: Data flows one way - from parent to child components via props. Child components communicate back via callback functions, maintaining predictable data flow.

Major Advantages:

• Virtual DOM - React uses a Virtual DOM to track UI changes and update only the necessary elements rather than reloading the entire page, significantly boosting application speed.
• Reusable Component Architecture: Applications are built using self-contained, modular components that can be reused across different parts of a project or even in separate applications, improving maintainability.
• SEO-Friendly - Server-side rendering with Next.js improves search engine visibility
• One-Way Data Flow - Predictable data management and easier debugging
• JSX Syntax - Combines HTML and JavaScript for better readability
• React Native - Code reuse for mobile app development
• Easy Learning Curve - Simple API and good documentation

Limitations:

• Learning curve. Being not full-featured framework it is required in-depth knowledge for integration user interface free library into MVC framework.
• View-orientedness is one of the cons of ReactJS. It should be found 'Model' and 'Controller' to resolve 'View' problem.
• Not using isomorphic approach to exploit application leads to search engines indexing problems.

React emphasizes unidirectional data flow (also called "one-way data binding") because it provides a predictable, easy-to-debug, and modular way to manage how data moves through an application.

In this pattern, data is passed from parent to child components via read-only props. If a child needs to change the data, it doesn't modify it directly; instead, it triggers a callback function provided by the parent to update the "single source of truth".

Key Benefits

• Predictability: Because data follows a strict one-way path, you always know where a specific piece of state originates and what caused it to change.
• Easier Debugging: Tracing bugs becomes a linear process: you check the output, the component, and then move up the tree until you find the source of the state.
• Efficiency: React can easily determine which parts of the UI need to re-render by simply checking if props or state have changed, reducing unnecessary updates.
• Decoupling: Child components focus purely on rendering (often called "dumb" or presentational components), while parent components handle the logic and state management.
• Scalability: This pattern scales well for large apps. Tools like the React Context API or Redux extend these same unidirectional principles to global state

Example:

// Parent controls state
function Parent() {
  const [data, setData] = useState('hello');
  
  return <Child data={data} onChange={setData} />;
}

// Child receives data and callback
function Child({ data, onChange }) {
  return <input value={data} onChange={(e) => onChange(e.target.value)} />;
}

Destructuring in React.js is a JavaScript ES6 feature that allows you to extract values from arrays or properties from objects into distinct variables. In React, it is widely used to make code cleaner and more readable.

Key Uses in React:

1. Props Destructuring:

// Without destructuring
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// With destructuring
function Welcome({ name, age }) {
  return <h1>Hello, {name}, you are {age} years old</h1>;
}

2. State Destructuring with Hooks:

// Array destructuring with useState
const [counter, setCounter] = React.useState(0);
const [name, setName] = React.useState("John");

// Object destructuring with useContext
const { user, theme } = useContext(AppContext);

3. Nested Object Destructuring:

const user = {
  name: "Alice",
  address: {
    city: "New York",
    country: "USA"
  }
};

// Destructure nested properties
const { name, address: { city } } = user;
// name = "Alice", city = "New York"

4. Class Component State:

class App extends React.Component {
  render() {
    const { isLoggedIn, user } = this.state;
    return <div>{isLoggedIn ? user.name : "Guest"}</div>;
  }
}

In React, component names must start with a capital letter because of how JSX distinguishes between HTML elements and React components:

Key Reasons:

1. JSX Compilation Behavior:

• <component /> → compiles to React.createElement('component') (treated as HTML tag string)
• <Component /> → compiles to React.createElement(Component) (treated as React component)

2. Built-in vs Custom Components:

• Lowercase names refer to built-in HTML elements like <div>, <span>, <button>
• Capitalized names refer to custom React components you've defined or imported

3. Exception:

Lowercase with dot notation works: <obj.component /> compiles to React.createElement(obj.component)

Example:

//  Wrong - React treats this as HTML <mybutton> tag
function myButton() {
  return <button>Click me</button>;
}

// Using it: <myButton /> // Won\'t work as expected

//  Correct - React treats this as a component
function MyButton() {
  return <button>Click me</button>;
}

// Using it: <MyButton /> // Works correctly

React Fragments are a way to group multiple elements without adding an extra node to the browser's DOM.

Why use Fragments?

• Avoid extra DOM nodes that can affect styling and layout
• Cleaner DOM structure
• Better performance (fewer nodes to render)
• Satisfy React's requirement that components return a single element
• Adding a <div> inside elements like <table>, <tr>, or <ul> can break the browser's layout rules.

Example:

// Long syntax
import React, { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </Fragment>
  );
}

// Short syntax (more common)
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

The Virtual DOM is a programming concept where a "virtual" representation of a User Interface is kept in memory and synchronized with the "real" browser DOM by a library like ReactDOM

How it works:

1. Initial Render: React creates a lightweight tree of JavaScript objects (the Virtual DOM) that mirrors the structure of the real DOM.

2. State Change: When a component's state or props change, React creates a new Virtual DOM tree.

3. Diffing: React compares the new tree with the previous version to identify exactly what changed. This is handled by a highly efficient diffing algorithm.

4. Reconciliation: Based on the "diffs," React calculates the minimal set of changes needed and updates only those specific parts in the real DOM.

Benefits:

• Performance - Direct DOM manipulation is expensive. The Virtual DOM allows React to minimize actual DOM operations
• Efficiency - Instead of updating the entire DOM, only changed elements are updated
• Declarative - Developers describe what the UI should look like, and React handles the efficient updates

Example:

// When count changes from 0 to 1
const [count, setCount] = useState(0);

return <div>Count: {count}</div>;

React only updates the text node containing the count value, not the entire <div> element.

⚝ Virtual DOM Example

1. Document Object Model:

It a way of representing a structured document via objects. It is cross-platform and language-independent convention for representing and interacting with data in HTML, XML, and others. Web browsers handle the DOM implementation details, so we can interact with it using JavaScript and CSS.

2. Virtual DOM:

Virtual DOM is any kind of representation of a real DOM. Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. It allows to collect several changes to be applied at once, so not every single change causes a re-render, but instead re-rendering only happens once after a set of changes was applied to the DOM.

3. Shadow DOM:

Shadow DOM is mostly about encapsulation of the implementation. A single custom element can implement more-or-less complex logic combined with more-or-less complex DOM. Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.

Difference:

The virtual DOM creates an additional DOM. The shadow DOM simply hides implementation details and provides isolated scope for web components.

Virtual DOM is about performance (efficiently updating the UI), while Shadow DOM is about encapsulation (isolating component styles and structure from the rest of the page).

Note:

React uses Virtual DOM but doesn't use Shadow DOM by default.

React (or React DOM) is a JavaScript library for building web user interfaces that render to the browser's DOM.

React Native is a framework for building native mobile applications for iOS and Android using React concepts — but instead of rendering HTML to the browser, it renders native platform components (like UIView on iOS and View on Android).

How React Native works:

Your JavaScript/JSX code
         ↓
React Native Bridge (JS thread ↔ Native thread)
         ↓
Native Platform APIs → Real iOS/Android UI components

Syntax differences:

// React (Web) — renders HTML elements
import React from 'react';

function WebButton({ label, onClick }) {
  return (
    <div style={{ padding: '10px', backgroundColor: 'blue' }}>
      <button onClick={onClick}>{label}</button>
    </div>
  );
}

// React Native — renders native components (NOT HTML)
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function NativeButton({ label, onPress }) {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={onPress}>
        <Text>{label}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 10, backgroundColor: 'blue' },
});

Key differences:

What React and React Native share:

• Component model (functional components, hooks, props, state)
• Same core React APIs: useState, useEffect, useContext, useRef, etc.
• JSX syntax
• Component lifecycle behavior
• Context API, React.memo, lazy loading

Code sharing strategies:

monorepo/
├── packages/
│   ├── shared/          ← Shared business logic, hooks, utilities (no UI)
│   │   ├── useAuth.ts
│   │   └── formatDate.ts
│   ├── web/             ← React DOM components
│   └── mobile/          ← React Native components

Expo: The most common React Native development environment. Provides a managed workflow with pre-built native modules, OTA updates, and a simple build system.

npx create-expo-app my-app

React, Vue, and Angular are the three dominant front-end technologies, but they serve different purposes and follow different philosophies.

React (by Meta):

• A UI library, not a full framework — it handles the View layer only.
• Uses JSX (JavaScript + HTML together).
• Unidirectional data flow (parent → child via props).
• Relies on the ecosystem for routing (react-router), state management (Redux, Zustand, Context), and form handling.
• Highly flexible but requires assembling your own stack.
• Introduced Hooks (v16.8) to enable functional-component patterns.

Vue (by Evan You):

• A progressive framework — can be adopted incrementally.
• Uses single-file components (.vue files): HTML template, script, and style in one file.
• Supports both one-way and two-way data binding (v-model).
• Built-in routing (vue-router) and state (Vuex/Pinia) are official packages.
• Gentler learning curve than React or Angular.

Angular (by Google):

• A full-featured, opinionated framework — includes everything out of the box.
• Uses TypeScript by default.
• Two-way data binding via ngModel.
• Built-in dependency injection, routing, forms (ReactiveFormsModule), HTTP client, and testing.
• Steeper learning curve but fewer architectural decisions to make.

Comparison Table:

When to choose:

• React — large teams, flexible architecture, strong ecosystem, React Native for mobile.
• Vue — rapid prototyping, smaller teams, gentle learning curve.
• Angular — enterprise applications, large teams that want an opinionated, batteries-included solution.

Vite is a modern, fast build tool that provides a superior development experience compared to traditional bundlers. It offers instant server start, lightning-fast Hot Module Replacement (HMR), and optimized builds.

It replaces older tools like Create React App by providing a leaner, faster build process

Requirements:

• Node.js version >= 18
• Visual Studio Code Editor

Installation:

npm create vite@latest my-react-app -- --template react   #Initialize the Project
cd my-react-app
npm install   #Install Dependencies
npm run dev   #Start the Development Server

Essential Vite Commands:

npm run dev     #Starts the development server with Hot Module Replacement (HMR).
npm run build   #Creates an optimized production bundle in the /dist folder.
npm run preview #Locally previews the production build you just created.

Available Templates:

• react - React with JavaScript
• react-ts - React with TypeScript
• react-swc - React with SWC (faster compilation)
• react-swc-ts - React with TypeScript and SWC

Project Structure:

my-react-app
├── node_modules
├── public
│   └── vite.svg
├── src
│   ├── assets
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Key Differences from Create React App:

• Faster startup - Vite uses native ES modules and doesn't bundle during development
• Instant HMR - Updates reflect immediately without full page reload
• Optimized builds - Uses Rollup for production builds
• Smaller bundle sizes - Better tree-shaking and code splitting
• Modern by default - No legacy browser support overhead

Reference:

• https://vitejs.dev/guide/
• https://github.com/vitejs/vite

Vite is a modern build tool and development server with these key features:

Core Features

• Lightning-fast cold start using native ES modules
• Instant Hot Module Replacement (HMR) that stays fast regardless of app size
• No bundling during development

Optimized Production Build

• Uses Rollup for production bundling
• Pre-configured and optimized out of the box
• Code splitting and tree-shaking

Rich Features

• TypeScript support out of the box
• JSX/TSX support
• CSS pre-processors (Sass, Less, Stylus)
• PostCSS support
• Static asset handling
• JSON importing

1. ESLint:

ESLint is a popular JavaScript linter. There are plugins available that analyse specific code styles. One of the most common for React is an npm package called eslint-plugin-react.

npm install -g eslint-plugin-react

This will install the plugin we need, and in our ESLint config file, we just need a few extra lines.

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
]

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js src/**/*.jsx"
}

2. eslint-plugin-jsx-a11y:

• Focuses on accessibility issues in JSX
• Catches issues with alt text, tabindex, and other accessibility concerns
• Works alongside ESLint to ensure React components are accessible

3. Other Popular Options:

• eslint-plugin-react-hooks - Enforces Rules of Hooks
• @typescript-eslint/eslint-plugin - For TypeScript React projects
• Prettier - Code formatter that works well with ESLint
• eslint-config-airbnb - Airbnb's ESLint config includes React rules

React applications are supported by all modern web browsers. Because React uses JavaScript ES5 features as its baseline, it can be extended to older browsers with the right configuration.

Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use react-app-polyfill.

Browser Configuration:

The browserslist configuration in package.json controls which browsers are supported by determining what JavaScript transformations are applied:

Example:

// package.json

"browserslist": {
  "production": [
    ">0.2%",          // Browsers with >0.2% market share
    "not dead",       // Still maintained browsers
    "not op_mini all" // Exclude Opera Mini
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

1. Webpack (The Transpiler):

Webpack primary job is to take all your individual files (JavaScript, CSS, images) and "bundle" them into a few optimized files.

• Dependency Management: It starts from an entry point (usually index.js) and creates a dependency graph to understand how every file is connected.

• Asset Handling: It treats everything—including CSS and images—as a module, allowing you to import them directly into your JavaScript components.

• Performance: It performs optimizations like tree shaking (removing unused code), minification, and code splitting (loading only what is needed).

• Development Features: Tools like webpack-dev-server enable Hot Module Replacement (HMR), allowing you to see changes instantly without a full page refresh.

2. Babel (The Module Bundler):

Babel is a "translator" that converts modern code into a version that all browsers can understand.

• JSX Transformation: Browsers cannot natively read JSX (the HTML-like syntax in React). Babel converts JSX into standard React.createElement() calls.

• Modern JS (ES6+) Support: It transpiles newer features (like arrow functions, classes, and destructuring) into ES5 syntax for compatibility with older browsers.

• Future-Proofing: It allows developers to use experimental JavaScript features before they are officially supported by browsers

How they work together:

• You write React code with JSX and modern JavaScript
• Webpack bundles your modules and passes JavaScript files through babel-loader
• Babel transpiles JSX → React.createElement() calls and ES6+ → ES5
• Webpack outputs optimized bundles for the browser

ReactDOM is a package that provides DOM-specific methods for managing DOM elements in web applications. It serves as the bridge between React components and the browser's DOM.

ReactDOM provides the developers with an API containing the following methods

Key Methods (React 18+):

• createRoot() - Creates a React root for displaying content inside a browser DOM element. Use it to render and update your React component tree.

• hydrateRoot() - Replaces hydrate() for server-side rendering. Attaches React to existing server-rendered HTML and enables React to manage it.

• root.unmount() - Destroys a rendered React tree inside a root, cleaning up all associated resources.

• createPortal() - The createPortal() allows rendering a component into a DOM node that resides outside the current DOM hierarchy of the parent component.

Note:

ReactDOM.render(), ReactDOM.hydrate(), ReactDOM.unmountComponentAtNode(), and ReactDOM.findDOMNode() are deprecated as of React 18. Use the react-dom/client APIs instead.

Syntax:

import { createRoot, hydrateRoot } from 'react-dom/client';
import { createPortal } from 'react-dom';

const root = createRoot(container);   // createRoot()
root.render(element);                 // render()
root.unmount();                       // unmount()

hydrateRoot(container, element);      // hydrateRoot() — replaces hydrate()

createPortal(child, container);       // createPortal()

Example:

import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(<App />);

React is the core library that contains the fundamental React functionality used across all platforms (web, mobile, etc.)

ReactDOM is a separate package that provides DOM-specific methods for web applications - it's the bridge between React components and the browser's DOM.

Key Differences:

Example:

/**
 * React vs ReactDOM
 */
import React from 'react';                      // Core functionality
import { createRoot } from 'react-dom/client';  // DOM rendering

export default function App() {
  return <h1>Hello React</h1>;
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(<App />);

⚝ Try this example on CodeSandbox

A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience to users. React applications can be converted into PWAs by adding service workers, manifest files, and implementing offline capabilities.

Building a Progressive Web App (PWA) with React is mostly about adding a web app manifest, a service worker (for Offline, Caching, and updates), and meeting installability criteria (HTTPS, icons, etc).

Steps to Build a PWA with React:

1. Vite with PWA Template:

Vite offers a modern approach for building PWAs using the vite-plugin-pwa package.

# Create new React app with PWA template
npm create vite@latest my-pwa-app -- --template react
cd my-pwa-app
npm install

npm install vite-plugin-pwa -D # Install the PWA package

2. Registering the Service Worker:

The Service Worker manage tasks between browser and server, intercepting network requests, managing caching, and providing offline functionality.

Basic Service Worker Registration:

Add this code to your src/main.jsx file:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// Service Worker registration
if ('serviceWorker' in navigator) {
  // Check if browser supports Service Worker
  window.addEventListener('load', () => {
    // Execute after page is fully loaded
    navigator.s