Monthly Subscription Starting at AED 99 + VAT

Developing Front-End Apps with React
  • Level Professional
  • Duration 14 hours
  • Course by IBM
  • Offered by

About

React is one of the most popular frameworks in the Web and Front-end application Development category. In this course, you will - build rich Front-End applications with React and ES6 - connect React components using data and state - write rich React components with advanced features like Hooks and Redux In addition, you will explore how to access the React web framework user interface (UI) library and run rich React applications. You will find ways to use React components and change their properties and states in a dynamic user interface. You will learn to connect to an external server from a React page. The course introduces different testing tools that you can use to test the component without manual verification. Throughout the course, you will complete numerous hands-on labs to gain practical experience. At the end of the course, you will demonstrate your React skills with a final project to add to your portfolio. This course will help you succeed as a front-end or full-stack developer. It suits those in IT looking to step up in their careers or new graduates seeking to establish their client-side skills. Note: This course requires knowledge of HTML, CSS, JavaScript and Git/GitHub

Modules

Welcome to the Course

    • 1 Videos
    • 1 Readings
    • 1 Plugin
Show info about module content

1 Videos

  • Course Introduction

1 Readings

  • Course Overview

Building Rich Front-End Applications with React and ES6

    • 5 Videos
    • 1 Readings
    • 1 ExternalTool
    • 1 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Lesson 1 Practice Quiz: Building Rich Front-End Applications with React and ES6

1 External Tool

  • Lab: Hello World with React

5 Videos

  • Introduction to Front-End Frameworks and React
  • Understand React Structure
  • Expert Viewpoints: Using Front-end JavaScript Frameworks
  • Introduction to ES6
  • Introduction to JSX

1 Readings

  • Lesson 1 Summary: Building Rich Front-End Applications with React and ES6

Introduction to Class Components

    • 5 Videos
    • 1 Readings
    • 1 ExternalTool
    • 1 Assignment
Show info about module content

1 Assignment

  • Lesson 2 Practice Quiz: Introduction to Class Components

1 External Tool

  • Lab: Content Rating Application to Like or Dislike Content

5 Videos

  • Introduction to Components
  • Working with React Class Components: Props and Event Handling
  • Introduction to States
  • Passing Data and States between Components
  • Class Component Lifecycle

1 Readings

  • Lesson 2 Summary: Introduction to Class Components

Module 1 Cheat Sheet, Glossary, and Graded Quiz

    • 1 Discussion
    • 2 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Module 1 Graded Quiz: Introduction to React and Class Components

1 Discussions

  • Introduce yourself and why you are interested in front-end development with React

Introduction to Function Components

    • 5 Videos
    • 1 Readings
    • 1 ExternalTool
    • 1 Assignment
Show info about module content

1 Assignment

  • Lesson 1 Practice Quiz: Introduction to Function Components

1 External Tool

  • Lab: Function Component Event Planner Landing Page

5 Videos

  • Working with Function Components: Props and Event Handling 
  • Component Composition
  • State Management in Function Components 
  • Function Component Lifecycle 
  • Testing React Components

1 Readings

  • Lesson 1 Summary: Introduction to Function Components

Array in React and DOM Manipulation

    • 2 Videos
    • 1 Readings
    • 1 ExternalTool
    • 1 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Lesson 2 Practice Quiz: Array in React and DOM Manipulation

1 External Tool

  • Lab: Todo List Application

2 Videos

  • Working with Arrays in React Components 
  • Virtual DOM Manipulation in React 

1 Readings

  • Lesson 2 Summary: Array in React and DOM Manipulation

Module 2 Cheat Sheet, Glossary, and Graded Quiz

    • 2 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Module 2 Graded Quiz: Understanding Function Components with Array and DOM Manipulation

Hooks and Form Management in React

    • 4 Videos
    • 1 Readings
    • 2 ExternalTool
    • 1 Assignment
Show info about module content

1 Assignment

  • Lesson 1 Practice Quiz: Hooks and Form Management in React

2 External Tool

  • Lab: Fetch Data Using useFetch 
  • Lab: Create Feedback Form for Survey

4 Videos

  • Hooks
  • Side-effects Management and Custom Hook 
  • Connecting React to External Services
  • Implementing Forms

1 Readings

  • Lesson 1 Summary: Hooks and Form Management in React

Application State Management with Redux

    • 5 Videos
    • 1 Readings
    • 1 ExternalTool
    • 1 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Lesson 2 Practice Quiz: Application State Management with Redux

1 External Tool

  • Lab: E-Commerce Data Rendering using React Toolkit

5 Videos

  • Introduction to Redux
  • Essential Concepts of Redux
  • Async with Redux
  • Binding Redux and Flow
  • Introduction to Redux Toolkit 

1 Readings

  • Lesson 2 Summary: Application State Management with Redux

Module 3 Cheat Sheet, Glossary, and Graded Quiz

    • 2 Plugin
    • 1 Assignment
Show info about module content

1 Assignment

  • Module 3 Graded Quiz: In-depth Understanding of Advanced React Functionality

Practice Assignment

    • 2 ExternalTool
    • 1 Plugin
Show info about module content

2 External Tool

  • Lab: Setting up the GitHub Environment
  • Practice Project: Conference Event Planner

Final Project and Peer Review Assignment

    • 1 Videos
    • 1 PeerReview
    • 1 ExternalTool
    • 1 Plugin
Show info about module content

1 External Tool

  • Final Project: Paradise Nursery Shopping Application

1 Peer Review

  • Peer Review Assignment

1 Videos

  • Final Project Walkthrough

Course Wrap-up

    • 1 Videos
    • 2 Readings
Show info about module content

1 Videos

  • Course Wrap-Up

2 Readings

  • Congratulations & Next Steps
  • Thanks from the course team

Auto Summary

Unlock the power of React with "Developing Front-End Apps with React," a robust course designed for aspiring and current IT professionals eager to master front-end web development. Brought to you by Coursera, this professional-level program immerses you in the dynamic world of React, one of the most popular frameworks for building sophisticated web applications. Throughout the course, you will: - Develop rich front-end applications using React and ES6. - Seamlessly connect React components through data and state management. - Enhance your React components with advanced features like Hooks and Redux. - Utilize the React web framework UI library to build dynamic user interfaces. - Integrate external servers with React pages. - Apply various testing tools for efficient component testing without manual checks. Your learning journey will be hands-on, filled with practical labs that solidify your understanding and skills. By the end of the course, you'll complete a final project to showcase your newly acquired React expertise in your portfolio. Ideal for IT professionals aiming to advance their careers and new graduates looking to establish strong client-side development skills, this course requires prior knowledge of HTML, CSS, JavaScript, and Git/GitHub. Duration: Approximately 840 hours Subscription: Available under the Starter plan Join now to transform your front-end development capabilities and propel your career forward with cutting-edge React skills.

IBM Skills Network Team
Instructors

IBM Skills Network Team

Richa Arora
Instructors

Richa Arora