Building a GraphQL Project with React.js

2h 16mIntermediate2021-03-10

Authors

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

Are you a web developer creating apps? GraphQL gives you a clean way to query complex server data efficiently, and React makes it easy to present that information as a web application in the browser. In this course, instructor Ray Villalobos teaches you how to assemble these parts, using the familiar structure of GitHub as a source for information. Ray first walks you through installing React, including how to use the command-line interface (CLI), as well as how to customize and add the node modules you will need for this project. He explores what you can do with the GitHub API using GraphiQL, then shows you how to retrieve data, generate a query component, and more. Ray goes over each step in building the React app, concluding with how to create the pagination interface.

Skills covered

GraphQLReact.jsMetaFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Why use React with GraphQL for projects
02 - Using the exercises for this course

1. Getting Started

03 - Installing requirements
04 - Analyzing the React installation
05 - Customizing and adding modules

2. GitHub's GraphQL Schema

06 - Exploring GraphQL
07 - Building queries
08 - GitHub authentication tokens

3. Working with GraphQL Data

09 - Retrieving data
10 - Generating state
11 - Creating a query component
12 - Using the Callback hook

4. Building the React App

13 - Generating a list of repos
14 - Using search queries
15 - Working with conditional classes
16 - Reading license information

5. Adding Interactive Features

17 - Creating dynamic queries
18 - Building a search component
19 - Setting up pagination
20 - Creating the pagination interface

Conclusion

21 - Next steps