VOOZH about

URL: https://www.coursera.org/learn/packt-react-basics-and-initial-projects-pgcvw

⇱ React Basics and Initial Projects | Coursera


React Basics and Initial Projects

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

Gain insight into a topic and learn the fundamentals.
Beginner 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.
Beginner level

Recommended experience

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

What you'll learn

  • Learn how to create React components and build dynamic UIs with JSX.

  • Understand React’s state management system and how to update state efficiently.

  • Master event handling, conditional rendering, and list rendering in React.

  • Implement React best practices for building interactive and maintainable web applications.

Details to know

Shareable certificate

Add to your LinkedIn profile

Recently updated!

May 2026

Assessments

11 assignments

Taught in English

Build your subject-matter expertise

This course is part of the The Complete React 19 Developer Course (incl. Next.js 16) 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 10 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.

This course is designed to provide a comprehensive introduction to React 19, focusing on essential concepts like JSX, components, and props, while also diving into state management and interactivity. You will learn through both theoretical concepts and practical applications by building real-world projects such as a to-do list app and Cambridge Rentals. With hands-on activities, this course encourages you to practice each new concept immediately. Throughout the modules, you'll start with React fundamentals, including JSX, components, and props, and progress to more complex topics like state management, event handling, and conditional rendering. The course includes professional projects where you will implement what you've learned in structured environments, enhancing your skills with real-world applications. These projects provide a thorough understanding of React and how to build dynamic, interactive applications. This course is suitable for beginners who are eager to explore the React ecosystem and for those looking to enhance their web development skills. While prior knowledge of HTML, CSS, and JavaScript will be helpful, it is not mandatory. We also recommend some experience with basic programming concepts. By the end of the course, you will be able to build interactive React applications, create and export components, manage state, and utilize React’s powerful features for dynamic rendering. You will also be able to apply your knowledge to develop real-world projects like rental websites and task management apps.

In this module, we will introduce the key concepts of React 19, including setting up your project with Vite. You will learn how to create your first React component, write JSX markup, and integrate JavaScript into JSX. This module also covers the importance of styling and passing props within components.

What's included

13 videos2 readings

13 videosβ€’Total 85 minutes
  • Introduction to the Specializationβ€’6 minutes
  • How to Setup React 19 with Viteβ€’6 minutes
  • Your First React Componentβ€’9 minutes
  • Exporting React Componentsβ€’2 minutes
  • Building UIs with JSX: Writing Markup in Reactβ€’9 minutes
  • Integrating JavaScript in JSX with Curly Bracesβ€’5 minutes
  • Styling React Componentsβ€’15 minutes
  • Working with Props in React Componentsβ€’9 minutes
  • Conditional Rendering 1β€’5 minutes
  • Conditional Rendering 2β€’5 minutes
  • Rendering Listsβ€’6 minutes
  • Keeping Components Pureβ€’4 minutes
  • Purity Props Exampleβ€’5 minutes
2 readingsβ€’Total 20 minutes
  • Introduction to the course 'React Basics and Initial Projects'β€’10 minutes
  • Full Course Resourcesβ€’10 minutes

In this module, we will revisit the fundamentals of JSX and recap its syntax, focusing on effective usage within React projects. You will learn about common mistakes developers make when using JSX and how to avoid them by applying best practices.

What's included

2 videos1 assignment

2 videosβ€’Total 29 minutes
  • JSX Reviewβ€’15 minutes
  • Common Mistakes - Best Practicesβ€’15 minutes
1 assignmentβ€’Total 15 minutes
  • JSX Review - Common mistakes - Best practices - Assessmentβ€’15 minutes

In this module, we will guide you through the Cambridge Rentals project, focusing on building key components like the header, footer, and property list. You will learn how to create dynamic content and structure your React app for future scalability.

What's included

11 videos1 assignment

11 videosβ€’Total 68 minutes
  • Introductionβ€’1 minute
  • Component Treeβ€’4 minutes
  • Building the File Structureβ€’7 minutes
  • Build the Headerβ€’8 minutes
  • Build the Titleβ€’4 minutes
  • Build the Footerβ€’10 minutes
  • Build the List of Propertiesβ€’14 minutes
  • Build the PropertyTypeLabel Componentβ€’4 minutes
  • Build the PropertyBanner Componentβ€’3 minutes
  • Build the IconWithText Componentβ€’6 minutes
  • Build the PropertyAttribute Componentβ€’7 minutes
1 assignmentβ€’Total 15 minutes
  • Professional Project - Cambridge Rentals - Assessmentβ€’15 minutes

In this module, we will explore how to add interactivity to your React app by responding to user events. You will learn how to manage state, handle events efficiently, and apply best practices to manage complex event interactions.

What's included

10 videos1 assignment

10 videosβ€’Total 79 minutes
  • Responding to Eventsβ€’4 minutes
  • Passing Event Handlers from a Parent to a Childβ€’5 minutes
  • Understanding Event Propagationβ€’5 minutes
  • Preventing Default Behaviourβ€’4 minutes
  • React Stateβ€’11 minutes
  • State Batching + Updating State Using a Value vs Functionβ€’5 minutes
  • Updating Objects in Stateβ€’6 minutes
  • Updating Arrays in Stateβ€’11 minutes
  • Create a Shopping Cartβ€’15 minutes
  • Trigger => Render => VirtualDOM => Commitβ€’14 minutes
1 assignmentβ€’Total 15 minutes
  • Adding Interactivity - Assessmentβ€’15 minutes

In this module, we will review the major concepts of adding interactivity in React, including common mistakes and how to avoid them. You will learn about the best practices for maintaining clean, efficient, and manageable interactivity.

What's included

1 video1 assignment

1 videoβ€’Total 5 minutes
  • Adding Interactivity - Reviewβ€’5 minutes
1 assignmentβ€’Total 15 minutes
  • Adding Interactivity Review - Common mistakes - Best practices - Assessmentβ€’15 minutes

In this module, we will guide you through building a to-do list app, from setting up the file structure to rendering tasks dynamically. You will learn to implement task management features like adding, editing, deleting, and making changes persistent using localStorage.

What's included

10 videos1 assignment

10 videosβ€’Total 54 minutes
  • Introductionβ€’1 minute
  • Component Treeβ€’2 minutes
  • Building the File Structureβ€’6 minutes
  • Rendering Tasksβ€’7 minutes
  • Building the TaskControls Componentβ€’7 minutes
  • Building the TaskForm Componentβ€’8 minutes
  • Toggle Task Completionβ€’4 minutes
  • Delete Tasksβ€’3 minutes
  • Edit Tasksβ€’12 minutes
  • Make Changes Persistent Using localStorageβ€’5 minutes
1 assignmentβ€’Total 15 minutes
  • Professional Project: To Do List App - Assessmentβ€’15 minutes

In this module, we will introduce React Reducer and explain its role in state management. You will learn how to create a reducer function and understand when it's appropriate to use it for managing complex state logic in your React applications.

What's included

2 videos1 assignment

2 videosβ€’Total 10 minutes
  • Introductionβ€’2 minutes
  • Create the Reducer Functionβ€’8 minutes
1 assignmentβ€’Total 15 minutes
  • React Reducer - Assessmentβ€’15 minutes

In this module, we will review common mistakes made while using React Reducer and share best practices to avoid them. You will also learn how to apply these best practices to effectively manage complex state in React applications.

What's included

1 video1 assignment

1 videoβ€’Total 4 minutes
  • React Reducer Review - Common mistakes and best practicesβ€’4 minutes
1 assignmentβ€’Total 15 minutes
  • React Reducer Review - Common mistakes and best practices - Assessmentβ€’15 minutes

In this module, we will walk you through the UK Driving Test project, showing how to apply React Reducer to manage the state. You will learn to structure components for quiz functionality, including question navigation and progress tracking.

What's included

12 videos1 assignment

12 videosβ€’Total 85 minutes
  • Introductionβ€’4 minutes
  • Component Treeβ€’4 minutes
  • Building the File Structureβ€’6 minutes
  • Managing Quiz State with useReducerβ€’10 minutes
  • QuestionView: QuestionHeaderβ€’10 minutes
  • QuestionView: QuestionTextβ€’5 minutes
  • QuestionView: AnswerOptionsβ€’7 minutes
  • QuestionView: MediaDisplayβ€’6 minutes
  • QuestionView: NavigationControlsβ€’10 minutes
  • ProgressBarβ€’5 minutes
  • AppBannerβ€’4 minutes
  • ResultViewβ€’14 minutes
1 assignmentβ€’Total 15 minutes
  • Professional Project: UK Driving Test - React Reducer - Assessmentβ€’15 minutes

In this module, we will introduce React Context and show how it simplifies state management by avoiding prop drilling. You will learn how to implement React Context in a real-world application, such as a to-do list app, to handle global state more efficiently.

What's included

2 videos1 reading3 assignments

2 videosβ€’Total 14 minutes
  • Introduction to React Contextβ€’7 minutes
  • Applying React Context to To-Do List Appβ€’7 minutes
1 readingβ€’Total 10 minutes
  • Conclusion to the Course 'React Basics and Initial Projects'β€’10 minutes
3 assignmentsβ€’Total 90 minutes
  • React Context - 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

Packt
1,946 Coursesβ€’575,115 learners

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 Basics and Initial Projects" is a comprehensive course designed to introduce learners to React, one of the most popular JavaScript libraries for building dynamic user interfaces. This course covers foundational topics like JSX, React components, props, state management, and event handling, making it relevant for anyone looking to dive into modern web development. With React's widespread use in both small and large-scale applications, mastering React is a highly valuable skill for front-end developers.

This course is a beginner-friendly introduction to React, focusing on setting up React projects, understanding JSX, creating components, managing state, and building interactive applications. It spans key topics from JSX syntax to more advanced concepts like React Context and Reducer. Additionally, it includes practical projects, allowing you to apply what you've learned to real-world scenarios, including a To-Do List app, a Cambridge Rentals website, and a UK Driving Test quiz app. This course is part of a broader React specialization, offering foundational knowledge before diving into more complex topics in later modules.

After completing this course, you'll be able to set up and build basic React applications, create and manage components, utilize JSX for rendering UI elements, pass and manage props, and handle state for dynamic data. You'll also gain hands-on experience in building professional-level projects such as a To-Do List app and a Cambridge Rentals website. The skills learned will enable you to create interactive and dynamic UIs and set you up for advanced React topics, including state management with Reducers and Context.

This course is designed for beginners, so prior experience with JavaScript, HTML, and CSS is helpful but not required. If you're familiar with basic web development and have a general understanding of programming concepts, you'll find this course accessible. However, if you're new to JavaScript or web development, it may be beneficial to review those topics before starting.

This course is ideal for aspiring front-end developers or anyone who wants to learn React. It's also suitable for web developers looking to transition into using React for building dynamic user interfaces. If you're a beginner eager to learn React or someone with basic knowledge of JavaScript looking to deepen your skills in modern web development, this course is for you.

The course consists of 7 hours and 30 minutes of video content. The exact time to complete will vary depending on how quickly you go through the material, but it is estimated to take between 7 and 10 hours to finish, including time spent on projects and reviewing concepts.

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,