[Link] and Node.
js Deep Study Notes
Overview
Duration: 20 Days
Daily Study Time: 4–6 Hours
Learning Path:
• Days 1–10: [Link] (Frontend)
• Days 11–20: [Link] (Backend with Express)
This roadmap builds a full■stack development foundation using JavaScript technologies.
PART 1 — [Link]
1. React Introduction
React is a JavaScript library for building interactive user interfaces, especially Single Page Applications
(SPA). Instead of reloading the entire page, React updates only the changed part of the UI using a
Virtual DOM. Key Features: • Component■based architecture • Virtual DOM for efficient updates •
Reusable UI components • Unidirectional data flow (Parent → Child)
2. React Environment Setup
Install [Link] and npm first. Then create a project using create■react■app. Typical project structure
includes: src folder (components and main logic) public folder (HTML template) [Link] (entry point)
[Link] (main component).
3. JSX (JavaScript XML)
JSX allows developers to write HTML■like syntax inside JavaScript code. React converts JSX into
JavaScript using [Link](). Important Rules: • JSX must have one parent element. • Use
className instead of class. • JavaScript expressions are written inside {}.
4. Components
Components are reusable pieces of UI. They allow complex interfaces to be broken into small
manageable pieces. Types: Functional Components – Modern and widely used. Class Components –
Older method using ES6 classes.
5. Props
Props (properties) allow passing data from parent components to child components. Characteristics: •
Read■only • Used for communication between components • Helps build reusable components.
6. State
State represents dynamic data inside a component. When state changes, the UI automatically
re■renders. Example uses: • Counters • Form input values • Dynamic UI updates
7. Event Handling
React handles events similar to JavaScript but uses camelCase naming. Common Events: • onClick •
onChange • onSubmit These events trigger functions that update state or perform actions.
8. Conditional Rendering
Conditional rendering displays different UI elements based on conditions. Methods: • if statements •
ternary operators • logical AND operators
9. Lists and Keys
Lists allow displaying multiple elements dynamically using array mapping. Keys help React identify
which items have changed, been added, or removed during updates.
10. Forms in React
React forms use controlled components where form inputs are managed by React state. User input
updates the state which controls the displayed value.
11. useEffect Hook
useEffect manages side effects such as: • API calls • data fetching • timers • DOM updates The
dependency array controls when the effect runs.
12. Component Lifecycle
Components go through three lifecycle stages: • Mounting – component created • Updating – state or
props change • Unmounting – component removed from DOM
13. React Router
React Router enables navigation between pages in a single page application without refreshing the
browser. Important components: • BrowserRouter • Route • Link
14. Context API
Context API provides global state management, avoiding prop drilling where props pass through
multiple nested components.
15. Custom Hooks
Custom hooks allow reusable logic built on top of React hooks. They simplify repeated tasks such as
API fetching or authentication.
PART 2 — [Link]
1. [Link] Introduction
[Link] is a JavaScript runtime environment built on the Chrome V8 engine. It allows JavaScript to run
on the server side. Advantages: • Non■blocking I/O • Event■driven architecture • High performance •
Full■stack JavaScript development
2. Node Modules
Modules organize code into reusable pieces. Common built■in modules: • fs (file system) • http (server
creation) • path (file path utilities)
3. File System Module
The fs module allows reading and writing files on the server. Uses: • reading configuration files • logging
• storing data temporarily
4. EventEmitter
[Link] uses an event■driven architecture where actions trigger events and listeners respond to them.
5. [Link]
Express is a lightweight web framework for [Link] used to build web applications and REST APIs
quickly.
6. Routing
Routing defines how the server responds to different URLs and HTTP requests.
7. Request and Response Objects
Request object (req) contains data sent by the client. Response object (res) sends data back to the
client.
8. REST APIs
REST APIs allow communication between frontend and backend using HTTP methods such as GET,
POST, PUT, and DELETE.
9. MongoDB
MongoDB is a NoSQL database storing data as JSON■like documents. It integrates with [Link] using
Mongoose.
10. CRUD Operations
CRUD represents Create, Read, Update, and Delete operations used to manage database records.
11. Middleware
Middleware functions run before route handlers. They process requests, parse data, authenticate
users, or handle errors.
12. Authentication (JWT)
JWT (JSON Web Token) is used to secure APIs and verify user identity after login.
13. Backend Mini Project
Example: Blog API Features include creating posts, updating posts, deleting posts, and user
authentication with API testing using Postman.
Recommended Tools
• VS Code for coding • Chrome DevTools for debugging • Postman for API testing • MongoDB Atlas for
database hosting
