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 5 modules in this course
A frontend application is expected to have an attractive, responsive UI and a seamless UX with swift navigable views. Single Page Applications (SPAs) fulfill these expectations as they are lighter and efficient. React, a popular JavaScript library is used for developing complex user interfaces for single page applications (SPAs). Facebook, Instagram, Netflix, Airbnb etc., are some of the famous websites that use React.
In this course, you will learn to construct an SPA by developing reusable and testable React Class components. The library helps you explore React features that enhance the performance of web applications by enabling partial page updates.
React element is the fundamental building block used for developing React SPAs. As a developer, you will be expected to create the stateless functional components of React using the React elements. In this learning sprint, you will explore the techniques used to render React elements conditionally, along with the techniques used to render multiple components. Hands-on practice provided during this learning sprint will enable you to add React to the existing websites and create functional components using the React elements.
Create a Simple React Program Using React Elements•4 minutes
Watch and Repeat : React Hello World•3 minutes
Watch and Repeat : React Table Element •3 minutes
Build and Render Stateless Components Using JavaScript Functions•3 minutes
Watch and Repeat : React Functional Component•2 minutes
Render React Components Based on Conditions•2 minutes
Watch and Repeat : React Conditional Rendering•4 minutes
Render Multiple Components Using Lists and Keys•2 minutes
Watch and Repeat : React List and Keys•2 minutes
Practice Brief•1 minute
Practice Debrief•3 minutes
Learning Consolidation•1 minute
2 readings•Total 20 minutes
Instructions to upload the Programming Assignment Solution•10 minutes
Get Started with React Fundamentals•10 minutes
1 assignment•Total 20 minutes
Get Started with React Fundamentals•20 minutes
1 programming assignment•Total 75 minutes
GlassKart•75 minutes
Build Stateful Components using React
Module 2•3 hours to complete
Module details
Interactive React web pages require stateful components to manage their own state which can be even pass down to its child components using props. As a developer, you will be required to create stateful components to accept user inputs, to add elements which are interactive and fetch data before rendering.
In this learning sprint , you will learn to create React class components and manage state by handling events. You will explore the concept of virtual DOM and reconciliation. Hands-on practice will help you to build stateful class components with better code readability using JSX syntax.
Build Stateful Class Components Using ES6 Syntax•1 minute
Watch and Repeat : React Stateful Components Using React Class•4 minutes
Manage State by Handling Events With React Elements•4 minutes
Watch and Repeat : React Event Handling•3 minutes
Explain Reconciliation and Virtual DOM•2 minutes
Create More Readable Views Using JSX•5 minutes
Watch and Repeat : JSX expressions •8 minutes
Watch and Repeat : Conditional Rendering and Event Handling using JSX•6 minutes
Practice Brief•2 minutes
Practice Debrief•3 minutes
Learning Consolidation•2 minutes
1 reading•Total 10 minutes
Build Stateful Components using React•10 minutes
1 assignment•Total 30 minutes
Build Stateful Components using React•30 minutes
1 programming assignment•Total 75 minutes
Pomodoro•75 minutes
Break the UI into a Component Hierarchy
Module 3•5 hours to complete
Module details
Single Page Applications created on component-based-approach scales well as the components can be reused. While developing an SPA, the first step is to identify components and build its hierarchy. As a front-end developer, you will be required to identify and create reusable components for the React web application. In this learning sprint, you will explore the principles required to break down a user interface into a component hierarchy. You will also learn how to share data between multiple components. Hands-on practice will help you to acquire skills to create React projects quickly using the create-react-app tool which offers a modern build setup with no configuration.
Apply the Principles Used to Break Down the User Interface (UI) into Components•4 minutes
Apply the Principles Used to Break Down the User Interface (UI) into Components•5 minutes
Watch and Repeat : Create React Project using Create-React-App tool•6 minutes
Watch and Repeat : Import and Export Modules•5 minutes
Pass data through Component Tree Using Context•4 minutes
Watch and Repeat : React Lift State up•3 minutes
Watch and Repeat : React Context•5 minutes
Reuse Code between Components Using React Composition•2 minutes
Watch and Repeat : React Component Composition•5 minutes
Practice Brief•3 minutes
Practice Debrief•3 minutes
Challenge Brief•2 minutes
Challenge Debrief•3 minutes
Learning Consolidation•2 minutes
1 reading•Total 10 minutes
Break the UI into a Component Hierarchy•10 minutes
1 assignment•Total 25 minutes
Break the UI into a Component Hierarchy•25 minutes
2 programming assignments•Total 220 minutes
Break UI Into Component Hierarchy - Journler•145 minutes
Break UI Into A Component Hierarchy - Pomodoro•75 minutes
Manage Application State using Life Cycle Methods
Module 4•5 hours to complete
Module details
State management is a complex process that requires clear understanding of a component’s life cycle. To efficiently manage state at various phases in the life of component, a front-end developer is expected to have skills to work effortlessly with the life cycle methods of the React component.
In this learning sprint, you will learn about the different life cycle methods that help monitor and manipulate the React class components. Hands-on exercises provided with this sprint enables you to manage the component state while fetching data from the server and to handle the JavaScript errors.
Override React Component's Life Cycle Methods•11 minutes
Watch and Repeat : Mounting Phase in React Life Cycle Method•4 minutes
Watch and Repeat : Updating and UnMounting Phase in React Life Cycle Method•6 minutes
Define Error Boundaries to Catch JavaScript Errors•2 minutes
Watch and Repeat : Error Boundary•3 minutes
Make HTTP Requests with Axios API to Communicate With Servers•4 minutes
Watch and Repeat : Axios API•10 minutes
Practice Brief•1 minute
Practice Debrief•3 minutes
Challenge Brief•2 minutes
Challenge Debrief•3 minutes
Learning Consolidation•1 minute
1 reading•Total 10 minutes
Manage Application State using Life Cycle Methods•10 minutes
1 assignment•Total 30 minutes
Manage Application State using Life Cycle Methods •30 minutes
2 programming assignments•Total 220 minutes
Manage Application State using Life Cycle Methods - Pomodoro•75 minutes
Manage Application State Using Life Cycle Methods-Journler •145 minutes
Test React Class Components using Jest
Module 5•3 hours to complete
Module details
Testing is an integral process of development as it helps in identifying defects/bugs during the early stages of development. Unit testing involves testing of individual components of the software program or application. As a React developer, the components should be adequately tested for correctness, completeness and performance.
In this learning sprint, you will learn to write test code for testing React class components using Jest framework. Hands-on exercises of this sprint will help you to explore common testing patterns for writing test codes. The exercises will enable you to write test cases for various state management scenarios.
Established in 1981, NIIT offers Managed Training Services to market-leading companies in 30 countries worldwide. NIIT’s comprehensive suite of Managed Training Services includes bespoke curriculum design and content development, learning administration, learning delivery, strategic sourcing, learning technology, and advisory services.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid 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.