React Fundamentals | 17-18 Feb | Online

Course Overview

React has redefined web development, with its focus on declarative views, testable components, a virtual DOM and functional programming concepts. Widely popular and in use by companies such as Netflix, Facebook, Instagram and Walmart, React has changed the way developers think about building client-side apps.

This course will teach you the fundamentals of React using the latest "Hooks" approach. There are plenty of lab exercises to take you step by step towards building complete applications.

The class will use React v17 upwards.

Lunch-and-Learn Experience a free taster of this course, so you can meet me, get a feel for my teaching approach, and ask questions.

Learning Outcomes

After this course, you will:

  • Understand how React rethinks front-end UI architecture and use this understanding to build apps and components effectively
  • Have built a variety of React components, and used Hooks such as useState, useEffect, useMemo and useCallback
  • Appreciate that much legacy code (and many tutorials) uses class-based components, and so you will have some understanding of the differences between this approach and Hooks
  • Have developed a UI that performs data retrieval from a server

Teaching Approach

This course is hands-on and interactive. Each module will first introduce concepts with a talk and demonstrations. Then we will have exercises to ground those concepts in practical work. I will keep an eye on how everyone is doing, and I will look at your code so you can get some feedback. Ask questions at any time.

Who should attend this course

Attend this course if you:

  • have front-end development experience and need to understand React;
  • are transitioning from another platform or language (eg server-side Java, or Angular) to front-end development;
  • are a QA or tester who needs to understand front-end development with React;
  • are new to front-end development;
  • need to understand the technology for a role such as build management and CI/CD, or UX.

Prerequisites

Students should have 3-6 months of prior JavaScript/HTML knowledge. No React knowledge is assumed.

Course Outline

  • React Fundamentals
  • What's React?
  • Why React?
  • History
  • Who uses React?

Components and Rendering

  • Components
  • Simple Components
  • Consequences
  • DOM Manipulation is Slow
  • Rendering Lightweight Objects
  • Re-Render Everything Every Time
  • Alternate Render Outputs
  • Resources

Getting Started: create-react-app

  • Using create-react-app
  • create-react-app Commands

Defining a Component

  • Creating a Component
  • render() is Pure
  • SFCs vs Component Classes
  • Rendering the Top-Level Component

JSX

  • JSX Syntax & the Translation Process
  • Separation of Concerns
  • JSX Compilation
  • Rendering a DOM Element with a class
  • Closing Tags and Self-Closing
  • Using Expressions
  • Rendering null, undefined, true, false
  • Beware of ASI
  • DOM Tags vs Component Tags

Rendering Children

  • JSX as an Expression
  • Saving Components in a Variable
  • Conditional Rendering
  • Using && as a shorthand if
  • Rendering Children

Data and State

  • Props and State
  • Specifying Props
  • Using Props in a Component
  • Props Example

Property Validation

  • Specifying PropTypes
  • Validation Examples
  • Prop Validation Types
  • Custom Prop Validation

Events

  • Handling Events
  • DOM Events in HTML
  • Handling a Click Event in React

Using Hooks

  • Introducing Hooks
  • Examples of Hooks
  • Hooks are Functions
  • Rules of Hooks

State and useState

  • State Examples
  • Using the useState Hook
  • Initializing State
  • Updating State and Rendering
  • Understanding when to use props vs when to use state

Interaction

  • Adding Interaction
  • Updating a Field
  • Data Flow in React

Rendering Lists and Reconciliation

  • React's Reconciliation Algorithm
  • Using Keys
  • Stateful Children

Transferring Props

  • Transferring Props to Children
  • JSX Spread Syntax
  • Excluding Props

Forms

  • Uncontrolled Components
  • Controlled Components
  • When to use which
  • Building out an Invoice component

Communicating with a Server

  • Retrieving Data from a Server
  • Using useEffect to Send an API Request
  • Managing State
  • Handling Loading and Error States

Performance and Optimization

  • Component Rerendering
  • Reference Equality
  • Expensive Computations
  • Optimizing with Memoization
  • Preventing Unnecessary Rerenders
  • Using useMemo
  • Using useCallback

Refs and `useRef

  • Why Refs?
  • How to use Refs
  • Using useRef to Store Mutable Data

Styling Components and Apps

  • Styling Components
  • Styling Approaches
  • Vanilla CSS
  • CSS-in-JS
  • CSS Modules
  • CSS integration options and libraries
  • Using React with Bootstrap

Close

Delivery: Online (live)
Level: Foundation
Course Dates : 17-18 Feb 2022
Day & Time:
Week Days
Weekend
Daytime
Evening
What is included:
VAT
Breakfast
Lunch
Refreshments
Digital courseware
Digital Recording
Printed courseware
Accommodation
Extra revision sessions
Venue: Online
Style:
Authoritative
Challenging
Inspiring
Methodical
Starts: February 2022
Duration: 2 days

Public discussion (0)

You must log in to send a new comment.