Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off

One annual plan covers every course and certificate on Coursera. 40% off for a limited time.

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this course, you'll gain hands-on experience building a React-based developer portfolio. You’ll start by learning the essentials of React, including Hooks for managing state and logic, and then move on to creating basic components such as login pages and top navigation bars. You'll explore more advanced topics like creating dynamic content feeds, paginating data, and managing complex state with use Reducer and the Context API. You'll also dive into essential developer tools like Prettier for consistent code formatting and learn to apply best practices for organizing scalable React applications. This course is perfect for beginners looking to break into front-end development. By the end of the course, you will be able to build scalable React applications, manage user authentication, and showcase your work with a professional portfolio.

Syllabus

Getting Started

In this module, we will introduce you to the course and guide you through setting up your development environment. You'll learn the fundamentals of React, including the core concepts behind hooks and project architecture. By the end of this section, you'll be prepared to build a scalable React project and apply best practices.

Creating Basic Components

In this module, we will walk you through setting up routing and creating basic UI components, including a login page and a navigation bar. You'll also learn how to use React's useState Hook to manage state within components, ensuring a smooth user experience.

Introducing use Effect & Improving Authentication

In this module, we will dive into advanced React Hooks such as useEffect and useRef. You'll learn how to fetch data, manage side effects, and improve your app’s authentication system. This section also introduces custom hooks and state management for a more streamlined experience.

Creating Feed

In this module, we will guide you through building a content feed that fetches dynamic data. You'll implement pagination for smoother navigation, display popular tags for better content discovery, and personalize the feed for authenticated users.

Implementing Article Pages

In this module, we will show you how to design article pages and manage their state with the useReducer Hook. You’ll create forms to publish, edit, and delete articles, enabling you to manage content in your app effectively.

Adding User Pages

In this module, we will focus on building user-specific pages, such as the settings page and user profile. You will also implement features like article favoriting and learn how to optimize state management with useEffect.

Next Steps

In this module, we will recap key concepts covered throughout the course and provide you with exercises to reinforce your learning. You will also get a preview of the next steps in your React development journey.