Web Apps Developer with React E-Learning

Discover React, an open-source JavaScript library for building user interfaces maintained by Facebook, Instagram, and independent developers. In this learning collection, the focus will be on building applications using React.
Also discover Redux, an open-source JavaScript library that is generally used to manage application states. Redux is commonly used with React libraries. You will learn the approach of Reactive programming using various components of React and Redux. This learning also covers various advanced concepts with extensive coverages of essential debugging and testing skills for single-page applications and complex applications.

Learning Kits are structured learning paths, mainly within the Emerging Tech area. A Learning Kit keeps
the student working toward an overall goal, helping them to achieve your career aspirations. Each part takes the student step by step through a diverse set of topic areas. Learning Kits are
made up of required tracks, which contain all of the learning resources available such as Assessments (Final Exams), Mentor, Practice Labs and of course E learning. And all resources with a 365 days access from first activation.

This Learning Kit, with more than 16:29 hours of online content, is divided into the following tracks:

Course content

E-learning courses (16 + hours):

Build Apps Using React: Introducing React for Web Applications

Course: 1 Hour, 44 Minutes

• Course Overview
• Introducing React
• Thinking in React
• React Features
• Exploring React Features
• The Virtual DOM
• Creating a Simple Static HTML Page
• Exploring the Static HTML Page
• Referencing Production React Libraries
• Creating Nested Elements - Part 1
• Creating Nested Elements - Part 2
• Introducing JSX
• The Babel Compiler
• Working with JSX and the Babel Compiler
• More Practice with JSX
• Simple Expressions with JSX
• More Expressions with JSX
• Course Summary

Build Apps Using React: Local Machine & Online Playgrounds

Course: 1 Hour, 41 Minutes

• Course Overview
• MacOS: Installing Node.js and npm
• Windows: Installing Node.js and npm
• Serving Web Pages Using a Local HTTP Server
• Rendering Elements
• Smart Rendering
• Introducing React Components
• Building Multiple Components
• The CodePen Online Playground
• CodePen: Using the Babel Preprocessor
• CodePen: Building a React App Using Components
• The CodeSandbox Online Playground
• The Glitch Online Playground
• Using Create React App on the Local Machine
• Function Components
• Composing Components
• Course Summary

Build Apps Using React: Props & State

Course: 1 Hour, 46 Minutes

• Course Overview
• Introducing Props and State
• Similarities and Differences between Props and State
• Working with Props
• Props with Expressions
• Transferring Props Manually
• Transferring Props Using the Spread Operator
• Dynamic Types with Props
• Default Props
• Validating Props
• Accessing Children Using Props
• Using Expressions to Pass in Props Values
• Functions as Children
• Introducing State
• Updating State
• Event Handlers to Update State
• Accessing Previous State
• Course Summary

Build Apps Using React: Working with Events

Course: 1 Hour, 49 Minutes

• Course Overview
• Events: Capture and Bubble Phases
• Introducing Synthetic Events
• Component Lifecycle
• DOM Reconciliation
• Working with Events
• Prevent Default Event Handling
• Synthetic Events
• Toggling State
• Mounting Phase
• Component Did Mount
• Unmounting Phase
• Update Phase
• Optimizing Performance
• Error Boundaries
• Course Summary

Build Apps Using React: Working with Forms

Course: 1 Hour, 21 Minutes

• Course Overview
• Controlled Components
• Controlled Components for Multi-input Forms - Part I
• Controlled Components for Multi-input Forms - Part 2
• Single Event Handler for Multiple Inputs
• Form Elements as Individual Components
• Testing Form Setup
• Client-side Validation
• Validating Form Input
• Uncontrolled Components
• File Inputs in Forms
• Course Summary

Build Apps Using React: Advanced Features in React

Course: 1 Hour, 48 Minutes

• Course Overview
• Lists without Keys
• Unique Keys for Lists
• Correct Key Usage
• Rendering Using Conditional If
• Conditional Rendering Using Variables
• Conditional Rendering Using Inline Logical Operators
• Ternary Operators and Preventing Rendering
• Local State
• Disadvantages of Local State
• Removing State from Lower Level Components
• Lifting State up to Higher Level Components
• Code Reuse Using Inheritance
• Code Reuse Using Composition
• Using Composition to Customize Child Elements
• Using Composition for Specialization
• Global Properties without Context
• Using Context to Specify Global Properties
• Course Summarys

Build Apps Using React: In Development & Production

Course: 1 Hour, 9 Minutes

• Course Overview
• Setting up a Simple Comment Application
• Adding State to the Application
• Adding New Comments
• Deleting Comments
• React Developer Tools
• Exploring Components with React Developer Tools
• Profiling Applications Using React Developer Tools
• Creating a Production Build
• Exploring the Files in a Production Build
• Serving a Production Build
• Course Summary

Reactive Programming Using Redux

Course: 1 Hour, 27 Minutes

• Features of Reactive Programming
• Challenges of Reactive Programming
• Capabilities of React
• JavaScript Enhancement and React
• Node.js Concepts Used in React
• Installing React Using NPM, Babel, and Webpack
• Transpilation of JavaScript Using Babel
• Creating React Applications
• Anatomy of a React Project
• Running and Debugging React Apps
• React Component Types
• Using Props for Data Management
• Exercise: Creating and Debugging React Applications

Build & Integrate React Applications with Redux Capabilities

Course: 1 Hour, 25 Minutes

• Create Functional Components in React
• Props Validation with PropTypes
• React Component Lifecycle
• Event Handling Concepts in React
• Event Handling in React
• Forms Usage in React
• Redux Capabilities
• Redux Components and Lifecycle
• Redux-devtools-extension Capabilities
• Actions and Reducers of Redux
• Store Features of Redux Applications
• Redux Data Flow Lifecycle
• Exercise: Managing Events with React

Enhance Reactive Applications with Advanced React

Course: 1 Hour, 10 Minutes

• Redux Dataflow Lifecycle
• Install and Integrate Redux with React
• Presentational and Container Components
• Redux Presentation Components
• Redux Container Components
• Middleware Functions in Redux
• Impact of Middleware Functions in Redux Lifecycle
• React Router
• React Router Functionality
• Benefits of Async Capabilities in Redux
• Async Action Creators in Redux
• Exercise: Implementing Routing and Rendering

Build and Test SPA Using React and Redux

Course: 1 Hour, 9 Minutes

• Build CRUD Applications Using React and Redux
• Validation Types in React and Redux Applications
• Client-side and Server-side Validation
• Single-Page Application Concepts
• Create SPAs Using React Router
• Fine Tuning Redux Applications
• Component Testing React.js
• Jest Testing Framework
• Test React Applications Using Jest
• React and Redux Application Testing Best Practices
• Deploy React and Redux Apps Using Node.js
• Exercise: Build Forms and Define Validations

Online Mentor
You can reach your Mentor by entering chats or submitting an email.
Final Exam assessment
Web Apps Developer
Practice Labs: Web Apps Developer (estimated duration: 8 hours)
Perform Web Apps Developer tasks such as installing ReactJS libraries and renderin components, building custom components, adding state properties to a class component, and taking advantage of a component’s life cycle methods. Then, test your skills by answering assessment questions after working with forms, using appropriate keys when handling lists,installing an app from basic files, and handling the rendering of JSX