Skip to main content

Beginner - Core Fundamentals

Introduces the fundamental building blocks of React.

1. Introduction to React​

  • What is React?
  • JS Library vs Framework
  • Why React?
  • React vs Other Frameworks
  • SPA (Single Page Application) vs MPA
  • Prerequisites (HTML, CSS, JavaScript ES6+)
  • Setting up React Development Environment
    • Node.js and npm
    • Create React App (CRA) / Vite
    • VS Code Setup
    • React Developer Tools
  • Understanding the Build Process (Webpack, Babel - High-level)

2. React Basics​

  • JSX Syntax
    • Writing JSX
    • JSX vs HTML
    • Expressions in JSX
    • JSX Attributes
    • JSX Children
  • Components
    • React Component (Functional vs Class - focus on Functional components with Hooks)
    • Functional Components
    • Class Components
    • Rendering Components
    • Component Composition
    • Component Naming Conventions
  • Props
    • Passing data to components
    • Passing Props
    • Props Types
    • Default Props
    • Props Destructuring
    • Passing data to components
    • Props are read-only
    • Prop Types for validation (Introduction)
  • State
    • What is state? (Mutable data within a component)
    • useState Hook (for functional components)
    • Handling state updates (asynchronous nature)
    • useState Hook
    • State Updates
    • State vs Props
    • State Management Best Practices

3. Event Handling​

  • Event Handlers
    • onClick
    • onChange
    • onSubmit
    • Other Common Events
  • Event Object
  • Synthetic Events
  • Passing event handlers as props
  • Event Bubbling
  • Preventing Default Behavior
  • Event Handler Best Practices

4. Conditional Rendering of elements/components​

  • if/else Statements
  • Ternary Operators
  • Logical && Operator
  • Switch Statements
  • Conditional Classes
  • Conditional Styles

5. Lists and Keys​

  • Rendering Lists of elements
  • map() Function
  • Key and their Importance
  • Key Best Practices
  • List Item Components
  • Filtering Lists

6. Forms in React​

  • Controlled Components
  • Form Elements
    • Input
    • Textarea
    • Select
    • Checkbox
    • Radio
  • Form Validation
  • Form Submission
  • Form Libraries Overview

7. React Router Basics​

  • Installation and Setup
  • Route Configuration
  • Navigating between pages
  • Route Parameters
  • Nested Routes
  • Protected Routes

8. Styling in React​

  • CSS in React
    • Inline Styles
    • CSS Modules
    • Styled Components, Emotion
    • CSS-in-JS
  • Responsive Design
  • CSS Frameworks
    • Bootstrap
    • Material-UI
    • Tailwind CSS

Practice & Challenge based learning Prompts​

GoalSample Prompt
Learn Concept"Explain the difference between props and state in React with examples."
Deep Dive"Walk me through how the virtual DOM works in React and why it's important."
Quiz Myself"Create a 5-question quiz on React component lifecycle and hooks."
Practice Code"Give me 3 hands-on exercises to practice event handling and conditional rendering in React."
Mini Project"Suggest a beginner-friendly project using forms and validation in React, and guide me through each step."
Challenge"Challenge me to build a dynamic to-do list app with add, edit, and delete features using React state."
Debugging"Here's my React code [paste], it's not rendering as expected. Help me debug and explain the issues."
Portfolio Help"Guide me to write a professional README for my React project and deploy it on GitHub Pages or Vercel."
Best Practices"List 5 best practices for organizing React components in a scalable project."
Real-World Task"Give me a real-world scenario where React Router is essential and show how to implement it."

Prompt templates​

PhasePrompt Template
Learn Concept"Explain [concept] in React, including syntax, use cases, and a practical example."
Quiz Myself"Generate a 5-question multiple-choice quiz to test my understanding of [concept] in React."
Practice Code"Provide 3 hands-on coding exercises on [concept] in React, each with increasing complexity."
Mini Project"Suggest a [beginner/intermediate/advanced] React project focused on [concept] and guide me step-by-step."
Challenge"Challenge me to build a React feature using [concept], specifying unique constraints or requirements."
Debug"Here's my React code using [concept]: [paste]. Help me debug it with detailed, step-by-step explanations."
Portfolio"Assist me in writing a professional README and deploying my React project '[project name]' to GitHub/Vercel."