React Fundamentals

Expand all

Course Description

React has redefined web development, with its focus on 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 React Fundamentals training course will teach you the fundamentals of React, with plenty of lab exercises to take you step by step toward building complete applications. The class will use ES6+ throughout.

 

Objectives

After this course, you will be able to:

• Understand how React rethinks front-end UI architecture and use this understanding to build apps and components effectively
• Build a variety of React components and apps using both class-based and stateless functional component styles
• Utilize the React component lifecycle in building components
• Write managed components to handle user input
• Appreciate why Higher Order Components might be employed when building an app
• Utilise React Router to provide client-side routing

Course Outline

Overview

•     Why React?
•     The React Ecosystem
•     Real-world React App Examples
•     React and the Virtual DOM
•     React Native

Getting Started with React

•     Defining a Component
•     Writing a Hello, world! App
•     A Minimal React Project
•     Toolchains and create-react-app
•     Developer Tools

JSX

•     JSX Syntax & the Translation Process
•     Naming Conventions
•     Adding Children
•     Including JavaScript Expressions
•     Children from Functions

Properties

•     Specifying Props

Property Validation

•     Declaring PropTypes
•     Custom Property Validation

Events

•     Handling Events
•     Binding Event Handlers – approaches in ES6 and beyond
•     Updating State
•     Synthetic Events
•     Bubbling and Capturing

State

•     State and ES6 Classes
•     Initializing State
•     Updating State and Rendering
•     State and Asynchrony
•     Understanding when to use props vs when to use state
•     Stateless vs Stateful Components

Adding Interaction

•     Data flow in React

Component Lifecycle

•     Exploring lifecycle with common use cases
•     componentDidMount()
•     componentWillUnmount()
•     Retrieving Data on componentDidMount()
•     Transitions using Lifecycle Hooks
•     Further Lifecycle Methods

Composing Multiple Components

•     Composition
•     Rendering Children
•     Ownership
•     Programmatically Rendering Child Components

Rendering Lists

•     Using Functional Programming Techniques to render UI
•     React’s reuse of DOM Elements
•     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

Stateless Function Components (SFCs)

•     The SFC Pattern
•     When to use SFCs

Refs

•     Accessing real DOM elements
•     When to use refs

Higher Order Components (HOCs)

•     What’s an HOC?
•     When to apply the HOC pattern
•     Examples of HOCs
•     Creating and invoking HOCs

Client-Side Routing

•     The Need for Client-Side Routing
•     Routing Approaches – History API and Hash-based Routing
•     The Role of a Router
•     Using React Router

Learning Path

• Please Contact Us for suggestions

• React Advanced

Ways to Attend

• Attend a public course, if there is one available. Please check our Schedule, or Register Your Interest in joining a course in your area.
• Private onsite Team training also available, please Contact Us to discuss. We can customise this course to suit your business requirements.