Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

React Components

Course Summary

The React Components training course teaches students the essentials of building User Interface (UI) components with React.

The course begins by diving deep into the core workings of React and explores all the practical aspects of working with React on any project. Next, utilizing best practices, students will build a real application from scratch utilizing the more important aspects of React. The course concludes with exploring other topics such as composition vs. inheritance, patterns, specialization, containment, and higher-order components.

Prior working knowledge and practical experience of Modern JavaScript is assumed for this course.

Purpose
 Learn how to build UI components with React.
Audience
 Web developers wanting to learn the essentials of building UI components with React.
Role
Web Developer
Skill Level
Intermediate
Style
Targeted Topic - Workshops
Duration
2 Days
Related Technologies
JavaScript | React

 

Productivity Objectives
  • Describe what React is and what problem it solves.
  • Explain the basic architecture of a React component.
  • Demonstrate a deeper knowledge of React.js components and JavaScript XML (JSX).
  • Utilize React.js best practices.

What You'll Learn:

In the React Components training course, you'll learn:
  • Introduction
    • What is React?
    • What problem does React solve?
    • Development Eco-System
    • React versus other frameworks
  • Development Tools
    • Create React App project generator
    • React Developer Tools
    • Running and Debugging a React Application
    • Role of Node.js
    • Purpose of React and ReactDOM
  • Functional Components
    • What are Components?
    • Create Element and JSX
    • Benefits of JSX
    • Fragments
    • JavaScript Arrow Functions
    • ES2015 Modules
    • JSX and Expressions
    • Displaying Collections of Data
    • JavaScript Array Maps and React Keys
    • Passing Data with Props
    • Validating Props with PropTypes
    • Default Props
    • Using Memo
  • Hooks
    • Overview of Hooks
    • State Hook
    • Effect Hook
    • Ref Hook
    • Context Hook
    • Custom Hooks
  • Class-Based Components (overview only)
    • JavaScript Classes and Extends
    • Configuring State
    • Lifecycle Methods
    • Context of Event Handlers
    • Class Properties and Class Arrow Functions
    • PropTypes and Default Props on Classes
  • Other Topics
    • Composition vs. Inheritance
    • Patterns: Specialization, Containment, and Higher Order Components
    • Lifting State Up
    • Forwarding Refs
    • Context
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.