If you want to develop for mobile, you need to learn how to use React. This frontend JavaScript library provides an effective way for today's developers to build dynamic user interfaces. This online self-paced course will teach you how to create user interfaces with React through a hands-on app building project.
What you 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.
Instructor(s):Self-Study
Requirements:
Hardware Requirements:
- This course can be taken on either a PC or Mac.
Software Requirements:
- PC: Windows 10 or later.
- Mac: macOS 11.0 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.
Other:
- 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.
Hide Syllabus
Lesson 1
- 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
- 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
Hide Syllabus