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
This course is part of React Bootcamp with .NET API (Router, Redux Toolkit, Hooks) Specialization
Included with
Recommended experience
Recommended experience
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.
Skills you'll gain
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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 videos•Total 31 minutes
- Introduction to the Specialization•3 minutes
- Why Should You Learn React?•5 minutes
- Live Demo - Final Project•1 minute
- What We Will Build - Part 1•6 minutes
- What We Will Build - Part 2•6 minutes
- Course Prerequisites•2 minutes
- Project Resources•2 minutes
- Tools Needed•2 minutes
- Visual Studio Code Extensions•3 minutes
2 readings•Total 20 minutes
- Introduction to the Course 'React Fundamentals, Components, and State Management'•10 minutes
- Full Specialization Resources•10 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 videos•Total 38 minutes
- Set Up Basic HTML and Add React CDN•3 minutes
- First React Code•3 minutes
- Assignment 1 - Writing First React Code•1 minute
- Creating Element and Rendering in React•2 minutes
- What Is JSX?•5 minutes
- Better Way to Create React Projects•2 minutes
- Create Project•2 minutes
- Run the Project•2 minutes
- Cleanup Project•3 minutes
- Make the Project Functional Again•3 minutes
- First React Component•5 minutes
- Assignment 2 - React Component•1 minute
- Assignment 3 - Parent Child Component•1 minute
- Assignment 3 Solution - Parent-Child Component•2 minutes
- Rules of JSX•2 minutes
1 assignment•Total 15 minutes
- React Fundamentals - Assessment•15 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 videos•Total 66 minutes
- Work with Styles•4 minutes
- Adding Bootstrap Classes•2 minutes
- Work with Classes - Part 1•4 minutes
- Variables in JSX•3 minutes
- Assignment 3 - Adding Const•1 minute
- Assignment 3 Solution - Adding Constant.•1 minute
- HTML Element in JSX•4 minutes
- Student Component•6 minutes
- Export and Import Components•4 minutes
- Assignment 4 - Separating Student Component•1 minute
- Assignment 4 Solution - Separating Student Component•1 minute
- Props and Components•4 minutes
- Install Third-Party Libraries and Images•5 minutes
- Import Image and Header Design•3 minutes
- Footer and Main Body Component•4 minutes
- Assignment 5 - Fix Error and Designing•3 minutes
- Passing Components as Children•5 minutes
- Final Hierarchy•2 minutes
- Arrow Function•3 minutes
- Functional Versus Class Components•3 minutes
- Class Components•4 minutes
- Assignment 6 - Convert MainBody to Class Component•1 minute
1 assignment•Total 15 minutes
- React Components - Assessment•15 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 videos•Total 41 minutes
- Create CountOPedia•3 minutes
- Assignment 7 Solution - Set Up CountOPedia•4 minutes
- Counter Application Buttons•2 minutes
- Click Events•2 minutes
- Setting and Retrieving State•4 minutes
- Demo - React State•5 minutes
- State Summary•2 minutes
- New SetState Syntax•5 minutes
- CountOPedia UI•5 minutes
- Random Play and Reset Button•4 minutes
- Assignment 8 - Game Status and Last Play•1 minute
- Assignment 8 Solution - Game Status and Last Play•4 minutes
1 assignment•Total 15 minutes
- React State - CountOPedia - Assessment•15 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 videos•Total 103 minutes
- Create Project - ContactOPedia•3 minutes
- Add Components•5 minutes
- Skeleton of Components•5 minutes
- Add Contact UI•3 minutes
- Favorite and General Contact State•8 minutes
- Individual Contact UI•7 minutes
- Look and Feel ContactOPedia•3 minutes
- Add Contact Handler•5 minutes
- Add Contact in Action•5 minutes
- Add Validations•5 minutes
- Display Validation and Success Notification•3 minutes
- Toggle Favorites•9 minutes
- Assignment 9 - Delete Contact•1 minute
- Assignment 9 Solution - Delete Contact•3 minutes
- Add Random User to Contact List•4 minutes
- Axios Call•7 minutes
- Demo - Adding Random Contact•3 minutes
- Assignment 10 - Remove All Contact•0 minutes
- Assignment 10 Solution - Remove all Contact•2 minutes
- Which Contact Has to Be Updated•6 minutes
- Toggle UI Based on Update•6 minutes
- Cancel Button in Action•2 minutes
- Update Contact - Part 1•6 minutes
- Update Contact - Part 2•3 minutes
1 assignment•Total 15 minutes
- ContactOPedia - CRUD Operations - Assessment•15 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 videos•Total 45 minutes
- Create Project - CyclOPedia•3 minutes
- Set Up Random API•3 minutes
- Display Instructor•7 minutes
- componentDidUpdate•5 minutes
- Controlled Component•5 minutes
- Saving in Local Storage•6 minutes
- Separating Out Instructor•3 minutes
- componentWillUnmount•5 minutes
- Load Student List•6 minutes
- Bug Time•1 minute
1 assignment•Total 15 minutes
- CyclOPedia - Lifecycle Methods Class Components - Assessment•15 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 videos•Total 36 minutes
- Create WatchOPedia•5 minutes
- Set Up Counter•2 minutes
- useState in Action•5 minutes
- Gotchas with useState•5 minutes
- Objects and State•2 minutes
- Another Gotcha with useState•3 minutes
- Something Exciting•1 minute
- WatchOPedia Movie Setup•4 minutes
- Assignment 11 Solution - Display Movie List•3 minutes
- Assignment 12 Solution - Add a Movie to Watch•5 minutes
1 assignment•Total 15 minutes
- WatchOPedia - Hooks in React - Assessment•15 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 videos•Total 44 minutes
- Initial Project•3 minutes
- Name and Feedback Input fields•7 minutes
- useEffect Overview•7 minutes
- useEffect - First Render Only•2 minutes
- useEffect - Unmount in Action•2 minutes
- Assignment 13 - Use Effect•1 minute
- Assignment 13 Solution - Use Effect•2 minutes
- Load Student on Counter Update•4 minutes
- useRef and previous values•6 minutes
- useRef on Student Count•3 minutes
- More Common Uses of useRef•3 minutes
- uselD Hook•4 minutes
1 assignment•Total 15 minutes
- CyclOPedia - Lifecycle Methods Functional Components - Assessment•15 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 videos•Total 43 minutes
- Set Up RouteOPedia•4 minutes
- Create More Components•4 minutes
- First Route•6 minutes
- Link Component•3 minutes
- Assignment 14 - Product Routes•1 minute
- Assignment 14 Solution- Product Routes•3 minutes
- Nested Routes•2 minutes
- Index in Nested Route•1 minute
- Not Found•2 minutes
- Parameters in URL•6 minutes
- Assignment 15 - Parameters in URL•1 minute
- NavLink Component•3 minutes
- Navigate Using useNavigate Hook•2 minutes
- Using Link Component to Navigate•1 minute
- Another Navigation Method•3 minutes
- Navigate Back•2 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'React Fundamentals, Components, and State Management'•10 minutes
3 assignments•Total 90 minutes
- RouteOPedia - Routing in React - Assessment•15 minutes
- Full Course Assessment•60 minutes
- Full Course Practice Assessment•15 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
Explore more from Software Development
- Status: Free Trial
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
Why people choose Coursera for their career
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.
More questions
Financial aid available,
