Full-Stack React with GraphQL and Apollo Boost
3.9 (326 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,245 students enrolled

Full-Stack React with GraphQL and Apollo Boost

Build and deploy a full-stack React and GraphQL app from scratch with Apollo Boost, Express, and MongoDB
3.9 (326 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,245 students enrolled
Created by Reed Barger
Last updated 12/2019
English
English [Auto-generated]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Make practical, production-ready full-stack applications with React and GraphQL
  • Learn the GraphQL language, how to write queries and mutations both on the client and the server
  • Learn React-Apollo in-depth, including Query and Mutation Components, Nested Components, Optimistic UI and Refetching Queries
  • Understand how to use and set up Apollo Boost within React applications
  • Implement essential web app features such as user authentication, searching, and route protection
  • Authenticate your GraphQL application using JSON Web Tokens
  • Learn advanced React patterns such as higher-order components and render props
  • Discover many useful features of React Router 4
  • Learn and reinforce effective state management patterns
  • Animate your React app with popular component libraries such as React Pose
  • Deploy and redeploy full-stack React applications to the web
Course content
Expand all 76 lectures 06:53:13
+ Getting Started
4 lectures 24:03
GraphQL Introduction
08:09
Apollo / Apollo Boost Introduction
03:04
Install Packages our for Project
01:58
+ Project Setup and Building a GraphQL Backend
7 lectures 28:20
Git Clone and npm Install Dependencies
01:07
Create MongoDB Atlas Database and Connect To It
05:48
Create Mongoose Schemas
06:06
Add Apollo-Express Middleware
04:22
Create GraphQL Schema
04:33
+ Creating our React App / Connecting React to GraphQL
6 lectures 14:55
Create React Application with create-react-app
01:40
Clean Up App.js and Add Components Folder
02:45
Add Client Dependencies and Set Up ApolloClient/ApolloProvider
02:01
Create Queries Folder, Write First Apollo Query
05:05
Add cors Middleware to Prevent Cross-Origin Errors
02:05
Add Skeleton CSS and Base Styles
01:19
+ Creating User Signup Functionality / Password Hashing
8 lectures 42:41
Create Signup Mutation
06:18
Hash User Password with bcrypt
03:33
Add Routing with react-router-dom
05:17
Add Form to Signup Component
03:06
Manage Input State in Signup Form
05:36
Add Mutation Component to Signup Component, Write SIGNUP_USER Apollo Mutation
05:42
Add onSubmit to Signup Form, Run Signup Mutation on Client
03:58
Create Error Component, Clear State Upon Submit, Add Form Validation
09:11
+ Adding Signin Functionality
3 lectures 15:38
Create Signin Mutation on Backend
05:35
Implement Signin Mutation on Client
03:37
Add Token to Local Storage, Put Token on Authorization Header
06:26
+ User Authorization in GraphQL
3 lectures 19:23
Verify JWT on Backend to Get Current User
03:19
Add getCurrentUser Query, Create withSession Component
10:31
Redirect Upon Signin/Signup, Refetch getCurrentUser Query Upon Redirect
05:33
+ Adding User-Based Navigation to React
3 lectures 14:44
Add Navbar Component, Add Search Component
06:21
Add Navbar Links For Auth User
04:51
Make Navbar Dynamic, Add Custom Heading
03:32
+ Adding Ability to Create Recipes / Optimistic UI
4 lectures 31:23
Make AddRecipe a Stateful Component
05:45
Clear State and Redirect Upon addRecipe Mutation
03:28
Learning and Implementing Optimistic UI
10:26
Requirements
  • A basic familiarity with React
  • Some knowledge of JavaScript ES6 features is helpful, but not required
Description

New! Additional Bonus SectionUpdates for Full CRUD Functionality

This course is designed for anyone who wants to start building applications with React and GraphQL! In this course, we will build a recipe application from scratch with full authentication (sign up, sign in, sign out), as well as the ability to create, browse, search for, save, and delete recipes.  

Building this project will give you the skills to create full-stack React and GraphQL applications from scratch for any theme you like!

This course presumes some experience with React, but if you are familiar with basic JavaScript concepts and have some knowledge of ES6 features, you will be able to follow along just fine. 

  1. We will begin by building a backend with Node.js using the Express framework, then learn how to integrate our backend with GraphQL. We'll learn about essential topics within GraphQL such as queries, mutations, schemas and resolvers, we'll learn the GraphQL syntax and work extensively with GraphiQL to test our queries and mutations, after which we will move onto working with React. 

  2. Then we will  build a React application and then connect it to our GraphQL-Express backend using Apollo Boost. We'll cover all of the latest features of Apollo Boost and React Apollo, including ApolloClient, ApolloProvider/ApolloConsumer, as well as Query and Mutation components. On top of that, we'll learn how to refetch queries, use optimistic UI, nest query and mutation components, use fragments and much more!

  3. On top of learning all about Apollo Boost, we will use essential React libraries such as React Router (version 4) to provide routing for our application, learn how to make protected routes, use essential lifecycle methods, reinforce proper state management practices, use helpful ES6 features such as the object and array spread operators and object and array destructuring, as well as cleaner React practices such as the property initializer syntax.

  4. Once we are done creating our application, we will go through the process of deploying to Heroku. We will create a postbuild script that will allow us to deploy our full-stack app using the Heroku CLI.

  5. As a bonus section, we're going to dive into some additional React component libraries (i.e. react-pose, react-spinners) that will give us the ability to further style and animate our application to make it production-ready, give users the ability to customize their recipes, and make our application responsive with CSS grid.

Who this course is for:
  • Any developer who wants to learn to make full-stack web applications with React and GraphQL from scratch