Master React, Redux and Next.js - The Practical Course

Packt via Coursera

Go to class Write review

Overview

Google, IBM & Meta Certificates – 40% Off

One Coursera Plus subscription covers most Professional Certificates on Coursera.

Unlock All Certificates

This course equips you with in-depth React, Redux, and Next.js skills. Build dynamic apps, handle state efficiently, optimize with React Hooks, and deploy using Vercel. Real-world projects will prepare you for modern web development challenges. Explore the power of React, Redux, and Next.js in this course designed for developers eager to dive into modern web development. Starting with the essentials of React, you'll learn to build interactive UIs and use hooks to manage component state. The course then moves into Redux for managing global state and dives deep into advanced concepts like reducers and custom hooks. Next, you’ll explore the scalability of Next.js, from static site generation to server-side rendering, and how to deploy your apps using platforms like GitHub Pages and Vercel. With practical projects like a Task Manager, Blog Website, and Match the Pairs Game, you'll gain the hands-on experience needed to create and optimize complex web applications. The course also emphasizes performance optimization and responsive design, teaching you how to leverage React’s capabilities to build fast, reliable applications. By the end of the course, you'll be confident in your ability to create efficient, scalable web apps using React and Next.js, as well as deploy them to production environments. With a comprehensive understanding of state management and server-side rendering, you’ll be well-equipped to tackle real-world development challenges. Plus, you’ll be prepared to build apps that provide a seamless user experience, all while using industry-standard technologies. This course is ideal for developers with some experience in JavaScript or front-end development. If you’re eager to advance your skills in React, Redux, and Next.js, and build real-world applications, this course is for you. Whether you're a junior developer aiming to level up or a self-taught developer looking for structure, this course will provide the tools and knowledge you need to build powerful web apps. Familiarity with HTML, CSS, and JavaScript basics is recommended. Learn React, Redux, and Next.js through practical, hands-on projects. From building dynamic UIs with React components to managing global state with Redux and deploying scalable apps using Next.js, this course covers it all. You’ll gain skills that are immediately applicable in modern web development environments. This course is based on Master React, Redux and Next.js - The Practical Course, by Ahmed Elsakka. This video is licensed and distributed by Packt. All rights reserved. Packt is one of the world's most prolific publishers of cutting-edge technical content. For over two decades we've made it our mission to curate and publish the knowledge of only the very best technical experts. We focus on real-world courses that help our customers get the job done, with coverage that extends across a wide range of established and cutting-edge technical topics. If you're an individual or an organisation that embraces learning by doing, Packt is the perfect fit for you.

Syllabus

Introduction
- This module introduces the fundamentals of React, including its core concepts and how it transforms web development through a component-based approach. Learners will also gain hands-on experience setting up a React development environment with essential tools and dependencies.
React Basics
- This module introduces the fundamentals of React, covering how to set up a project, create components, use JSX, manage state and props, and handle user interactions. Learners will gain hands-on experience building a profile card and understanding core React concepts.
Project - Task Manager
- This module guides learners through the process of building a Task Manager application using React. It covers component design, state management, event handling, and styling to create a functional and visually appealing task management system.
React Hooks
- This module covers the essential React Hooks used to manage state, side effects, and performance in functional components. Learners will explore how to implement hooks like useContext, useReducer, useMemo, useRef, and custom hooks to build more efficient and maintainable React applications.
Side Effects in React
- This module explores the concept of side effects in React and how to manage them effectively. Learners will gain practical skills in using the useEffect hook, managing dependencies, and implementing cleanup functions to improve application performance and avoid common issues.
Project - SpaceX Launches Tracker
- This module focuses on developing a web application for tracking SpaceX launches, covering component creation, pagination implementation, and website styling. Learners will gain hands-on experience in building and enhancing a React-based application with effective state management and user interface design.
Testing in React
- This module introduces the essential concepts of testing in React, including setting up tests with Jest, writing test cases, using matchers for assertions, and organizing tests into suites. Learners will gain hands-on experience in implementing test practices that ensure reliable React applications.
Redux
- This module introduces learners to Redux and its role in managing global state in React applications. It covers fundamental concepts such as actions, reducers, the store, and the Redux Toolkit, which simplifies state management. Learners will gain practical skills for implementing and optimizing state management in real-world applications.
Debugging and Deploying React Applications
- This module equips learners with essential skills in debugging React applications using developer tools and deploying them to popular platforms like GitHub Pages and Vercel. It covers key steps, requirements, and best practices for effective debugging and deployment in real-world scenarios.
Project - Match the Pairs Game
- This module guides learners through the development of a Match the Pairs game, covering key aspects of React development such as component structure, styling, game logic, and state management. Learners will gain hands-on experience in building interactive game features and implementing functional controls.
Project - Painter Application
- This module guides learners through the process of building a simple painter application using React and HTML canvas. It covers setting up the application structure, implementing drawing functionality, and designing a user-friendly menu component. Learners will gain hands-on experience with state management, styling, and user interaction.
Using Tailwind CSS with React
- This module teaches how to integrate and use Tailwind CSS with React to build responsive, stylish, and interactive user interfaces. Learners will explore utility classes for spacing, colors, fonts, and layout, as well as how to create reusable components and apply styling to a project. The module includes a hands-on project to practice these skills.
GraphQL with React
- This module provides an introduction to using GraphQL with React, covering key concepts such as API interaction, authentication, client setup, and data retrieval. Learners will gain hands-on experience with the GitHub GraphQL API and Apollo Client to build efficient data-driven applications.
React the Legacy Way: Class Components
- This module explores the foundational aspects of React class components, including their structure, state management, and lifecycle methods. Learners will gain insight into how these components function and how they differ from modern functional components. The content prepares learners to effectively implement and manage class-based React components.
Project - Weather Dashboard Using Class Components
- This module guides learners through building a weather dashboard using React class components, integrating APIs, managing state, and implementing user interactions. Learners will gain hands-on experience in structuring UI with JSX, handling events, and styling with Tailwind CSS.
React Router
- This module explores the fundamentals of React Router, including setting up navigation, using NavLink for route transitions, implementing nested routes, and managing programmatic navigation and URL parameters. Learners will gain practical skills in building dynamic, route-based React applications.
Project - Online Shopping Website
- This module guides learners through the process of building a functional online shopping website using React, React Router, and Tailwind CSS. It covers project setup, component creation, and navigation configuration, while emphasizing practical implementation and design techniques.
Using Next.js
- This module provides a comprehensive overview of building server-rendered React applications using Next.js. Learners will explore project setup, styling, performance optimization, navigation, and deployment strategies. By the end, students will be able to develop and deploy functional Next.js applications with efficient design and performance.
Project - Building a Blog Website with Next.js
- This module guides learners through the process of building a fully functional blog website using Next.js, Supabase, Prisma, and Tailwind CSS. Students will learn to set up a database, integrate APIs, style applications, and deploy their projects to Vercel. By the end, they will have a working blog application with dynamic content and responsive design.