CuratedCurriculum

This path is structured to build your skills incrementally, ensuring you understand each concept deeply before moving on to the next.

What to learn: Redux Toolkit, Recoil, understanding state management principles.

Why this comes before the next step: Mastering state management is crucial to effectively control your application flow as you build more complex UIs.

Mini-project/Exercise: Create a task management app that uses both Redux Toolkit and Recoil for state management across components.

What to learn: React Profiler, memoization techniques using React.memo and useMemo.

Why this comes before the next step: Understanding performance optimizations is essential for delivering high-quality applications that users will enjoy.

Mini-project/Exercise: Optimize your previous task management app for performance and measure the improvements.

What to learn: Jest, React Testing Library, writing unit tests, and integration tests.

Why this comes before the next step: Being able to test your components will ensure they are robust and maintainable as your application grows.

Mini-project/Exercise: Write tests for the task management app, covering different scenarios and edge cases.

What to learn: Basics of TypeScript, integrating it into a React project, and type definitions.

Why this comes before the next step: Type safety will help you catch errors early and improve collaboration in larger projects.

Mini-project/Exercise: Convert your task management app to TypeScript and refactor the code for type safety.

What to learn: Utilizing Material-UI and understanding design systems.

Why this comes before the next step: A solid understanding of UI libraries will help you create visually appealing applications quickly.

Mini-project/Exercise: Refactor your app to use Material-UI components and create a cohesive design theme.

What to learn: Building custom hooks for reusable logic.

Why this comes before the next step: Custom hooks promote code reusability and separation of concerns within your components.

Mini-project/Exercise: Identify repeated logic in your app and create a custom hook to manage it.

What to learn: Features of Next.js, implementing SSR, and static site generation (SSG).

Why this comes before the next step: Understanding SSR is vital for performance and SEO in modern web applications.

Mini-project/Exercise: Convert your task management app into a Next.js application with SSR capabilities.

What to learn: Best practices for contributing to open-source React projects, version control with Git.

Why this comes before the next step: Collaboration is key in software development, and contributing to open source will enhance your skills and network.

Mini-project/Exercise: Contribute to an open-source React project on GitHub to practice collaboration and version control.

This path is structured to build your knowledge progressively, focusing on both theoretical and practical aspects of advanced React development.

What to learn: Redux Toolkit, Redux Saga, and Immer.

Why this comes before the next step: Mastering state management is crucial for managing complex application states efficiently, which sets the foundation for scalable app architecture.

Mini-project/Exercise: Create a simple task management app that uses Redux for state management, showcasing async actions with Redux Saga.

What to learn: TypeScript, React Type Definitions, and useReducer with TypeScript.

Why this comes before the next step: Integrating TypeScript improves reliability and maintainability of code, a must for larger applications.

Mini-project/Exercise: Refactor your Week 1 project to use TypeScript, adding type definitions and interfaces for your Redux state and actions.

What to learn: Next.js, getServerSideProps, and getStaticProps.

Why this comes before the next step: Understanding server-side rendering is essential for performance and SEO, which are critical for user engagement.

Mini-project/Exercise: Expand your task management app by implementing server-side rendering with Next.js to fetch initial data from an API.

What to learn: React Memo, useMemo, useCallback, code splitting.

Why this comes before the next step: Performance optimization is key to providing a smooth user experience, particularly in larger applications.

Mini-project/Exercise: Optimize your Next.js task management app by implementing code splitting and memoization strategies.

What to learn: Jest, React Testing Library, and mock functions.

Why this comes before the next step: Testing is a critical aspect of professional development that ensures application reliability as complexity grows.

Mini-project/Exercise: Write comprehensive tests for your task management app, including unit tests for components and integration tests for Redux functionality.

What to learn: AWS, Vercel, and GitHub Actions.

Why this comes before the next step: Understanding deployment processes and CI/CD pipelines is essential for transitioning from development to production effectively.

Mini-project/Exercise: Deploy your fully tested task management app using Vercel, setting up a simple CI/CD pipeline with GitHub Actions.

This path is structured to build your knowledge systematically, with each week introducing new concepts that build on the last.

What to learn: Render props, Higher-order components, Compound components.

Why this comes before the next step: Understanding these patterns will enhance your ability to write reusable components and interact with the component tree.

Mini-project/Exercise: Create a customizable modal component that uses render props to allow different content to be passed in.

What to learn: React.memo, useMemo, useCallback.

Why this comes before the next step: Optimizing performance is critical for user experience, especially in larger applications.

Mini-project/Exercise: Refactor the modal component to use these optimization techniques and measure performance improvements.

What to learn: useContext, Redux Toolkit, createSlice.

Why this comes before the next step: A solid grasp of state management is essential for building scalable applications.

Mini-project/Exercise: Build a simple shopping cart that can be managed using both Context API and Redux.

What to learn: Creating and using custom hooks.

Why this comes before the next step: Custom hooks allow you to abstract and reuse logic across components, enhancing maintainability.

Mini-project/Exercise: Create a custom hook for fetching data from an API and use it in your shopping cart application.

What to learn: Basic TypeScript concepts, Props and State typing.

Why this comes before the next step: Integrating TypeScript improves code quality and understandability.

Mini-project/Exercise: Convert your shopping cart application to TypeScript, adding types for props and state.

What to learn: Jest, React Testing Library.

Why this comes before the next step: Testing is essential for maintaining high code quality as your project grows.

Mini-project/Exercise: Write unit tests for your custom hook and components in the shopping cart application.

Over the next six weeks, you'll dive deep into advanced React concepts, allowing you to build robust applications effectively.

What to learn: Context API, useReducer, custom hooks.

Why this comes before the next step: Understanding state management is crucial for building scalable applications. Getting this right will enable you to manage application state more effectively as you progress.

Mini-project/Exercise: Build a simple task manager application using Context API and local storage to persist tasks.

What to learn: higher-order components, render props, compound components.

Why this comes before the next step: Composable patterns allow for greater flexibility and reusability in your components, which is essential for maintaining large applications.

Mini-project/Exercise: Refactor your task manager to support a more composable architecture.

What to learn: React.memo, useMemo, useCallback, lazy loading.

Why this comes before the next step: Performance is a vital consideration for user experience, especially in complex applications. Optimizing your app will prevent lags and improve load times.

Mini-project/Exercise: Optimize your task manager app by applying at least three of the performance optimization techniques learned.

What to learn: Apollo Client, GraphQL queries, mutations.

Why this comes before the next step: Knowing how to effectively manage data fetching will enable you to build dynamic applications that respond to user input.

Mini-project/Exercise: Integrate Apollo Client into your task manager to fetch a list of tasks from a mock GraphQL API.

What to learn: Type annotations, interfaces, generics.

Why this comes before the next step: Type safety is crucial for large applications, allowing you to catch errors early and improve maintainability.

Mini-project/Exercise: Convert your task manager app to TypeScript, applying appropriate type annotations throughout the codebase.

What to learn: GitHub Actions, Netlify or Vercel deployment.

Why this comes before the next step: Setting up CI/CD pipelines will help automate your development process, making it easier to push updates and maintain quality.

Mini-project/Exercise: Set up a CI/CD pipeline for your task manager app, ensuring it automatically deploys to a hosting service upon code changes.

This path is designed to progressively expand your knowledge and challenge your skills as a React developer. You'll engage with technologies and concepts that lay a solid foundation for advanced development.

What to learn: Redux, Redux Toolkit, React Context.

Why this comes before the next step: Understanding advanced state management is crucial for building scalable applications. You need to grasp how to manage global state before diving into more complex routing.

Mini-project/Exercise: Create a small application (e.g., a task tracker) that uses both Redux for global state management and React Context for local state.

What to learn: React Router (v6), dynamic routing, nested routes.

Why this comes before the next step: Routing is essential for navigating between different views in your application. Mastering this ensures you can create user-friendly interfaces.

Mini-project/Exercise: Extend your task tracker application to include multiple pages (e.g., a detail view for each task) using React Router.

What to learn: Creating and using custom hooks.

Why this comes before the next step: Custom hooks allow you to extract and reuse logic across components, enhancing code maintainability and readability.

Mini-project/Exercise: Refactor your task tracker to utilize custom hooks for form handling and fetching data.

What to learn: React.memo, useMemo, useCallback, code-splitting.

Why this comes before the next step: Optimizing performance is key to building responsive applications. You'll need these skills before tackling larger projects.

Mini-project/Exercise: Optimize your previous projects by implementing performance enhancements.

What to learn: Basics of Next.js, file-based routing, API routes.

Why this comes before the next step: Understanding Next.js is crucial for server-side rendering and building production-ready applications.

Mini-project/Exercise: Migrate your task tracker to use Next.js, taking advantage of its routing and API capabilities.

What to learn: Jest, React Testing Library, deployment on Vercel.

Why this comes before the next step: Testing ensures code reliability, and knowing how to deploy your app prepares you for real-world delivery.

Mini-project/Exercise: Write tests for your Next.js application and deploy it on Vercel.

This syllabus is designed to build your expertise progressively, ensuring each concept is understood before moving to the next.

What to learn: Render Props, Higher-Order Components (HOCs), and Compound Components.

Why this comes before the next step: Mastering these patterns is essential for creating flexible and reusable components that can adapt to various contexts.

Mini-project/Exercise: Build a customizable modal component using the render props pattern.

What to learn: Redux Toolkit, React Context API, and useReducer.

Why this comes before the next step: Understanding state management tools is crucial for managing complex application states effectively.

Mini-project/Exercise: Create a shopping cart application that utilizes Redux Toolkit for global state management.

What to learn: Code-splitting, lazy loading, React.memo, and useMemo.

Why this comes before the next step: Learning optimization techniques will ensure your application remains fast and responsive as it scales.

Mini-project/Exercise: Optimize your shopping cart application to improve loading times and performance.

What to learn: Server-side rendering concepts, file-based routing, and static site generation with Next.js.

Why this comes before the next step: Server-side rendering is essential for SEO and improving initial load times in your applications.

Mini-project/Exercise: Migrate your shopping cart application to Next.js to implement server-side rendering.

What to learn: React Testing Library, Jest, and mock functions.

Why this comes before the next step: Mastery of testing is critical to ensure the stability and reliability of your applications as they grow.

Mini-project/Exercise: Write unit tests for your shopping cart application covering various use cases.

What to learn: Storybook, documentation best practices, and versioning.

Why this comes before the next step: Creating component libraries reinforces your understanding of component architecture and promotes code reuse.

Mini-project/Exercise: Create a mini component library using Storybook that includes various UI components for your shopping cart application.

This structured path will guide you step-by-step through essential concepts and practical applications in React development.

What to learn: Focus on core JavaScript concepts including variables, functions, arrays, and objects.

Why this comes before the next step: A solid grasp of JavaScript is critical since React builds upon these concepts. Without understanding how JavaScript works, learning React will feel overwhelming and confusing.

Mini-project/Exercise: Create a simple JavaScript application that manages a to-do list, allowing users to add, complete, and delete tasks.

What to learn: Learn ES6+ features like arrow functions, destructuring, template literals, and modules.

Why this comes before the next step: Modern JavaScript syntax makes React code cleaner and more efficient. Understanding these features will enhance your coding fluency.

Mini-project/Exercise: Refactor the to-do list app from Week 1 to utilize ES6+ features.

What to learn: Understand the fundamentals of React, including components, props, and JSX syntax.

Why this comes before the next step: Grasping these concepts is essential, as they form the building blocks of any React application.

Mini-project/Exercise: Build a static version of a personal portfolio site using React components.

What to learn: Dive into state management in React using hooks such as useState and useEffect.

Why this comes before the next step: Understanding state management is crucial for creating dynamic applications that respond to user inputs and updates.

Mini-project/Exercise: Enhance the portfolio site by adding a contact form that updates the state on user input.

What to learn: Learn to implement routing using React Router for single-page applications.

Why this comes before the next step: Routing enables users to navigate within your application seamlessly, which is fundamental for building real-world applications.

Mini-project/Exercise: Add routing to the portfolio site, allowing users to navigate between different sections like About and Projects.

What to learn: Understand how to fetch data from APIs using fetch and manage that data in your React components.

Why this comes before the next step: Integrating external data is a common requirement in applications and helps you learn how to manage asynchronous operations.

Mini-project/Exercise: Create a simple weather app that fetches data from a weather API and displays the forecast based on user input.

What to learn: Explore the Context API for managing global state in your application.

Why this comes before the next step: As your application grows, managing state efficiently is crucial. The Context API simplifies avoiding prop drilling.

Mini-project/Exercise: Refactor the weather app to use Context API for managing user preferences like temperature units.

What to learn: Learn how to deploy your React applications using services like Vercel or Netlify.

Why this comes before the next step: Deployment is the final step in the development process; understanding how to deploy your app makes your work accessible to others.

Mini-project/Exercise: Build and deploy a final project of your choice, showcasing all the skills learned throughout the path.

This syllabus is designed to systematically build your expertise in React, integrating hands-on projects with theoretical knowledge to solidify your understanding.

What to learn: Core concepts such as JSX, components, props, and state.

Why this comes before the next step: A strong grasp of these fundamentals is crucial for all subsequent topics, as they form the bedrock of React development.

Mini-project/Exercise: Create a simple to-do list application demonstrating these concepts.

What to learn: In-depth usage of Redux, React Context API, and reducers.

Why this comes before the next step: Effective state management is essential for scaling applications and handling complex data flows.

Mini-project/Exercise: Extend the to-do list app to incorporate Redux for state management.

What to learn: Setting up React Router for navigation, route parameters, and nested routes.

Why this comes before the next step: Understanding routing will enable you to build multi-page applications and handle user navigation seamlessly.

Mini-project/Exercise: Refactor your app to include multiple pages for different functionalities.

What to learn: Writing tests with Jest and React Testing Library for your components.

Why this comes before the next step: Testing ensures that your components work as expected and fosters confidence when deploying code.

Mini-project/Exercise: Write tests for your previous projects’ components to verify functionality.

What to learn: How to fetch data using Axios and manage asynchronous operations.

Why this comes before the next step: Integrating APIs is critical for real-world applications, providing dynamic data to users.

Mini-project/Exercise: Enhance your app to fetch tasks from a public API and display them.

What to learn: Techniques for optimizing React app performance, including code-splitting and using React.memo.

Why this comes before the next step: Optimizing performance is crucial for user experience, particularly in larger applications.

Mini-project/Exercise: Implement code-splitting in your app and deploy it to Vercel or Netlify.

This structured syllabus will guide you through advanced React development, ensuring a solid grasp of essential concepts while building real-world applications.

What to learn: Patterns like higher-order components (HOCs) and render props, along with the Context API.

Why this comes before the next step: Understanding these patterns is crucial for managing state and context in large applications.

Mini-project/Exercise: Create a theme switcher using the Context API to manage global state across components.

What to learn: Setting up Redux Toolkit, creating reducers, and actions for better state management.

Why this comes before the next step: Redux Toolkit simplifies state management, but you need a solid understanding of its structure before implementing it effectively.

Mini-project/Exercise: Build a simple to-do app that uses Redux Toolkit to manage the list of tasks.

What to learn: Techniques like memoization with React.memo, lazy loading components with React.lazy, and code splitting.

Why this comes before the next step: Knowing how to optimize your app will help in creating faster and more responsive applications.

Mini-project/Exercise: Refactor the to-do app from Week 2 to implement lazy loading for dynamically loaded components.

What to learn: How to create your own hooks and reusable components to encapsulate complex logic.

Why this comes before the next step: Custom hooks can greatly enhance code reusability and organization in larger apps.

Mini-project/Exercise: Develop a custom hook for form handling that can be reused across different forms.

What to learn: Writing tests for components using Jest and React Testing Library.

Why this comes before the next step: Testing ensures your applications are reliable and that changes don’t break existing functionality.

Mini-project/Exercise: Write tests for the components in your to-do app and verify their expected behavior.

What to learn: Deploying your app on platforms like Vercel or Netlify, and understanding core accessibility principles.

Why this comes before the next step: Deployment is the final step in the development process, and accessibility ensures your app is usable for everyone.

Mini-project/Exercise: Deploy your to-do app and conduct an accessibility audit using tools like axe.

This path is designed to build progressively on your existing knowledge, blending theory with practical application each week.

What to learn: Redux and React Query for managing global state and server state.

Why this comes before the next step: Understanding state management is vital for building scalable applications, as it lays the groundwork for how data flows in your app.

Mini-project/Exercise: Create a simple application that fetches data from a public API and manages the data using Redux and React Query.

What to learn: React Router for client-side routing.

Why this comes before the next step: Mastering routing is essential for building multi-page applications and understanding how to manage navigation state.

Mini-project/Exercise: Build a multi-page app that uses nested routes and query parameters with React Router.

What to learn: Performance tools like React.memo, useMemo, and useCallback.

Why this comes before the next step: Optimizing performance ensures your application runs smoothly, especially as complexity increases.

Mini-project/Exercise: Refactor your previous projects to implement these optimization techniques and measure performance improvements.

What to learn: Formik and Yup for handling forms and validations.

Why this comes before the next step: Mastering forms is fundamental for most applications, and having robust validation ensures data integrity.

Mini-project/Exercise: Create a user registration form that uses Formik and validates input with Yup.

What to learn: styled-components or Emotion for component-level styling.

Why this comes before the next step: Understanding styling at the component level allows for better encapsulation and reusability.

Mini-project/Exercise: Re-style your previous projects using styled-components or Emotion.

What to learn: Testing frameworks like Jest and React Testing Library.

Why this comes before the next step: Testing ensures that your applications work as intended and helps prevent errors down the line.

Mini-project/Exercise: Write unit tests and integration tests for the components you built throughout this path.