React JavaScript Programming Course ID #: WA2583-ZZ-W Hours: 21 Delivery Method: Instructor Led Live & Group Internet Based

Course Content

Course Description: This React Programming in 2021 Training class introduces the React JavaScript framework, sometimes referred to as ReactJS or React.JS. This React Programming class will provide an introduction to the benefits of the React JavaScript framework, so participants in this React Training course can start to develop applications quickly using the framework. React is a JavaScript library that makes building user interfaces effortlessly simple. It was developed by Facebook, which maintains it along with a community of developers. Since User Interfaces are used in almost every web application, the ability to develop UIs more efficiently is crucial. React does exactly this by providing a developer-friendly way to create custom UIs. Course Objectives: In this React Training class, attendees will learn how to: • Understand the programming model provided by the React framework • Define React components • Use the React framework to handle events and stateful data

Target Audience: • .NET Developers with a minimum of 2 years of experience and individuals who want to become application security engineers/analysts/testers. • Individuals involved in the role of developing, testing, managing, or protecting wide area of applications.

Prerequisites: Minimum of two years’ experience in .NET and Java

www.tcworkshop.com Page 1 of 6 800.639.3535 React JavaScript Programming Course ID #: WA2583-ZZ-W Hours: 21 Delivery Method: Instructor Led Live & Group Internet Based

Topics:

Chapter 1. React Overview Notation • What is React? • Using ES6 Classes with React • What’s in a Name? • Which UI Component Creation Syntax • React Component Model Should I Use? • What React Is Not • Components vs Elements • What You Will Not Find in React • Elements Are Immutable • Motivation for Creating React • Properties • A React JavaScript Example • Property Naming Convention • One-Way Data Flow • Properties Default to ‘True’ • JSX • Spread Attributes (an ES6 Feature) • A JSX Example • Expressions • The Virtual (Mock) DOM • Fragments • Only Sub-components that Actually Change • Summary are Re-Rendered Chapter 4. React Functional Component • React Libraries Concepts • Summary • Functional Components Chapter 2. Babel Command-Line Interface • Nesting JSX Elements • Babel Transpiler • Example of JSX Nesting • Usage Options • Comments in JSX Code • Presets and Plug-ins • Setting CSS Styles Using Classes • Babel CLI Installation • Setting CSS Styles Directly • Babel Configuration • JSX Escapes Values • Running Babel Command-Line • Working with Lists of Items • A Basic ES6 Development Setup with Babel • Keys in Lists • Test the Babel Development Setup • Example List with Key • Adding React to the Development Setup • Container vs. Presentational Components • Create a Minimal React App – Index.html • State • Create a Minimal React App – app.js • Types of State Data • Summary • State Hierarchy Chapter 3. Basic Components and JSX • Lifting State Up • What is JSX? • Props vs. State • JSX Transpilation to React Code Example • Pass Down a Function • Running the Transpiled Code • Immutability • Babel • Immutability – Why? • The Babel Runtime JavaScript Library • Virtual DOM and State • Script Import Skeleton Code • Setting state • Playing Around in Code Pen • Updating Input fields • React Components • Passing Props to Components • Ways to Create UI Components • Passing Functions to Components • Creating a Functional Component Example • Event Handling • Component Names Must Be Capitalized • Event Handler Example • Creating a React Class-Based Component in • Event Binding – DOs ES5 • Event Binding – Don’ts • The render Method • Passing Parameters to Event Handlers • Creating a UI Component Using ES6 Class • Component Life-cycle www.tcworkshop.com Page 2 of 6 800.639.3535 React JavaScript Programming Course ID #: WA2583-ZZ-W Hours: 21 Delivery Method: Instructor Led Live & Group Internet Based

• Life-cycle in Functional Components • Communication State • App Development Workflow – 1/3 • Control State • App Development Workflow – 2/3 • Session State • App Development Workflow – 3/3 • Location State • Summary • Location State Side Effects Chapter 5. React Components with ES6 Classes • Summary • Classes in ES6 Chapter 8. Building React Apps with Redux • Functional Components • Redux • Extending React Component • Redux Terminology • The render Method • Redux Principles • Component Lifecycle • Redux: Actions • Component Lifecycle: Overview • Redux Action Types • Component Lifecycle – Render Phase • Action Creators • Component Lifecycle – Commit Phase • Dispatching Actions • Component Lifecycle – Unmounting • Data Flow Basics • Summary • Redux Reducers Chapter 6. React Router • Pure Functions • Routing and Navigation • Reducer Example • Creating a react-router based project • Returning Default State • A Basic Routed Component • Creating a Development Environment with • Router vs. Browser Router create-react-app. • The Route component • Using Redux with React • • Initializing the Store • Redirect Route • Immutability • Navigating with • Benefits of Immutable State • Navigating with • Mutability of Standard types • Route Parameters • Copying Objects in JavaScript • Retrieving Route Parameters • Copying Arrays in JavaScript • Query String Parameters • One Store – Multiple Reducers • Using Router with Redux • Combining Reducers • Summary • Components and Redux Chapter 7. State Management for React • The React-Redux Package • React State Basics – Props and State • Wrapping App with Provider • Props • Map State to Props • State in Class Based Components • map Dispatch to Props • Managing State with Hooks in Functional • Using Mapped Properties and Methods Components • Wrapping Components with Connect • The Problem with Props and State • Configure Store • Redux State Library • Programming Advice – Multi Tab Console • Redux Advantages • Summary • Redux Disadvantages Chapter 9. Using React Hooks • Basic Rules for State Management • Functional Component Shortcomings • Types of State • Hooks Overview • Data State • Hook Rules www.tcworkshop.com Page 3 of 6 800.639.3535 React JavaScript Programming Course ID #: WA2583-ZZ-W Hours: 21 Delivery Method: Instructor Led Live & Group Internet Based

• React Linter Example • Default App Component Test • Functional Component Props • Unit Tests • The use State Hook • Anatomy of a Unit Test • Functional Component using the use State • Common Matchers hook. • Combining Tests • Use State with Multiple Variables • Running Tests • use State can also be used with Objects. • Testing Promise based async code with • The use Effect Hook ‘done’ • Use Effect Hook Example • Setup and Teardown • Using use Effect Hook to Load Data • A Simple Component Test • Restricting when use Effect is Called. • A Simple Snapshot Test • The use Context Hook • Running and Updating SnapShot Tests • Additional Hooks • Building Component Tests • The use Reducer Hook • Calling Render • An Example Reducer Function • Render Properties • Calling and Using use Reducer • Simulating Events • The use Memo Hook • Testing Results • Use Memo Example • Using Query Functions • The use Callback Hook • Text Matching • Use Callback Example • Counter Component • The use Ref Hook • Summary • Using use Ref to Hold Values Chapter 12. [OPTIONAL] Exception Handling in • The use Imperative Handle Hook JavaScript • Use Imperative Handle Hook Example • Exception Handling • The use Layout Effect Hook • Try Syntax • Summary • The Final Block Chapter 10. Creating Custom React Hooks • The Nested Try Blocks • Custom Hooks • Exception Types in JavaScript • Custom Message Hook • The Throw Statement • Using the Custom Message Hook • Using the Error Object • A Custom use List Hook • Summary • Using the use List Custom Hook Chapter 13. [OPTIONAL] Web Storage, Web SQL, • The built-in use Debug Value Hook and IndexedDB • Viewing the Effect of the use Debug Value • Data Storage Hook • Data Storage Options • Summary • Web Storage Chapter 11. Unit Testing React with React • Web Storage Programming Interface Testing Library • Web Storage Examples • React Testing Framework • Storing JavaScript Objects • Features • IndexedDB • Snapshot Testing • Indexed DB Terminology • Code Coverage • Getting indexed DB Objects • Interactive Mode • Opening a Database • Projects created with create-react-app • Creating an Object Store www.tcworkshop.com Page 4 of 6 800.639.3535 React JavaScript Programming Course ID #: WA2583-ZZ-W Hours: 21 Delivery Method: Instructor Led Live & Group Internet Based

• Inserting a Record • Error Handling in Promise-based • Retrieving a Record asynchronous functions • Summary • Summary Chapter 14. [OPTIONAL] Asynchronous Lab Exercises Programming with Promises • Lab 1. Setting Up a React Development • The Problems with Callbacks Environment • Introduction to Promises. Lab 2. Basic React Components • Requirements for Using Promises Lab 3. More React Component Concepts • Creating Promises Manually Lab 4. ES6 React Components • Calling the Promise-based Function Lab 5. React Router Application • Making APIs that support both callbacks and Lab 6. React Redux Application promises. Lab 7. React Hooks Application • Using APIs that support both callbacks and Lab 8. React Custom Hooks promises. Lab 9. Unit Testing with Jest • Chaining then Method / Returning a Value Lab 10. Course Project – React App Using or a Promise from then Method. Hooks • Promisifying Callbacks with Bluebird Lab 11. [OPTIONAL] Exception Handling in • Using Bluebird JavaScript • Bluebird – List of Useful Functions Lab 12. [OPTIONAL] Asynchronous • Benefit of using Bluebird over ES6 for Programming with Promises Promisification

www.tcworkshop.com Page 5 of 6 800.639.3535 React JavaScript Programming Course ID #: WA2583-ZZ-W Hours: 21 Delivery Method: Instructor Led Live & Group Internet Based

normal course content with the NASBA Information added along with links to our Register for this class by visiting us policy page on the web. We will add our name to the Official National Registry at: Statement after we are approved. www.tcworkshop.com or calling • us at 800-639-3535

Policies: Course Registration, Cancellation, Refund and Complaint Resolution : For more information regarding administrative policies such as complaint and refund, please contact our offices at 800- 639-3535 or visit us at: www.tcworkshop.com

NASBA Information: Level: Intermediate Attendance Requirement: To be awarded the full credit hours, you must sign in for the course and attend the entire course. Fields: Computer software & Applications CPEs: 21

Official National Registry Statement: The Computer Workshop is registered with the National Association of State Boards of Accountancy (NASBA) as a sponsor of continuing professional education on the National Registry of CPE Sponsors. State boards of accountancy have final authority on the acceptance of individual courses for CPE credits. Complaints regarding registered sponsors may be submitted to the National Registry of CPE Sponsors through its website: www.nasbaregistry.org

NOTE: Since our information is in multiple places on our web site or in PDF format that is sent to clients, we have provided our www.tcworkshop.com Page 6 of 6 800.639.3535