Overview
This training course teaches developers the skills they need to immediately use React to build modern applications. Attendees gain hands-on experience with the latest version of React and the tools for developing React applications.
Objectives
At the end of ReactJS training course, participants will be able to
- Use a JavaScript package manager (either npm or Yarn)
- Understand the new JavaScript language features, including classes, modules, and arrow functions
- Articulate what React is and why it is useful
- Explore the basic architecture of a React application
- Gain a deep understanding of JSX and the Virtual DOM
- Use React components to build interactive interfaces
- Create and validate forms using controlled components
- Make HTTP calls to read or change data
- Explore the common component architecture patterns
- Configure simple and complex routing
- Incorporate React best practices
Prerequisites
Participants must have object-oriented programming experience. Some experience with JavaScript is helpful; the new language features of JavaScript and TypeScript are covered/reviewed in class.
Course Outline
- npm
- What is Node.js?
- What is npm?
- Using npm
- npm Scripts
- Yarn
- Why Yarn?
- npm vs. Yarn
- Installation
- Using Yarn
- Classes
- Scope (var, let, const)
- Arrow Functions
- Modules
- Template Literals
- Default, Rest, Spread
- Default
- Rest
- Spread
- Destructuring
- Optional Parameters
- Object.assign()
- Object Initializer
- Create new Project
- Folder Structure
- Browser Support
- Styles and Assets
- Dependencies
- Why React?
- What it is?
- Why it is useful?
- Angular, React Compared
- Web application architectures
- Server-side web application architecture
- Single-page web application architecture
- React Architecture
- Replacing createElement
- Embedding Expressions
- Specifying Attributes
- Creating an Element
- Create a Function Component
- Rendering a Component
- Creating a Class Component
- Composing & Reuse
- Read-only
- String Literals vs. Expressions
- Function vs. Class Components
- Listening/Subscribing/Wiring to an Event
- In Vanilla JavaScript
- In React: Function Component
- In React: Class Component
- Binding
- Why Binding is Necessary?
- Class Method
- Arrow Function
- Passing Parameters
- Using Arrow Functions
- Using Bind
- Handling Events
- Using Arrow Functions
- Using Bind
- Synthetic Events
- Definition
- Why Hooks?
- No Breaking Changes
- Hooks API: useState, useEffect, useRef, useContext
- Rules of Hooks
- Definition
- State in Function Components
- useState Hook
- State in Class Components
- Mutating state with setState
- Using State Correctly
- Data Flows Down
- useEffect Hook
- What does useEffect do?
- Using useEffect
- useEffect Demo
- What are Lifecycle Methods
- Understanding Mounting
- Common vs. Less Common Methods
- Using Lifecycle Methods
- If, else
- Conditional Operator (?)
- Logical (&&) Operator
- In Vanilla JavaScript: for loop, array.forEach, array.map
- In React: using Elements, Components
- Why Keys are Needed
- Reuse
- Component Communication
- Design Patterns
- Container and Presentation Components
- Composition vs. Inheritance
- Controlled Components
- Reuse of Change Logic across Multiple Inputs
- Handling Form Submission
- Controlling Other Form Elements: select, textarea, number
- Validation
- Uncontrolled Components
- Axios library
- Fetch API
- Using with React (HTTP GET)
- Refactoring for Reuse
- HTTP POST, PUT, DELETE
- Installation
- Basics
- Handling Not Found (404)
- Parameters (Url & Query)
- Nesting
- Building a React Application for Production
- Deploying a React Application
- Serving Apps with Client-Side Routing
- Customizing Environment Variables