User Interface Programming with React

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Intermediate User Interface Programming with React training course takes students to a deeper level in their React knowledge and application. Students develop real-world JavaScript and React applications exploring deeper knowledge of React performance, rendering, component lifecycle methods, hooks, rendering in other parts of the DOM, and how to access DOM elements. This class is for developers with React experience who desire to go deeper.

Students will build a project using React to apply their JavaScript skills and to learn about modern UI development. Developers can do wonders with React, an ecosystem that scales between a library and a full-featured framework when combined with related libraries. This course takes your React knowledge to the next level including content on improving performance, interacting with the DOM, lifecycle methods, etc… Along the way, JavaScript and Web Browser knowledge relevant to the React content will be covered as needed to help the student go deeper in the overall web development skill.

Course ObjectivesObjectives

  • Quick Review of React Applications and Components
  • Understand the different between function-based and class-based components
  • Explore class-based component lifecycle methods and relate them to function-based component hooks.
  • Learn how to use development tools to improve performance, understand the execution of lifecycle methods and hooks, and go deeper on DOM interaction
  • Learn how to use portals to create UI elements such as modals
  • Explore the usefulness of refs for access DOM elements and improving the user experience

Course PrerequisitesPrerequisites

Attendees should have a good working knowledge of HTML, CSS, ES2015 JavaScript, web development and React. Students without React experience should take the Introduction to React course first. Introductory React is not covered in this course.

Course RequirementsRequirements

We teach all classes online using Zoom. Students will need to be able to join a Zoom session. We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and coding along with the instructor. All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources.

Course OutlineOutline

The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. I. Quick Review of React
    1. Create React App project generator
    2. Web Browser Developer Tools
    3. React Developer Tool Extension
    4. Running and Debugging a React Application
    5. Components and JSX
  2. II. Lifecycle Methods and Hooks
    1. Difference between Class-based and Functional Components
    2. Thinking About State
    3. Using Google Performance Tools
    4. Component Rendering
    5. Component Mounting and Unmounting
    6. Component State
    7. Component Updating
    8. Component Error Handling
    9. Component Optimization
  3. Component Rendering Performance
    1. Immutable Programming
    2. Functional Components and Memo
    3. Class-Based Components and Component Did Mount
    4. Pure Component
    5. useCallback Hook and Component Performance
    6. Role of Keys for Dynamic Lists
    7. DOM Breakpoints
    8. Lazy Loading Components
    9. Profiler
    10. Layout Effect Hook
  4. Portal
    1. Rendering Outside Component Tree
    2. Event Bubbling
    3. Building a Mode
  5. Refs
    1. Create Ref API
    2. Ref Hooks API
    3. Forward Refs
    4. Refs and DOM
Scroll to Top