Objectives

All students will:

• Learn to use a JavaScript package manager (either npm or Yarn)
• Quickly 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
• Learn React best practices

Outline

• Package Manager (npm/Yarn)
  • npm
    • What is Node.js?
    • What is npm?
    • Using npm
    • npm Scripts
  • Yarn
    • Why Yarn?
    • npm vs. Yarn
    • Installation
    • Using Yarn

• Compiler Setup
  • Setup (Babel)

• ES6/ES2015
  • 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)
  • Create new Project
  • Folder Structure
  • Browser Support
  • Styles and Assets
  • Dependencies

• Best Practices (Code Organization & Conventions)

• React Overview
  • 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

• Elements
  • Hello World in JavaScript
  • Hello World in React

• JSX
  • Replacing createElement
  • Embedding Expressions
  • Specifying Attributes

• Virtual DOM

• Components
  • Creating an Element
  • Create a Function Component
  • Rendering a Component
  • Creating a Class Component
  • Composing & Reuse

• Props
  • Read-only
  • String Literals vs. Expressions
  • Function vs. Class Components

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

• Hooks
  • Definition
  • Why Hooks?
  • No Breaking Changes
  • Hooks API: useState, useEffect, useRef, useContext
  • Rules of Hooks

• State
  • Definition
  • State in Function Components
  • useState Hook
  • State in Class Components
  • Mutating state with setState
  • Using State Correctly
  • Data Flows Down

• Side Effects & Lifecycle
  • 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 Rendering
  • If, else
  • Conditional Operator (?)
  • Logical (&&) Operator

• Lists
  • In Vanilla JavaScript: for loop, array.forEach, array.map
  • In React: using Elements, Components
  • Why Keys are Needed

• Component Architecture
  • Reuse
  • Component Communication
  • Design Patterns
    • Container and Presentation Components
    • Composition vs. Inheritance

• Forms
  • Controlled Components
  • Reuse of Change Logic across Multiple Inputs
  • Handling Form Submission
  • Controlling Other Form Elements: select, textarea, number
  • Validation
  • Uncontrolled Components

• HTTP
  • Axios library
  • Fetch API
  • Using with React (HTTP GET)
  • Refactoring for Reuse
  • HTTP POST, PUT, DELETE

• Routing (React Router)
  • Installation
  • Basics
  • Handling Not Found (404) (as time permits)
  • Parameters (Url & Query) (as time permits)
  • Nesting (as time permits)

• Build & Deploy (as time permits)
  • Building a React Application for Production
  • Deploying a React Application
  • Serving Apps with Client-Side Routing
  • Customizing Environment Variables

Materials

The courseware is provided electronically to avoid additional printing costs.

• The courseware includes:
  • Concept Chapters (for reference and lecture with demonstrations)
  • Labs (with step by step directions)