Learn how to use React to create a dynamic web application using functional components and hooks.
What students will learn
- About the benefits of writing user interfaces with React
- How data flows in a React user interface
- How to write a React component
- What a virtual DOM is
- To use Create React App to make your first React user interface
- The role of JSX in React.
- This course can be taken on either a PC or Mac.
- PC: Windows 8 or newer.
- Mac: OS X Mountain Lion 10.8 or later.
- Browser: The latest version of Google Chrome or Mozilla Firefox are preferred. Microsoft Edge and Safari are also compatible.
- Adobe Animate (not included in enrollment).
- Software must be installed and fully operational before the course begins.
- Email capabilities and access to a personal email account.
Instructional Material Requirements:
The instructional materials required for this course are included in enrollment and will be available online.Learn how to use React to create a dynamic web application using functional components and hooks.
- Introduction to React
- What is React?
- React Essentials
- Get Started with Create React App
- Introducing Our Project: Mathificent
- Learning the Structure of a React App
- JSX and React Elements
- Using JSX in React
- JSX Rules
- Using JSX
- React Components
- Assembling User Interfaces
- Breaking an App into Components
- Passing Props Between Components
- Organizing Your Components
- Semantic HTML and the Fragment Element
- Using Fragment
- Destructuring props
- React State
- Understanding State
- Getting React to React
- Why is count a Constant?
- Child Components and State
- Adding State
- React Routing
- Implementing Routes
- Styling React Apps
- 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 Logic
- Setting the Equation
- Getting the User's Answer
- Checking the User's Answer
- Creating the Timer
- React Effects
- 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