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
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
