React

Week 1: Introduction to React

Understand what React is and how it works.

• What is React and why use it
• Setting up development environment (Node.js, npm, create-react-app)
• JSX syntax basics
• Rendering elements
• First React component

Practice: Create a simple “Hello World” React app.

Week 2: Components & Props

Break UI into reusable parts and pass data between them.

• Functional components
• Props and how to use them
• Nested components
• Component folder structure
• Reusability and separation of concerns

Practice: Build a simple profile card or product listing with reusable components.

Week 3: State & Events

Make your components interactive and dynamic.

• Introduction to useState hook
• Updating state
• Handling events (clicks, inputs, etc.)
• Conditional rendering (if, ternary, &&)
• Controlled components (forms)

Practice: Counter app, toggle switch, and simple form.

Week 4: Lists, Keys & Styling

Render dynamic lists and style your components.

• Rendering lists using .map()
• Importance of key in lists
• Inline styles vs CSS files
• Basic styling techniques and conditional styles
• Class-based vs functional components (brief)

Practice: To-do list app, styled card gallery.

Week 5: useEffect & Lifecycle

Work with side effects and lifecycle-like behavior in functional components.

• Introduction to useEffect
• Using useEffect with dependencies
• API calls with fetch
• Cleanup functions in useEffect
• Basic understanding of component lifecycle

Practice: Fetch data from a public API and display it.

Week 6: Project Week & Final Touches

Build a complete mini React project using all learned concepts.

• Plan and structure a full app
• Combine components, state, props, events, and API
• Optional: Basic routing with react-router-dom
• Final polish and deployment basics (Netlify/Vercel)

Practice: Build a portfolio, weather app, or movie search app.