2-week technical session on ReactJS

Week 1: Foundations & Core React
Day 1: HTML & CSS Fundamentals (Intense Introduction)
_Morning (3 hours): HTML Deep Dive
_Concept: Structure of a webpage, semantic HTML5, common tags (div, p, h1-h6, a, img, ul, ol, li, input, button, form).
Skills:
Creating well-structured, accessible HTML documents.
Using semantic tags appropriately.
Embedding media (images, basic video/audio).
Building basic forms with different input types.
Hands-on: Create a static personal portfolio page (without styling). Focus purely on HTML structure and content.
Afternoon (4 hours): CSS Styling & Layout
Concept:
Selectors (class, ID, tag, attribute), specificity.
Box Model (margin, padding, border, content).
Basic styling: colors, fonts, backgrounds, text properties.
Layout: Flexbox fundamentals (display, flex-direction, justify-content, align-items).
Responsive basics: Viewport meta tag.
Skills:
Applying CSS effectively to HTML elements.
Controlling element spacing and appearance.
Creating basic page layouts using Flexbox.
Making a page minimally responsive for different screen sizes.
Hands-on: Style the personal portfolio page created in the morning using CSS. Implement a responsive navigation bar and a simple multi-column layout for the content using Flexbox.
Homework/Evening: Refine the portfolio page, explore Google Fonts and Font Awesome for better aesthetics.
Day 2: Advanced CSS & Introduction to JavaScript
Morning (3 hours): Advanced CSS & Tooling
Concept:
CSS Grid (basic concepts: grid-template-columns, grid-template-rows, grid-gap).
Pseudo-classes (:hover, :focus) and pseudo-elements (::before, ::after).
Transitions and basic animations.
CSS variables.
Skills:
Creating more complex layouts with CSS Grid.
Adding interactive effects to elements.
Understanding and using CSS variables for maintainability.
Hands-on: Build a small component (e.g., a pricing card, a product display) using CSS Grid for layout, and add hover effects with transitions.
Afternoon (4 hours): JavaScript Fundamentals
Concept:
Variables (let, const), data types (strings, numbers, booleans, arrays, objects).
Operators, control flow (if/else, switch).
Loops (for, while, forEach, map, filter, reduce).
Functions (declarations, expressions, arrow functions).
DOM manipulation basics (selecting elements, changing content, adding/removing classes, event listeners).
Skills:
Writing basic JavaScript logic.
Working with arrays and objects.
Creating reusable functions.
Making a static HTML page interactive using vanilla JavaScript.
Hands-on:
Project 1 (Mini): Interactive To-Do List (Vanilla JS)
Allow users to add new items.
Mark items as complete/incomplete.
Delete items.
Stretch: Store items in localStorage.
Homework/Evening: Review JavaScript concepts, experiment with different array methods (map, filter, reduce).
Day 3: ES6+ Features & Intro to React Concepts
Morning (3 hours): Modern JavaScript (ES6+)
Concept:
const/let vs var (revisit).
Template literals.
Destructuring (arrays & objects).
Spread and Rest operators.
Modules (import/export).
Asynchronous JavaScript: Callbacks, Promises, async/await (basic understanding for data fetching).
Skills:
Writing cleaner, more modern JavaScript.
Efficiently extracting data from arrays and objects.
Structuring JS code into modules.
Understanding how to handle asynchronous operations.
Hands-on: Refactor parts of the To-Do List or create a small module-based script that fetches data from a public API (e.g., JSONPlaceholder) and logs it to the console using async/await.
Afternoon (4 hours): Introduction to React - The "Why" & Basic Setup
Concept:
What is React? Why use it? (Declarative UI, Component-based architecture, Virtual DOM).
Setting up a React project (Create React App/Vite).
JSX: JavaScript XML (syntax, embedding expressions, attributes).
Functional Components vs. Class Components (focus on functional).
Rendering components, props (passing data down).
Skills:
Setting up a new React project.
Writing basic JSX.
Creating and rendering simple functional components.
Passing data from parent to child components using props.
Hands-on:
Create a new React project.
Build a simple Greeting component that takes name as a prop and displays "Hello, [name]!".
Create a Card component that takes title, description, and imageUrl as props. Render several Card components on the App component.
Homework/Evening: Explore React DevTools. Experiment with passing different types of props (strings, numbers, objects).
Day 4: State, Event Handling & Conditional Rendering
Morning (3 hours): State & useState Hook
Concept:
Understanding component state (data that changes over time).
The useState hook: declaring state variables, updating state.
Immutability of state.
Batching state updates (brief mention).
Skills:
Managing dynamic data within a component.
Updating the UI based on state changes.
Hands-on:
Create a Counter component with a button to increment and decrement a number. Use useState to manage the count.
Build a Toggle component (e.g., a light switch) that changes its appearance based on an isOn state.
Afternoon (4 hours): Event Handling & Conditional Rendering
Concept:
React synthetic events (naming conventions, passing arguments to event handlers).
Conditional rendering: if statements, ternary operators, logical &&, short-circuiting.
Rendering lists (map method, key prop importance).
Skills:
Responding to user interactions (clicks, input changes).
Dynamically showing/hiding elements based on conditions.
Rendering collections of data efficiently.
Hands-on:
Project 2 (Mid-size): React To-Do List
Rebuild the vanilla JS To-Do List using React components, state, and props.
Add, delete, mark as complete.
Use map for rendering the list of to-dos.
Implement conditional rendering to show a message if there are no tasks.
Homework/Evening: Add filtering (all, active, completed) to the React To-Do List using state and conditional rendering.
Day 5: Lifecycle, useEffect, & Form Handling
Morning (3 hours): useEffect Hook (Component Lifecycle)
Concept:
Understanding component "side effects" (data fetching, DOM manipulation, subscriptions).
useEffect hook: cleanup function, dependency array ([], [deps], no dependency).
Analogy to componentDidMount, componentDidUpdate, componentWillUnmount.
Skills:
Performing side effects in functional components.
Fetching data when a component mounts.
Setting up and tearing down event listeners or subscriptions.
Hands-on:
Create a component that fetches a random user from an API (e.g., randomuser.me) when it mounts and displays their name/picture. Use useEffect with an empty dependency array.
Implement a timer that updates every second using useEffect with cleanup.
Afternoon (4 hours): Form Handling in React
Concept:
Controlled components vs. uncontrolled components (focus on controlled).
Handling input changes (onChange event).
Handling form submissions (onSubmit event).
Multiple input fields, state for forms.
Skills:
Building interactive forms in React.
Managing form input state.
Submitting form data.
Hands-on:
Project 3 (Mid-size): Simple Registration Form
Build a form with fields like name, email, password.
Use controlled components to manage input state.
Implement basic client-side validation (e.g., email format, password length).
Display confirmation message on submission.
Homework/Evening: Add a "remember me" checkbox to the registration form and use localStorage to save the email.
Week 2: Advanced React & Ecosystem
Day 6: Component Communication & Context API
Morning (3 hours): Advanced Component Communication
Concept:
Lifting state up.
Props drilling (when it becomes an issue).
Passing functions as props (child-to-parent communication).
Skills:
Sharing state between sibling components via a common parent.
Triggering parent component actions from a child.
Hands-on:
Modify the To-Do List: Create separate components for AddTodoForm, TodoList, TodoItem. Lift the todos state to a parent component and pass down props and functions as needed.
Afternoon (4 hours): Context API (State Management)
Concept:
Introduction to Context API: when to use it, problem it solves (props drilling).
createContext, Provider, useContext hook.
Limitations of Context for very large-scale state management (brief mention, segue to Redux/ Zustand).
Skills:
Sharing global state or theme information across multiple components without prop drilling.
Hands-on:
Project 4 (Mid-size): Theme Switcher with Context
Create an App with multiple nested components.
Implement a theme context (light/dark).
Add a button to toggle the theme.
Apply styling based on the current theme using useContext in child components.
Homework/Evening: Refactor the To-Do List to use Context API for the todos array and related functions (add, delete, toggle complete).
Day 7: React Router & Styling Approaches
Morning (3 hours): React Router DOM
Concept:
Client-side routing vs. server-side routing.
Installation and basic setup.
BrowserRouter, Routes, Route.
Link and NavLink for navigation.
URL parameters (useParams), query parameters (URLSearchParams).
Nested routes.
Skills:
Creating multi-page applications in React.
Navigating between different views.
Extracting dynamic data from URLs.
Hands-on:
Project 5 (Mid-size): Simple Blog/Product App
Create an app with at least 3 routes: Home, About, and a dynamic /posts/:id or /products/:id route.
Use Link for navigation.
Fetch data for individual posts/products using useParams and useEffect.
Afternoon (4 hours): Styling in React
Concept:
Different styling approaches:
CSS Modules (.module.css).
Styled Components (basics: styled.div, styled-components theming).
Tailwind CSS (utility-first, basic class usage).
When to choose which approach.
Skills:
Implementing scoped CSS.
Writing component-level styles with JavaScript.
Using a utility-first CSS framework.
Hands-on:
Pick one of the styling approaches (e.g., CSS Modules or Styled Components) and refactor a component from your previous projects to use it.
Stretch: Implement a small part of your app using Tailwind CSS.
Homework/Evening: Continue experimenting with different styling methods. Consider the pros and cons of each for different project sizes.
Day 8: useReducer, useRef, & Performance
Morning (3 hours): useReducer Hook & useRef Hook
Concept:
useReducer: when state logic is complex, multiple sub-values, or depends on previous state. Reducers, dispatch, actions.
useRef: accessing DOM elements, storing mutable values that don't trigger re-renders.
Skills:
Managing complex state logic in a predictable way.
Directly interacting with the DOM when necessary.
Storing references to values across renders.
Hands-on:
Refactor the To-Do List to use useReducer for managing the todos array state.
Create a simple input field that automatically focuses when the component mounts using useRef.
Build a component that tracks the number of times it has rendered using useRef.
Afternoon (4 hours): React Performance Optimization
Concept:
Understanding re-renders.
React.memo (pure functional components).
useCallback (memoizing functions).
useMemo (memoizing values).
When and why to use them (avoiding premature optimization).
React DevTools Profiler (brief introduction).
Skills:
Identifying potential performance bottlenecks.
Using memoization techniques to prevent unnecessary re-renders.
Hands-on:
Create a component with a heavy calculation or a list of many items. Simulate performance issues by updating parent state frequently.
Apply React.memo, useCallback, and useMemo to optimize re-renders in specific components and observe the difference using React DevTools Profiler.
Homework/Evening: Watch a video on React DevTools Profiler to get a better understanding of how to analyze performance.
Day 9: Data Fetching Advanced & Project Planning
Morning (3 hours): Advanced Data Fetching & Error Handling
Concept:
Custom hooks for data fetching (encapsulating useEffect, useState, error/loading states).
Introduction to data fetching libraries (e.g., Axios, SWR, React Query - briefly mention their benefits).
Loading states, error states, and empty states.
Displaying meaningful feedback to the user during data operations.
Skills:
Creating reusable data fetching logic.
Gracefully handling network requests and displaying UI feedback.
Hands-on:
Create a custom useFetch hook that takes a URL and returns data, loading, and error states.
Use this custom hook to fetch data for multiple components (e.g., a list of users and user details) and display loading spinners and error messages accordingly.
Afternoon (4 hours): Final Project Planning & Architecture
Concept:
Review of all concepts learned.
Thinking about component architecture (smart vs. dumb components, folder structure).
Breaking down a large problem into smaller, manageable React components.
Wireframing and UI/UX considerations.
Skills:
Applying all learned concepts to design a full application.
Structuring a React project effectively.
Identifying the necessary components and their state/props.
Hands-on:
Project 6 (Major): Choose your own adventure!
Students propose a final project idea (e.g., e-commerce product page, weather app, recipe finder, simple social media feed, personalized dashboard).
Spend the afternoon planning out the component hierarchy, state management strategy, routing, and data fetching for their chosen project. Draw out wireframes and component trees.
Homework/Evening: Finalize project plan, set up the project structure with Create React App/Vite.
Day 10: Final Project Build Day
Full Day (7-8 hours): Dedicated Project Building & Mentoring
Concept: Consolidate all learned skills into a functional, multi-feature React application.
Skills:
Independent problem-solving.
Integrating all React concepts (components, props, state, effects, routing, forms, custom hooks, context API) into a cohesive application.
Debugging React applications.
Hands-on:
Project 6 (Major): Build Session
Students spend the entire day implementing their planned project.
Instructor provides support, answers questions, and helps debug.
Encourage using all best practices learned throughout the curriculum.
Afternoon Wrap-up (1 hour):
Brief project show-and-tell.
Discussion of challenges, successes, and next steps in their React journey.
Homework/Next Steps: Continue iterating on the final project. Explore testing with React Testing Library/Jest, deploy to Netlify/Vercel, explore other state management libraries (Zustand, Redux Toolkit).
Tools & Resources:
Code Editor: VS Code (with Prettier, ESLint, React/Redux snippets extensions).
React Setup: Create React App or Vite.
Browser DevTools: Chrome/Firefox Developer Tools (especially React DevTools).
APIs: JSONPlaceholder, OpenWeatherMap API, TheMovieDB API, RandomUser API, etc.
Documentation: Official React Docs are paramount.
Learning Platforms: CodeSandbox, StackBlitz (for quick experiments).
Key Emphasis:
"Show, Don't Tell": Always follow concept explanation with immediate hands-on coding.
Debugging Skills: Encourage students to use console.log, React DevTools, and browser debugger from Day 2 onwards.
Pair Programming: If feasible, encourage pair programming for parts of the projects to foster collaboration and shared learning.
Code Reviews (Informal): Instructor provides quick feedback on code structure and common anti-patterns.
Break Down Problems: Teach students how to break down complex UI into manageable React components.
Read Errors: Stress the importance of reading and understanding error messages.