Introduction to ReactWhat is React?React is FastReact is ScalableReact is ReliableReact EssentialsRendering in ReactGet Started with Create React AppIntroducing Our Project: MathificentLearning the Structure of a React App
What is React?React is FastReact is ScalableReact is Reliable
React is Fast
React is Scalable
React is Reliable
React EssentialsRendering in React
Rendering in React
Get Started with Create React App
Introducing Our Project: Mathificent
Learning the Structure of a React App
JSX and React ElementsUsing JSX in ReactJSX RulesJSX SyntaxJSX is an Extension of JavaScriptUsing Custom Elements in JSXUsing JavaScript in JSXUsing JSX
Using JSX in React
JSX RulesJSX SyntaxJSX is an Extension of JavaScriptUsing Custom Elements in JSXUsing JavaScript in JSX
JSX Syntax
JSX is an Extension of JavaScript
Using Custom Elements in JSX
Using JavaScript in JSX
Using JSX
React ComponentsAssembling User InterfacesUnderstanding F.I.R.S.TPassing Data with PropsBreaking an App into ComponentsPassing Props Between ComponentsOrganizing Your ComponentsSemantic HTML and the Fragment ElementUsing FragmentDestructuring props
Assembling User InterfacesUnderstanding F.I.R.S.TPassing Data with Props
Understanding F.I.R.S.T
Passing Data with Props
Breaking an App into Components
Passing Props Between Components
Organizing Your Components
Semantic HTML and the Fragment Element
Using Fragment
Destructuring props
React StateUnderstanding StateGetting React to ReactWhy is count a Constant?Child Components and StateAdding State
Understanding State
Getting React to React
Why is count a Constant?
Child Components and State
Adding State
React RoutingRoutingImplementing Routes
Routing
Implementing Routes
Styling React AppsPlain-old CSSImporting CSS Modules to ComponentsCleaning up App.cssStyling the Main ComponentInline stylesCreating the Game ComponentA Word of Caution
Plain-old CSS
Importing CSS Modules to Components
Cleaning up App.css
Styling the Main Component
Inline styles
Creating the Game Component
A Word of Caution
Implementing Game LogicSetting the EquationGetting the User's AnswerChecking the User's AnswerCreating the Timer
Setting the Equation
Getting the User's Answer
Checking the User's Answer
Creating the Timer
React EffectsReact HooksThe useEffect HookThe Need for useEffectuseEffect to the RescueMount and UnmountPassing Functions to State Variable SettersFixing the TimerCatching Keyboard EventsBuilding and Deploying Your React App
React Hooks
The useEffect Hook
The Need for useEffect
useEffect to the Rescue
Mount and Unmount
Passing Functions to State Variable Setters
Fixing the Timer
Catching Keyboard Events
Building and Deploying Your React App

Learner Outcomes
In this ReactJS 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

Students should prior experience with HTML and JavaScript
CSS and Bootstrap experience is also helpful but not required