Full-Stack React with GraphQL and Apollo Boost

6h 54m 31s
English
Free

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.  

Read more about the course

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.

Requirements:

  • A basic familiarity with React

  • Some knowledge of JavaScript ES6 features is helpful, but not required

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

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

Watch Online Full-Stack React with GraphQL and Apollo Boost

0:00
/
#1: Project App Demo
#TitleDuration

Similar courses to Full-Stack React with GraphQL and Apollo Boost

React Front To Back 2022

React Front To Back 2022udemyBrad Traversy

Category: React.js
Duration 19 hours 57 minutes 45 seconds
The Road to Next

The Road to NextRobin Wieruch

Category: React.js, Next.js
Duration 30 hours 40 minutes 42 seconds
Build a React & Redux App w CircleCI CICD, AWS & Terraform

Build a React & Redux App w CircleCI CICD, AWS & Terraformudemy

Category: React.js, AWS, Redux, Terraform
Duration 25 hours 45 minutes 21 seconds
Build a Spotify Connected App

Build a Spotify Connected Appfullstack.io

Category: React.js, Node.js
Duration 3 hours 47 minutes 28 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass

PHP Symfony 4 API Platform + React.js Full Stack Masterclassudemy

Category: React.js, Symfony
Duration 19 hours 24 minutes 17 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Category: JavaScript, React.js, HTML, CSS
Duration 12 hours 13 minutes 30 seconds
The complete React Fullstack course ( 2021 edition )

The complete React Fullstack course ( 2021 edition )udemy

Category: React.js, MongoDB
Duration 76 hours 58 minutes 6 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guideudemy

Category: React.js, Node.js, MongoDB
Duration 18 hours 45 minutes 10 seconds
Node with React: Fullstack Web Development

Node with React: Fullstack Web DevelopmentudemyStephen Grider

Category: React.js, Node.js, MongoDB
Duration 25 hours 36 minutes 19 seconds
The Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds