React Event Handlers – Short Note
• Functions triggered in response to user actions like clicks, key presses, and form
submissions.
• Defined as methods or arrow functions inside components.
• Named in camelCase and prefixed with on (e.g., onClick, onChange).
• Receive an event object containing details about the event.
React Hooks – Short Note
• Enable use of state and other React features in functional components.
• Must be used at the top level, not inside loops or conditionals.
Common Hooks:
• useState: Adds state to functional components. Returns current state and updater
function.
• useEffect: Handles side effects like data fetching or DOM updates. Runs after
rendering.
• useContext: Accesses values from a context provider within the component tree.
• useReducer: Manages complex state logic using a reducer function and dispatch
method.
State Management – Short Note
• Refers to controlling and maintaining application data consistently and reliably.
• Essential for interactive, data-driven applications.
• React uses a declarative approach: define UI based on state rather than
manipulating UI directly.
• State affects the behavior and appearance of components.
Redux – Short Note
• A predictable state container for JavaScript apps, commonly used with React.
• Manages global state required across multiple components.
• Follows strict rules: state is updated via actions and reducers.
• Provides a single source of truth with centralized state management.
Organizing State – Best Practices
• Group related state: Combine variables updated together.
• Avoid contradictions: Structure state to prevent conflicting values.
• Avoid redundant state: Don’t store derived/calculable values.
• Avoid duplication: Prevent the same data from appearing in multiple places.
• Avoid deeply nested state: Prefer flat structures for easier updates and
maintenance.
Lifting State Up – Short Note
• Move shared state to the closest common parent component.
• Pass state and updater functions as props to child components.
• Ensures synchronization between related components.
Managing State with Reducer – Short Note
• Useful when multiple state updates are scattered across many handlers.
• Consolidates state logic into a single reducer function.
• Named after array’s reduce() method.
• Reduces component complexity by separating update logic.
Managing State with Context – Short Note
• Avoids prop-drilling through deeply nested components.
• Shares data across components without passing props manually.
• Useful for global data like themes, user info, or language settings.
Bundling – Short Note
• Combines multiple JavaScript/CSS files into one file.
• Reduces HTTP requests, improving load performance.
• Tools like Webpack/Parcel are used.
• Includes optimizations like minification and tree shaking.
Webpack – Short Note
• Popular bundler for JavaScript, CSS, images, etc.
• Creates optimized bundles by analyzing dependencies.
• Supports features like code splitting, lazy loading, and HMR.
• Has a built-in dev server.
• Highly configurable and widely used in React, Vue, Angular.
Parcel – Short Note
• Zero-config bundler and build tool.
• Automatically handles file types and optimizations.
• Faster builds via parallel processing.
• Includes built-in dev server with live reload.
• Simple to use, ideal for React, Vue, Angular apps.
Setting Up React – Short Note
• Recommended to use a React framework for full features.
• Common frameworks:
o Next.js
o Remix
o Gatsby
o Expo (for mobile apps)
Vite – Short Note
• Fast build tool and dev server for modern web apps.
• Uses native ES modules and HTTP/2 for speed.
• Supports code splitting and tree shaking.
• Created by Vue.js author; works well with React and Vue.
Web Application Security – Short Note
• OWASP: Organization promoting software security.
• OWASP Top 10 (2021):
1. Broken Access Control
2. Cryptographic Failures
3. Injection
4. Insecure Design
5. Security Misconfiguration
6. Vulnerable/Outdated Components
7. Identification & Auth Failures
8. Software/Data Integrity Failures
9. Logging/Monitoring Failures
10. Server-Side Request Forgery (SSRF)
HTTP Security Headers – Short Note
• Improve web app security by setting proper HTTP headers.
• Protect against attacks like XSS, clickjacking, and more.
• Set via server config or application code.
• Examples include Content-Security-Policy, X-Frame-Options, etc.
