VOOZH about

URL: https://www.coursera.org/learn/packt-react-fundamentals-components-and-state-management-pbigl

⇱ React Fundamentals, Components, and State Management | Coursera


React Fundamentals, Components, and State Management

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

React Fundamentals, Components, and State Management

Included with

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

What you'll learn

  • Understand the fundamental concepts of React, including JSX, components, and state.

  • Master React hooks like useState and useEffect to build dynamic applications.

  • Learn how to work with routing and implement nested routes in React applications.

  • Build real-world React projects to deepen your understanding of React components and state management.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

10 assignments

Taught in English

Build your subject-matter expertise

This course is part of the React Bootcamp with .NET API (Router, Redux Toolkit, Hooks) Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 9 modules in this course

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. Learn React from scratch with this comprehensive course, covering core concepts like components, state management, and React hooks. You'll gain hands-on experience building real-world applications like CountOPedia, ContactOPedia, and RouteOPedia. As you progress, you'll master React fundamentals, work with lifecycle methods, and explore advanced techniques like routing and hooks to manage state and data. Starting with setting up your development environment and writing your first React code, you'll gradually dive into creating reusable components, handling events, and managing state. This course is for web developers with basic programming knowledge in JavaScript, HTML, CSS, and .NET APIs. By the end of this course, you'll be able to build dynamic React applications with state and lifecycle management, use React hooks effectively, and implement routing for complex, interactive web apps.

In this module, we will introduce you to the world of React, highlighting why it's a must-learn technology for web developers today. You’ll also get a glimpse into the exciting projects you will build during the course and gain an understanding of the tools and prerequisites required to get started on your React journey. This section sets the stage for your learning, ensuring you’re well-equipped for the upcoming lessons.

What's included

9 videos2 readings

9 videosTotal 31 minutes
  • Introduction to the Specialization3 minutes
  • Why Should You Learn React?5 minutes
  • Live Demo - Final Project1 minute
  • What We Will Build - Part 16 minutes
  • What We Will Build - Part 26 minutes
  • Course Prerequisites2 minutes
  • Project Resources2 minutes
  • Tools Needed2 minutes
  • Visual Studio Code Extensions3 minutes
2 readingsTotal 20 minutes
  • Introduction to the Course 'React Fundamentals, Components, and State Management'10 minutes
  • Full Specialization Resources10 minutes

In this module, we will dive into the core fundamentals of React, from setting up your first project to understanding the power of JSX. You’ll get hands-on experience by writing your first React code and exploring its syntax, as well as learning efficient project setup practices. By the end of this section, you will have a solid grasp of how to create and run your own React applications.

What's included

15 videos1 assignment

15 videosTotal 38 minutes
  • Set Up Basic HTML and Add React CDN3 minutes
  • First React Code3 minutes
  • Assignment 1 - Writing First React Code1 minute
  • Creating Element and Rendering in React2 minutes
  • What Is JSX?5 minutes
  • Better Way to Create React Projects2 minutes
  • Create Project2 minutes
  • Run the Project2 minutes
  • Cleanup Project3 minutes
  • Make the Project Functional Again3 minutes
  • First React Component5 minutes
  • Assignment 2 - React Component1 minute
  • Assignment 3 - Parent Child Component1 minute
  • Assignment 3 Solution - Parent-Child Component2 minutes
  • Rules of JSX2 minutes
1 assignmentTotal 15 minutes
  • React Fundamentals - Assessment15 minutes

In this module, we will take a deep dive into React components—the building blocks of any React application. You will learn to create both functional and class components, manage dynamic content, and pass data between components using props. Additionally, we’ll explore how to style your components using CSS and Bootstrap, making your applications both functional and visually appealing.

What's included

22 videos1 assignment

22 videosTotal 66 minutes
  • Work with Styles4 minutes
  • Adding Bootstrap Classes2 minutes
  • Work with Classes - Part 14 minutes
  • Variables in JSX3 minutes
  • Assignment 3 - Adding Const1 minute
  • Assignment 3 Solution - Adding Constant.1 minute
  • HTML Element in JSX4 minutes
  • Student Component6 minutes
  • Export and Import Components4 minutes
  • Assignment 4 - Separating Student Component1 minute
  • Assignment 4 Solution - Separating Student Component1 minute
  • Props and Components4 minutes
  • Install Third-Party Libraries and Images5 minutes
  • Import Image and Header Design3 minutes
  • Footer and Main Body Component4 minutes
  • Assignment 5 - Fix Error and Designing3 minutes
  • Passing Components as Children5 minutes
  • Final Hierarchy2 minutes
  • Arrow Function3 minutes
  • Functional Versus Class Components3 minutes
  • Class Components4 minutes
  • Assignment 6 - Convert MainBody to Class Component1 minute
1 assignmentTotal 15 minutes
  • React Components - Assessment15 minutes

In this module, you will focus on managing state in React by building an interactive counter application, CountOPedia. You’ll learn how to store and update state dynamically in your React components. With a series of hands-on exercises, you will develop an understanding of how to handle stateful components and react to user interactions in real time.

What's included

12 videos1 assignment

12 videosTotal 41 minutes
  • Create CountOPedia3 minutes
  • Assignment 7 Solution - Set Up CountOPedia4 minutes
  • Counter Application Buttons2 minutes
  • Click Events2 minutes
  • Setting and Retrieving State4 minutes
  • Demo - React State5 minutes
  • State Summary2 minutes
  • New SetState Syntax5 minutes
  • CountOPedia UI5 minutes
  • Random Play and Reset Button4 minutes
  • Assignment 8 - Game Status and Last Play1 minute
  • Assignment 8 Solution - Game Status and Last Play4 minutes
1 assignmentTotal 15 minutes
  • React State - CountOPedia - Assessment15 minutes

In this module, we’ll guide you through the process of building ContactOPedia—a React app that handles a list of contacts. You’ll master performing CRUD operations, using Axios to interact with external APIs, and building interactive forms. This section also focuses on adding validation to ensure the integrity of the contact data, enhancing your app’s usability.

What's included

24 videos1 assignment

24 videosTotal 103 minutes
  • Create Project - ContactOPedia3 minutes
  • Add Components5 minutes
  • Skeleton of Components5 minutes
  • Add Contact UI3 minutes
  • Favorite and General Contact State8 minutes
  • Individual Contact UI7 minutes
  • Look and Feel ContactOPedia3 minutes
  • Add Contact Handler5 minutes
  • Add Contact in Action5 minutes
  • Add Validations5 minutes
  • Display Validation and Success Notification3 minutes
  • Toggle Favorites9 minutes
  • Assignment 9 - Delete Contact1 minute
  • Assignment 9 Solution - Delete Contact3 minutes
  • Add Random User to Contact List4 minutes
  • Axios Call7 minutes
  • Demo - Adding Random Contact3 minutes
  • Assignment 10 - Remove All Contact0 minutes
  • Assignment 10 Solution - Remove all Contact2 minutes
  • Which Contact Has to Be Updated6 minutes
  • Toggle UI Based on Update6 minutes
  • Cancel Button in Action2 minutes
  • Update Contact - Part 16 minutes
  • Update Contact - Part 23 minutes
1 assignmentTotal 15 minutes
  • ContactOPedia - CRUD Operations - Assessment15 minutes

This module delves into the lifecycle methods of React class components, which allow you to manage state and side effects at different stages of a component’s life. You will learn how to handle data fetching, cleanup operations, and component updates using lifecycle methods such as componentDidUpdate and componentWillUnmount. By the end of this section, you’ll be proficient in using these methods to build efficient React apps.

What's included

10 videos1 assignment

10 videosTotal 45 minutes
  • Create Project - CyclOPedia3 minutes
  • Set Up Random API3 minutes
  • Display Instructor7 minutes
  • componentDidUpdate5 minutes
  • Controlled Component5 minutes
  • Saving in Local Storage6 minutes
  • Separating Out Instructor3 minutes
  • componentWillUnmount5 minutes
  • Load Student List6 minutes
  • Bug Time1 minute
1 assignmentTotal 15 minutes
  • CyclOPedia - Lifecycle Methods Class Components - Assessment15 minutes

In this module, we will explore React hooks in depth, focusing on useState and useEffect to manage state and handle side effects in functional components. You will also discover advanced techniques for troubleshooting common issues with hooks. By building the WatchOPedia project, you’ll gain practical experience using hooks to create interactive, real-time React applications.

What's included

10 videos1 assignment

10 videosTotal 36 minutes
  • Create WatchOPedia5 minutes
  • Set Up Counter2 minutes
  • useState in Action5 minutes
  • Gotchas with useState5 minutes
  • Objects and State2 minutes
  • Another Gotcha with useState3 minutes
  • Something Exciting1 minute
  • WatchOPedia Movie Setup4 minutes
  • Assignment 11 Solution - Display Movie List3 minutes
  • Assignment 12 Solution - Add a Movie to Watch5 minutes
1 assignmentTotal 15 minutes
  • WatchOPedia - Hooks in React - Assessment15 minutes

In this module, we will focus on applying lifecycle methods in React functional components using hooks like useEffect, useRef, and useID. You will learn how to execute side effects only when necessary, track state changes, and create accessibility-friendly components. This section will further enhance your ability to manage side effects and optimize the performance of your React applications.

What's included

12 videos1 assignment

12 videosTotal 44 minutes
  • Initial Project3 minutes
  • Name and Feedback Input fields7 minutes
  • useEffect Overview7 minutes
  • useEffect - First Render Only2 minutes
  • useEffect - Unmount in Action2 minutes
  • Assignment 13 - Use Effect1 minute
  • Assignment 13 Solution - Use Effect2 minutes
  • Load Student on Counter Update4 minutes
  • useRef and previous values6 minutes
  • useRef on Student Count3 minutes
  • More Common Uses of useRef3 minutes
  • uselD Hook4 minutes
1 assignmentTotal 15 minutes
  • CyclOPedia - Lifecycle Methods Functional Components - Assessment15 minutes

In this final module, we will guide you through the process of adding routing to your React applications using React Router. You’ll learn to create multiple routes, handle dynamic URLs with parameters, and implement nested routes for a more complex user experience. By the end of this section, you’ll be able to build fully navigable React applications with ease.

What's included

16 videos1 reading3 assignments

16 videosTotal 43 minutes
  • Set Up RouteOPedia4 minutes
  • Create More Components4 minutes
  • First Route6 minutes
  • Link Component3 minutes
  • Assignment 14 - Product Routes1 minute
  • Assignment 14 Solution- Product Routes3 minutes
  • Nested Routes2 minutes
  • Index in Nested Route1 minute
  • Not Found2 minutes
  • Parameters in URL6 minutes
  • Assignment 15 - Parameters in URL1 minute
  • NavLink Component3 minutes
  • Navigate Using useNavigate Hook2 minutes
  • Using Link Component to Navigate1 minute
  • Another Navigation Method3 minutes
  • Navigate Back2 minutes
1 readingTotal 10 minutes
  • Conclusion to the Course 'React Fundamentals, Components, and State Management'10 minutes
3 assignmentsTotal 90 minutes
  • RouteOPedia - Routing in React - Assessment15 minutes
  • Full Course Assessment60 minutes
  • Full Course Practice Assessment15 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Offered by

Explore more from Software Development

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

React Fundamentals, Components, and State Management is a comprehensive course designed to teach you the core concepts and tools of React, a widely-used JavaScript library for building user interfaces. React is relevant in the modern web development landscape because it allows developers to create dynamic, fast, and scalable applications. Understanding React's components and state management is crucial for building interactive web apps and managing data flow efficiently.

This course focuses on teaching the foundational aspects of React, including creating components, understanding JSX, and managing state. It covers the key features of React, such as functional and class components, the use of hooks, lifecycle methods, and routing. By working through multiple projects like TaskOPedia, CountOPedia, and ContactOPedia, you will learn how to apply React concepts in real-world applications, ensuring that you develop a solid foundation in React development.

After completing this course, you will have the ability to create dynamic, interactive web applications using React. You will be proficient in building React components, managing state, working with React hooks, and handling events. You will also have hands-on experience with popular tools like Redux and React Router. Additionally, you will be able to apply your knowledge to build both small-scale and complex React projects.

To enroll in this course, you should have a basic understanding of programming concepts. Familiarity with HTML, CSS, and JavaScript is essential, as the course assumes you have a foundational understanding of these web technologies. Additionally, some knowledge of .NET API CRUD operations will help, especially when dealing with backend integration.

This course is ideal for developers looking to learn React from scratch and those interested in expanding their web development skills. Whether you are a beginner in JavaScript or have some experience with front-end development, this course will help you gain proficiency in React and state management. It is also suitable for individuals looking to improve their skills in creating dynamic user interfaces and understanding stateful applications.

The course duration is approximately 7 hours. This time frame includes watching the video lessons, completing assignments, and working through practical examples. Depending on your prior knowledge and pace, the total time may vary slightly.

Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.

If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.

Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,