Comprehensive React, GraphQL and Apollo

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

Course Description

Training 4 Developers’ Comprehensive React, GraphQL & Apollo course teaches the essentials of building UI components with React, GraphQL, and Apollo. The React part of the course dives deep into the core workings of React and explores the practical aspects of using React in any web application project. Utilizing best practices, students build a real application from scratch using the more important aspects of React.

The GraphQL & Apollo part of the course teaches students how to web application development with the popular React & GraphQL framework, Apollo. Using Apollo to build your React & GraphQL applications can bring powerful benefits to your application, such as using GraphQL fragments to declare the data needed by components, co-locating those fragments with the components, support for mutations, and logic to perform data fetching and caching in the Apollo store.  Additionally, this course will explore how GraphQL APIs and React Components are integrated with Apollo. The focus of the course is client-side coding, but there will be some server-side coding with JavaScript and Node.js.

This course is focused on using React within a web application not native applications for iOS and Android.

Course ObjectivesObjectives

  • Understand what React is and what problem it solves
  • Explore the basic architecture of a React component
  • Gain deeper knowledge of React.js components and JSX
  • Utilize React Hooks
  • Learn React.js best practices and common patterns
  • Employ React Routing to build Larger Apps
  • Connect React Components to a GraphQL APIs via containers and the Apollo Store
  • Construct GraphQL query and mutation endpoints for Apollo
  • Perform mutations with Apollo and React
  • Configure Apollo on the Server-Side and Client-Side
  • Write Unit Tests for React and Apollo Applications

Course PrerequisitesPrerequisites

Students must have 3-6 months of recent HTML/CSS/Javascript web programming experience or have completed Training 4 Developers’  Introduction to Web Programming course.

Experience with React or GraphQL is a huge plus.

Course RequirementsRequirements

We teach all classes online. Students will need to be able to join an online session using a popular online meeting service such as Zoom, Microsoft Teams, GotoTraining, etc… If the client has no preference, Zoom will be used.

We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and programming along with the instructor. The second display can be a tablet connect to the session if the meeting software provides an app for the student’s tablet.

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. If students cannot access GitHub or Google Drive, alternatives will be discussed.

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. React
    1. Introduction
      1. What is React?
      2. What problem does React solve?
      3. Development Ecosystem
      4. React versus other frameworks
    2. Development Tools
      1. Create React App project generator
      2. ii.
      3. Running and Debugging a React Application
      4. Role of Node.js
      5. Purpose of React and ReactDOM
    3. Functional Components
      1. What are Components?
      2. Create Element and JSX
      3. Benefits of JSX
      4. Fragments
      5. JavaScript Arrow Functions
      6. ES2015 Modules
      7. JSX and Expressions
      8. Displaying Collections of Data
      9. JavaScript Array Maps and React Keys
      10. Passing Data with Props
      11. Validating Props with PropTypes
      12. Default Props
      13. Using Memo
    4. Class-Based Components
      1. JavaScript Classes and Extends
      2. Configuring State
      3. Lifecycle Methods
      4. Context of Event Handlers
      5. Class Properties and Class Arrow Functions
      6. PropTypes and Default Props on Classes
    5. Hooks
      1. Overview of Hooks
      2. State Hook
      3. Effect Hook
      4. Ref Hook
      5. Callback Hook
    6. Other Topics
      1. Composition vs. Inheritance
      2. Patterns: Specialization, Containment, and Higher Order Components
      3. Lifting State Up
      4. Forwarding Refs
      5. Context
      6. Error Boundaries
    7. React Router
      1. What problem does routing solve?
      2. Declarative Routing
      3. Connecting Routes and Components
      4. Passing Data Between Routes
  2. GraphQL + Apollo
    1. Introduction
      1. What is Apollo?
      2. Apollo compared to Flux, Redux, and Relay
      3. Benefits of GraphQL, React and Apollo
    2. Apollo Server
      1. Configuring Apollo Server with Express
      2. GraphQL Schema Definition Language
      3. GraphQL Type System
      4. Apollo Engine
    3. Connecting React to GraphQL
      1. Setting up the Apollo Networking Environment
      2. Passing Custom Headers to the GraphQL Server
      3. Using the Apollo Provider to connect GraphQL to React
      4. Co-locating the GraphQL Query with the React component
      5. Using the Query Component
      6. Handling Loading and Error States
      7. Understanding the GraphQL Cache
      8. Apollo Hooks
    4. Extending the Component Tree
      1. Using Fragments
      2. Writing GraphQL Fragments
      3. Linking Fragments from a Child to a Parent
      4. Nesting Many Fragment Containers
      5. Exploring Apollo GraphQL Requests and State using Tooling
      6. Higher Order Components with the GraphQL Function
    5. Working with a Collection of Data
      1. GraphQL and Collections of Data
      2. Offset vs. Cursor Based Pagination
      3. Incremental Loading
      4. Connection Directive
    6. Performing Mutations & Subscriptions
      1. Exploring Kinds of Mutations: Add, Delete and Update Node
      2. Understanding GraphQL beyond CRUD operations
      3. Configuring Mutations within Apollo Server
      4. Configuring Mutations within Apollo Client
      5. Store Updates, Optimistic Responses
      6. Handling Errors from Failed Mutations
      7. Subscripts over Web Sockets
  3. Unit Testing
    1. JavaScript Unit Testing
    2. Jest and Enzyme
    3. Organize Tests and Test Suites
    4. Setup and Teardown of Tests
    5. Assertions with Expect
    6. Testing Components: Snapshot, Shallow, DOM Testing
    7. Unit Testing Apollo on the Client-Side
Scroll to Top