Projects
Assignments
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
Package Manager (npm/Yarn)edforce2021-06-25T17:06:27+05:30
- npm
- What is Node.js?
- What is npm?
- Using npm
- npm Scripts
- Yarn
- Why Yarn?
- npm vs. Yarn
- Installation
- Using Yarn
ES6/ES2015edforce2021-06-25T17:07:20+05:30
- Classes
- Scope (var, let, const)
- Arrow Functions
- Modules
- Template Literals
- Default, Rest, Spread
- Default
- Rest
- Spread
- Destructuring
- Optional Parameters
- Object.assign()
- Object Initializer
Project Setup (Create React App)edforce2021-06-25T17:07:41+05:30
- Create new Project
- Folder Structure
- Browser Support
- Styles and Assets
- Dependencies
React Overviewedforce2021-06-25T17:08:11+05:30
- 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
JSXedforce2021-06-25T17:08:47+05:30
- Replacing createElement
- Embedding Expressions
- Specifying Attributes
Componentsedforce2021-06-25T17:09:22+05:30
- Creating an Element
- Create a Function Component
- Rendering a Component
- Creating a Class Component
- Composing & Reuse
Propsedforce2021-06-25T17:09:36+05:30
- Read-only
- String Literals vs. Expressions
- Function vs. Class Components
Eventsedforce2021-06-25T17:09:53+05:30
- 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
Hooksedforce2021-06-25T17:10:19+05:30
- Definition
- Why Hooks?
- No Breaking Changes
- Hooks API: useState, useEffect, useRef, useContext
- Rules of Hooks
Stateedforce2021-06-25T17:10:33+05:30
- Definition
- State in Function Components
- useState Hook
- State in Class Components
- Mutating state with setState
- Using State Correctly
- Data Flows Down
Side Effects & Lifecycleedforce2021-06-25T17:10:53+05:30
- useEffect Hook
- What does useEffect do?
- Using useEffect
- useEffect Demo
- What are Lifecycle Methods
- Understanding Mounting
- Common vs. Less Common Methods
- Using Lifecycle Methods
Conditional Renderingedforce2021-06-25T17:11:16+05:30
- If, else
- Conditional Operator (?)
- Logical (&&) Operator
Listsedforce2021-06-25T17:11:36+05:30
- In Vanilla JavaScript: for loop, array.forEach, array.map
- In React: using Elements, Components
- Why Keys are Needed
Component Architectureedforce2021-06-25T17:12:03+05:30
- Reuse
- Component Communication
- Design Patterns
- Container and Presentation Components
- Composition vs. Inheritance
Formsedforce2021-06-25T17:12:26+05:30
- Controlled Components
- Reuse of Change Logic across Multiple Inputs
- Handling Form Submission
- Controlling Other Form Elements: select, textarea, number
- Validation
- Uncontrolled Components
HTTPedforce2021-06-25T17:12:44+05:30
- Axios library
- Fetch API
- Using with React (HTTP GET)
- Refactoring for Reuse
- HTTP POST, PUT, DELETE
Routing (React Router)edforce2021-06-25T17:13:24+05:30
- Installation
- Basics
- Handling Not Found (404)
- Parameters (Url & Query)
- Nesting
Build & Deployedforce2021-06-25T17:13:58+05:30
- Building a React Application for Production
- Deploying a React Application
- Serving Apps with Client-Side Routing
- Customizing Environment Variables
