Full Stack Development — Complete Study Guide

1. What is Full Stack Development?

Full stack development is the process of designing, creating, testing, and deploying a complete web application from start to finish. It involves working with multiple layers and technologies: front-end web development (what the user sees and interacts with), back-end web development (the logic running on the server), and database development (where data is stored and retrieved).

The term describes a software engineer or developer who is comfortable working with both the front end and back end of a website or application — someone who understands, end-to-end, how every part of the system works together, not just their own slice of it.

A retail website is a good running example: users can browse or purchase items, add/delete items from a cart, or change their profile. Every one of these actions needs a front-end UI plus business logic written in the back end — this is exactly what a full-stack developer is trained to build, end-to-end.

Key points to remember

• Full stack = front-end + back-end + database, glued together as one working system.
• Full-stack developers must "deeply understand how the various parts of a website or application work together" — not just write isolated code.
• They also need to collaborate effectively on a team, since web development is usually a collaborative process.

2. What is a Full-Stack Developer, and What Do They Do?

A full-stack developer has knowledge of an entire technology stack — the complete set of technologies needed to build an end-to-end application quickly and efficiently. For example, to build an app using the MEAN stack, they must know how to work with:

N — Node.js: server-side JavaScript runtime

Responsibilities of a full-stack developer

• Help choose the right technologies for both front-end and back-end development/testing.
• Write clean code across the entire stack, following best practices of each tool used.
• Stay up to date with the latest technologies to make the best technology-usage decisions.
• Judge, in the early phases of a project, whether the chosen technologies are the right fit.

Languages full-stack developers use

They're free to use any set of compatible languages. JavaScript is especially popular because it's one of the few languages usable on both front end and back end.

It's also common to use complete technology stacks like MEAN, MERN, Ruby on Rails, LAMP for faster, more efficient development with an easier learning curve.

3. Front-end vs Back-end vs Full-stack Developers Comparison

Applications needing higher scalability and more complex workflows require broader skill sets and team collaboration — front end may be handled by a UI team, back end by another. Full-stack developers step in where an individual is required to handle both sides of a feature.

4. Is a Software Engineer the Same as a Full-Stack Developer? Comparison

5. Advantages and Disadvantages of Full Stack Development

6. 3-Tier Architecture ⭐

In a 3-tier application, code for each area of responsibility is cleanly split into three separate layers/tiers.

Important note: the presentation layer has no direct communication with the data access layer — it can only talk to the business layer. Also, you should not assume the whole app is built from just one component per layer:

• A separate component should exist in the Presentation layer for each user transaction.
• A separate component should exist in the Business layer for each business entity (database table).
• A separate component should exist in the Data Access layer for each supported DBMS.

Because of this structure, you can swap one layer's component without touching the others: change the UI to output HTML, PDF, or CSV; change the data access component to switch between MySQL, Oracle, or SQL Server; or update business rules — all independently. This also gives reusability: one Business-layer component can be shared by several Presentation-layer components.

The Rules of 3-Tier Architecture ⭐ (frequently asked)

1. Code for each layer must be in separate files, maintainable separately (possibly by separate teams).
2. Each layer may contain only the logic that belongs to it — business logic only in Business layer, presentation logic only in Presentation layer, data access logic only in Data Access layer.
3. Presentation layer can only receive requests from / return responses to an outside agent (usually a person, sometimes another piece of software).
4. Presentation layer can only send requests to / receive responses from the Business layer — it cannot directly access the database or Data Access layer.
5. Business layer can only receive requests from / return responses to the Presentation layer.
6. Business layer can only send requests to / receive responses from the Data Access layer — it cannot access the database directly.
7. Data Access layer can only receive requests from / return responses to the Business layer — it cannot issue requests to anything except the DBMS it supports.
8. Each layer must be totally unaware of the inner workings of the other layers (database-agnostic, presentation-agnostic).

Skills required per layer

7. Popular Web Development Stacks

Different stacks exist to handle different tasks in web app development and operations.

1. LAMP Stack

Linux (OS) + Apache (Web Server) + MySQL (Database) + PHP (Language). One of the first open-source stacks; efficiently handles dynamic pages. Components are swappable (Windows→WAMP, macOS→MAMP; PHP can be swapped for Perl/Python). Used by: Wikipedia, Yahoo, Etsy, Shopify, WordPress, Magento.

2. MEAN Stack

MongoDB + Express.js + Angular + Node.js. An end-to-end JavaScript stack — a single language across the whole stack, enabling code reuse. All components are free/open-source, ideal for cloud hosting (flexible, scalable, extensible), and the database scales on demand. Used by: Google, Microsoft, IBM, Amazon, Uber, PayPal, LinkedIn.

3. MERN Stack

Same as MEAN but Angular → React. React is popular for building high-end, single-page apps with interactive UI, uses JSX and a Virtual DOM. React is a library, not a framework, so developers may need third-party services for extra functionality. Used by: Meta, Tesla, GoDaddy, Walmart, Shutterfly, Under Armour, Accenture, Philips, Airbnb, Netflix, Mozilla.

4. Ruby on Rails (RoR)

Server-side web framework written in Ruby, MIT-licensed. Follows the MVC (model-view-controller) pattern, offers seamless DB table creation, migrations, scaffolding of views for rapid development. Encourages JSON/XML for data transfer, HTML/CSS/JS for UI. Used by: SlideShare, Airbnb, CrunchBase, Bloomberg, Dribble, Shopify, GitHub.

5. .NET Stack

Open-source developer platform (tools, languages, libraries) for scalable, high-performing desktop/web/mobile apps that run natively across OSes (Linux, macOS, Windows, iOS, Android). Supported languages: C#, F#, Visual Basic. Known for ease of development, code reusability, strong built-in security.

6. Python-Django Stack

Django is a high-level Python web framework encouraging rapid development with a clean, pragmatic design. Often combined with Apache + MySQL for server-side dev. Supports low-code development and can handle rising traffic/API load.

7. Flutter Stack (mobile)

Open-source Google framework for building multi-platform apps from a single codebase, powered by the Dart language. Can pair with Firebase on the back end for scalability.

8. React Native Stack

JavaScript framework (based on React) for building native iOS and Android apps, written with a mix of JS and XML markup. Renders using real mobile UI components (so apps look truly native) and allows up to 100% code reuse across platforms.

9. Java Enterprise Edition (Java EE)

Enterprise platform with features like distributed computing and web services, run on application/microservers. De-facto standard for secure, robust, portable multi-platform apps/services — ideal for e-commerce, accounting, banking systems.

10. Serverless Stack

Lets developers focus purely on application code instead of infrastructure. Leverages Functions-as-a-Service (FaaS) like AWS Lambda, Google Cloud Functions, Azure Functions. Highly cost-effective (pay only for what you use) and auto-scales during traffic spikes.

8. JSON and its Usage in Web Applications

JSON (JavaScript Object Notation) is an open standard, lightweight, text-based format designed explicitly for human-readable data interchange. It is language-independent — supported by almost every programming language, framework, and library.

• Data is represented as key-value pairs.
• Curly braces { } hold objects; a colon separates each key from its value; commas separate pairs.
• Square brackets [ ] hold arrays; values are comma-separated.

Key facts

Features of JSON

Simplicity Openness Self-Describing Internationalization Extensibility Interoperability

Why use JSON? (JSON vs XML) Comparison

JSON Data Types

JSON Object

{"name" : "Jack", "employeeid" : 001, "present" : false}

JSON Array of Objects

{"employees":[
 {"name":"Ram", "email":"ram@gmail.com", "age":23},
 {"name":"Shyam", "email":"shyam23@gmail.com", "age":28}
]}

JSON Multidimensional Array

[
 [ "a", "b", "c" ],
 [ "m", "n", "o" ],
 [ "x", "y", "z" ]
]

JSON Comments

JSON does not officially support comments (it is not part of the standard). A common workaround is adding an extra attribute, e.g. "comments": "He is a nice man", which is simply treated as a normal key by parsers.

9. REST APIs ⭐⭐

A. Understanding REpresentational State Transfer (REST)

REST is an architectural style providing standards between computer systems on the web, making it easier for systems to communicate. RESTful systems are stateless and separate the concerns of client and server.

B. Main Constraints of a RESTful API

1. Separation of Client and Server — client and server implementations are independent; neither needs to know how the other works internally, as long as they agree on the message format. This improves flexibility across platforms, improves scalability (system's ability to handle growing users/transactions/data), and lets each side evolve independently. Different clients hitting the same REST endpoint get the same actions and responses.
2. Statelessness — the server does not need to know the client's state, and vice versa. Every message can be understood on its own, without needing to see previous messages. Enforced through the use of resources (nouns of the web — objects/documents/things) rather than commands.
3. Cacheability — server responses explicitly indicate whether they're cacheable, letting clients cache responses and reduce repeated requests, improving performance.
4. Uniform Interface — broken into 4 sub-constraints:
   • Identification of Resources — resources identified by unique URIs.
   • Resource Manipulation through Representations — clients interact with representations (XML/JSON), not the resource itself.
   • Self-Descriptive Messages — each message includes all information needed to process it (e.g. media type).
   • HATEOAS (Hypermedia As The Engine Of Application State) — server provides hypermedia links guiding the client to related resources.

C. Communication Between Client and Server

Making Requests — a request generally consists of:

1. An HTTP verb — defines the type of operation
2. A header — passes info about the request (e.g. Accept field)
3. A path to a resource
4. An optional message body with data

HTTP Verbs

Headers & Accept parameters (MIME types)

The client's request header includes an Accept field specifying content types it can receive, so the server doesn't send unusable data. MIME types = type/subtype.

GET /articles/23
Accept: text/html, application/xhtml

Paths

Requests must contain a path to the resource. Conventionally the first part of the path is the plural form of the resource, keeping nested paths simple, e.g.:

fashionboutique.com/customers/223/orders/12

— order 12 belonging to customer 223. A POST to /customers (collection) needs no id (server generates it); GET/DELETE on a single resource needs :id appended.

Sending Responses — Content Types

When the server sends data back, it must include a Content-Type header describing the payload — this should be one of the types the client listed in its Accept field.

GET /articles/23 HTTP/1.1
Accept: text/html, application/xhtml

--- server responds ---
HTTP/1.1 200 (OK)
Content-Type: text/html

Response / Status Codes ⭐

1. Responsive Web Design

Responsive Web Design (RWD) makes web pages render correctly on various device screen sizes without cutting short or distorting content — it looks appropriate, suitable, and well-placed on desktop, tablet, and smartphone alike. It uses HTML and CSS to resize, hide, shrink, enlarge, or move content so it looks good on any screen.

A. Setting the Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• name="viewport" — this meta tag relates to viewport settings.
• width=device-width — viewport width matches the device's screen width (responsive to device width).
• initial-scale=1.0 — sets the initial zoom level (no zoom on load).

Without this tag, the browser renders the page at a "desktop" width and then shrinks it to fit — causing tiny, hard-to-read text. With it, the browser renders width == device width directly, avoiding the annoying zoom-in/zoom-out mobile users used to experience.

B. How to Make Images Responsive

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

C. Responsive Text Size — the "vw" unit

vw = viewport-width. 1vw = 1% of the viewport's width. If the viewport is 100cm wide, 1vw = 1.0cm. Using vw makes font size scale directly with the browser window.

<h1 style="font-size:10vw;">Here size is 10vw.</h1>
<p style="font-size:6vw;">Here size is 6vw.</p>

2. Media Queries

Media queries are a CSS feature that let you apply styles conditionally based on the characteristics of the device/browsing environment — screen size, resolution, orientation, etc. — enabling truly responsive designs.

@media media_type and (media_feature) {
  /* CSS rules to apply when conditions are met */
}

• @media — keyword starting a media query.
• media_type — screen (computer screens), print (printed pages), speech (screen readers), etc.
• media_feature — max-width, min-width, orientation, resolution, etc.

@media screen and (min-width: 600px) {
  body { background-color: #fff; }
  h1 { font-size: 2em; }
}
@media screen and (min-width: 1200px) {
  h1 { font-size: 2.5em; }
}

Breakpoints

A breakpoint is the specific value of a media feature (e.g. screen width) at which the styles inside that media query start applying. In the example above, min-width:600px and min-width:1200px are two breakpoints — the layout/style changes at those exact widths. Breakpoints are usually chosen around typical device categories: mobile, tablet, desktop — but the exact values depend on your project's design needs.

3. HTML5 Features

HTML5 significantly enhances web development with new semantic elements, improved multimedia/graphics support, real-time communication, and features like local storage and geolocation.

1. Audio & Video Tags

<video width="300" height="200" controls autoplay>
  <source src="./dog.mp4" type="video/mp4" />
</video>
<audio controls>
  <source src="dog.mp3" type="audio/mp3">
</audio>

width/height set dimensions; controls adds play/pause buttons; src provides the media URL; type specifies the media type.

2. Header

Contains introductory content — headings, logos/icons, search form, navigation, author info.

<header>
  <a href="...">Technology</a> | <a href="...">Data Science</a>
</header>

3. Footer

Defines the footer of a document/section — author, copyright, contact info, sitemap, back-to-top links. A document can have more than one footer element.

<footer>
  <p>Posted by: Deepali Sharma</p>
</footer>

4. Figure & Figcaption

Insert an image with a caption; <figcaption> describes the image.

<figure>
  <img src="red_tulips.jpg" alt="Red Tulips">
  <figcaption>Red Tulips in a Garden</figcaption>
</figure>

5. Canvas Tag

Lets you draw graphics/images on the fly using JavaScript — paths, boxes, circles, images, etc. Has two attributes: width and height.

<canvas id="Canvas1" width="400" height="100" style="border:2px solid;"></canvas>

6. Mark

Highlights a particular piece of text of special interest.

<p>Grow your skillset with <mark>Shiksha Online.</mark></p>

7. Progress Tag

Shows the progress of a task. Its value updates dynamically via JavaScript.

<progress value="55" max="100"></progress>

8. Geolocation API

A standard web API letting web apps request the user's location. Uses navigator.geolocation.getCurrentPosition(successCallback, errorCallback). Relies on a combination of GPS, Wi-Fi positioning, and cell-tower triangulation.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError);
}
function showPosition(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
}

9. Local Storage

A simple key-value storage mechanism in the browser, accessed via JavaScript APIs. Useful for offline apps — reduces transactions with the backend server (faster app), but has limited storage space.

localStorage.setItem("userData", userInput);   // save
var storedData = localStorage.getItem("userData"); // retrieve

10. Drag and Drop API

Lets you grab a DOM element and drop it into a different location. To make an element draggable, set draggable="true".

<div id="dragElement" draggable="true" ondragstart="dragStart(event)">Drag me!</div>
<div id="dropZone" ondragover="allowDrop(event)" ondrop="drop(event)">Drop here!</div>

<script>
function dragStart(event){ event.dataTransfer.setData("text/plain", event.target.id); }
function allowDrop(event){ event.preventDefault(); }
function drop(event){
  event.preventDefault();
  var id = event.dataTransfer.getData("text/plain");
  document.getElementById("dropZone").appendChild(document.getElementById(id));
}
</script>

4. Bootstrap — Complete ⭐⭐⭐

What is Bootstrap?

Bootstrap is an open-source front-end framework developed by Twitter. It's a collection of HTML, CSS, and JavaScript tools/components that help developers build responsive and mobile-first web applications. It simplifies designing/styling pages via pre-built, customizable components and styles.

Key Features of Bootstrap

1. Responsive Design — mobile-first approach; adapts from small phones to large desktops.
2. Grid System — a responsive 12-column layout for flexible, dynamic designs.
3. CSS Components — pre-styled navbars, buttons, forms, typography, and more.
4. JavaScript Plugins — modals, carousels, tooltips, popovers, etc.
5. Customization — highly customizable via source files; integrates with Sass/Less.
6. Community & Documentation — large active community, comprehensive official docs, third-party themes.
7. Cross-Browser Compatibility — consistent, reliable performance across browsers.

What's New in Bootstrap 5 ⭐ (very frequently asked)

Bootstrap 5 Installation — Two Methods Comparison

<!-- A. CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- B. Offline (after downloading) -->
<link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.css">

Bootstrap 5 Containers ⭐⭐ (core layout building block)

Containers align and contain your content within a device/viewport. They're the most fundamental layout element used with the grid system — mostly for enclosing content with padding, and centering fixed-width content horizontally.

Breakpoint width table ⭐ (memorize)

<!-- container: fixed width, centered -->
<div class="container bg-info">...</div>

<!-- container-fluid: always full width -->
<div class="container-fluid bg-info">...</div>

<!-- responsive container: fluid until md breakpoint -->
<div class="container-md bg-danger">...</div>

5. Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of pre-designed utility classes to build user interfaces. Unlike Bootstrap, Tailwind does not come with pre-built components (like ready navbars/buttons) — instead it offers many small, low-level utility classes that you compose yourself to create fully custom designs.

Key Features of Tailwind CSS

1. Utility-First Approach — small, single-purpose classes for styling elements, giving more flexibility/customization.
2. Responsive Design — built-in responsive utility classes for adapting to different screen sizes.
3. Customization — highly configurable via a config file, or use sensible defaults.
4. Flexibility — doesn't dictate a specific design/structure, so you can build unique layouts.
5. Modular & Composable — utility classes combine to create complex styles, keeping stylesheets easy to manage.

Tailwind vs Bootstrap Comparison

Using Tailwind via CDN (Play CDN)

The Play CDN lets you try Tailwind directly in the browser without any build step — meant for development only, not recommended for production.

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="bg-blue-500 text-white p-4">
    <h1 class="text-2xl font-bold">Hello, Tailwind CSS!</h1>
    <p class="mt-2">Welcome to your webpage.</p>
  </div>
</body>

Reading Tailwind Utility Classes ⭐ (commonly tested)

Example — Hover Effects with Transitions

<div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
  <div class="p-6 hover:bg-green-600 hover:text-white transition duration-300 ease-in">
    <h1 class="text-2xl font-semibold mb-3">Hover</h1>
  </div>
</div>

6. Vue.js — Directives and Binding

What is Vue.js?

Vue.js (pronounced "view") is an open-source, progressive JavaScript framework used to build interactive web UIs and Single Page Applications (SPAs). "Progressive" means it offers variable degrees of complexity and flexibility — you can adopt as much or as little of it as you need.

• Vue.js lets you extend HTML with HTML attributes called directives.
• Directives add functionality to HTML applications.
• Vue provides both built-in directives and support for user-defined (custom) directives.

What is a Single Page Application (SPA)?

An SPA is a web application/website providing a very fluid, reactive, fast experience similar to a desktop app. It contains a menu, buttons, and blocks all on a single page — when a user clicks something, the page is dynamically rewritten rather than loading a brand-new page from the server, which is the reason behind its fast, reactive feel.

Pre-requisites for Vue.js

Node.js ≥ 15.0 Code editor (VS Code / Notepad++ / Atom) Browser (Chrome/Firefox) Volar extension (VS Code) Vue.js devtools

Creating a Vue App — Without a Build Tool (CDN)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue
  createApp({
    setup() {
      const message = ref('Hello vue!')
      return { message }
    }
  }).mount('#app')
</script>

This uses the Composition API (Vue 3): createApp creates the Vue instance; setup() runs before the component is created and is where reactive state is defined; ref('Hello vue!') creates a reactive variable; returning { message } exposes it to the template; {{ message }} is template interpolation that Vue replaces with the current value; .mount('#app') attaches the Vue instance to the DOM element with id app.

Custom Directives ⭐ (practical-heavy topic)

A custom directive is defined using Vue.directive('name', { ...hooks }), then used in HTML as v-name.

Hook Functions of a Directive

Practical I — Custom Directive: Uppercase Text on Click

<!-- HTML -->
<div id="app">
  <p v-uppercase>Hello, this text will be uppercased when clicked!</p>
</div>

<!-- app.js -->
Vue.directive('uppercase', {
  bind(el) {
    el.style.cursor = 'pointer';
    el.addEventListener('click', () => {
      const text = el.innerText;
      el.innerText = text.toUpperCase();
    });
  }
});
new Vue({ el: '#app' });

bind(el) runs once when the directive attaches; it sets the cursor to a pointer (visual clickability cue) and attaches a click listener that reads el.innerText, converts it with toUpperCase(), and writes it back — so a click uppercases the paragraph's text.

Practical II — Dynamic List with a Custom Directive

<!-- HTML -->
<div id="app">
  <ul v-list="items"></ul>
</div>

<!-- app.js -->
Vue.directive('list', {
  bind(el, binding) {
    const ul = document.createElement('ul');
    binding.value.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      ul.appendChild(li);
    });
    el.appendChild(ul);
  }
});
new Vue({
  el: '#app',
  data: { items: ['Subject-1', 'Subject-2', 'Subject-3'] }
});

binding.value gives access to the data passed into the directive (here, the items array). The directive loops over each item, builds an <li> for it, and appends all of them into a new <ul>, which is then appended to the bound element.

Practical III — Custom Directive: Human-Readable Date Formatting

<p v-format-date="date"></p>

<script>
Vue.directive('format-date', {
  inserted: function(el, binding) {
    const date = binding.value;
    el.textContent = formatDate(date);
  }
});
new Vue({
  el: '#app',
  data: { date: '2022-03-05T12:00:00' }
});
function formatDate(dateString) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(dateString).toLocaleDateString('en-US', options);
}
</script>
<!-- Output: March 5, 2022 -->

This uses the inserted hook (fires once the element is in the DOM) and JavaScript's toLocaleDateString() with formatting options to convert an ISO date string into a readable format like "March 5, 2022".

7. React JS

React Introduction

ReactJS is a declarative (you tell React what you want, and React builds the actual UI), efficient, and flexible JavaScript library for building reusable UI components. It's open-source, component-based, and responsible only for the view layer of an application. Developed and maintained by Facebook (Meta); used in WhatsApp & Instagram.

A React app is made of multiple components, each responsible for outputting a small, reusable piece of HTML. Components can be nested inside other components to build complex UIs from simple building blocks. React uses a Virtual DOM-based mechanism to fill data into the HTML DOM — it works fast because it only changes the individual DOM elements that actually changed, instead of reloading the complete DOM every time.

Real DOM vs Virtual DOM ⭐ (frequently asked comparison)

Why Use ReactJS?

Main objective: build fast, performant UIs using the Virtual DOM (a JavaScript object), which is faster than manipulating the regular DOM directly. React can be used on client and server side, and with other frameworks. Traditional frameworks recreate the entire DOM on every page load/modification, wasting memory and reducing performance — React solves this by using an in-memory Virtual DOM and only pushing the actual diffs to the browser's Real DOM.

Installing React (Create React App)

npx create-react-app my-app
cd my-app
npm start

If npx create-react-app fails, run in sequence: npm init → npm install create-react-app → npx create-react-app myapp.

React Elements

Elements are the smallest building blocks of a React app. An element is a plain object describing what should appear on the UI (in terms of DOM nodes). Creating a React element is cheap compared to creating a real DOM element. Elements can be created using JSX or plain React (without JSX).

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1 className='testClass'>Hello Devendra</h1>;
ReactDOM.render(element, document.getElementById('root'));

An element has a type (here, h1) and properties (here, className). The JSX code is compiled into plain JavaScript by Babel (a JavaScript compiler that transforms JSX into browser-executable JS).

React Function Components

Components are the building blocks of any React app — they let you split the UI into independent, reusable pieces. A component is a combination of: (1) template using HTML, (2) user interactivity using JS, (3) styling using CSS. Conceptually, a component is a JavaScript class or function that accepts inputs (called props) and returns a React element describing how a section of the UI should appear.

var Employee = (data) => {
  return (
    <div>
      <p>Name : {data.name}</p>
      <p>Salary : {data.salary}</p>
      <p>Dept Name : <b>{data.dept}</b></p>
    </div>
  );
}

const element = <Employee name="Sara" salary="12345" dept="CSE" head="Ahmedabad" />;
ReactDOM.render(element, document.getElementById('root'));

When React sees an element representing a user-defined component, it passes the JSX attributes to that component as a single object — this object is called "props".

React Class Components

To define a class component, create a class that extends React.Component. The output of any class component depends entirely on the return value of its render() method — this is the only required method in a class component. Attributes passed to the component are accessed via this.props.

class Employee extends React.Component {
  render() {
    return (
      <div>
        <h2>Employee Details...</h2>
        <p>ID : <b>{this.props.ID}</b></p>
        <p>Name : <b>{this.props.Name}</b></p>
        <p>Location : <b>{this.props.Location}</b></p>
        <p>Salary : <b>{this.props.Salary}</b></p>
      </div>
    );
  }
}

const element = <Employee ID="08" Name="Devendra" Location="IT-NU" Salary="12345"/>;
ReactDOM.render(element, document.getElementById("root"));

Function Components vs Class Components Comparison

Fetching API Data Asynchronously (Hooks: useState, useEffect)

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

function App() {
  const [loading, setLoading] = useState(true);
  const [records, setRecords] = useState([]);

  useEffect(() => {
    setLoading(true);
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(response => response.json())
      .then(data => {
        setRecords(data);
        setLoading(false);
      })
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {loading ? 'Loading...' : (
        <div className="grid">
          {records && records.map(item => (
            <div className="item" key={item.id}>
              <p>{item.title}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
export default App;

Full Practical Example — Movie Ticket Booking (state + arrays + event handling) ⭐

This example is a good template for any "write a React component" question — it shows useState managing multiple pieces of state, rendering a list from an array with .map(), and handling clicks to update state.

import React, { useState } from 'react';

const MovieTicketBooking = () => {
  const [selectedMovie, setSelectedMovie] = useState(null);
  const [selectedSeats, setSelectedSeats] = useState([]);

  const movies = [
    { id: 1, title: 'Movie 1', availableSeats: 100 },
    { id: 2, title: 'Movie 2', availableSeats: 80 },
    { id: 3, title: 'Movie 3', availableSeats: 120 }
  ];

  const handleMovieSelect = (movie) => {
    setSelectedMovie(movie);
    setSelectedSeats([]);
  };

  const handleSeatSelect = (seat) => {
    setSelectedSeats([...selectedSeats, seat]);
  };

  return (
    <div>
      <h2>Movie Ticket Booking</h2>
      <h3>Select a movie:</h3>
      <ul>
        {movies.map(movie => (
          <li key={movie.id} onClick={() => handleMovieSelect(movie)}>
            {movie.title} ({movie.availableSeats} seats available)
          </li>
        ))}
      </ul>

      {selectedMovie && (
        <div>
          <h4>Selected Movie: {selectedMovie.title}</h4>
          <div>
            {Array.from({ length: selectedMovie.availableSeats }, (_, index) => (
              <button
                key={index}
                disabled={selectedSeats.includes(index)}
                onClick={() => handleSeatSelect(index)}
              >
                {index + 1}
              </button>
            ))}
          </div>
          <h4>Selected Seats:</h4>
          {selectedSeats.map(seat => (<span key={seat}>Seat {seat + 1}, </span>))}
          <button onClick={() => setSelectedSeats([])}>Reset</button>
        </div>
      )}
    </div>
  );
};
export default MovieTicketBooking;