Full-Stack React with GraphQL and Apollo Boost

06:54:31 Inglés Free 02/05/2024 76 videos

Descripción del curso

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.

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.
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!
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.
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.
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

Curriculum

Section 1: Module 1

02 - Project App Demo 10:53
03 - GraphQL Introduction 08:10
04 - Apollo / Apollo Boost Introduction 03:05
05 - Install Packages our for Project 01:59
06 - Git Clone and npm Install Dependencies 01:08
07 - Initialize Express Server 02:38
08 - Create MongoDB Atlas Database and Connect To It 05:49
09 - Create Mongoose Schemas 06:07
10 - Add Apollo-Express Middleware 04:23
11 - Create GraphQL Schema 04:34
12 - Add bodyParser Middleware and Root Query Type 03:48
13 - Create First Mutation 05:28
14 - Create First Query 03:24
15 - Create React Application with create-react-app 01:41
16 - Clean Up App.js and Add Components Folder 02:46
17 - Add Client Dependencies and Set Up ApolloClient/ApolloProvider 02:02
18 - Create Queries Folder, Write First Apollo Query 05:06
19 - Add cors Middleware to Prevent Cross-Origin Errors 02:06
20 - Add Skeleton CSS and Base Styles 01:20
21 - Create Signup Mutation 06:19
22 - Hash User Password with bcrypt 03:34
23 - Add Routing with react-router-dom 05:18
24 - Add Form to Signup Component 03:07
25 - Manage Input State in Signup Form 05:37
26 - Add Mutation Component to Signup Component, Write SIGNUP_USER Apollo Mutation 05:43
27 - Add onSubmit to Signup Form, Run Signup Mutation on Client 03:59
28 - Create Error Component, Clear State Upon Submit, Add Form Validation 09:12
29 - Create Signin Mutation on Backend 05:36
30 - Implement Signin Mutation on Client 03:38
31 - Add Token to Local Storage, Put Token on Authorization Header 06:27
32 - Verify JWT on Backend to Get Current User 03:20
33 - Add getCurrentUser Query, Create withSession Component 10:32
34 - Redirect Upon Signin/Signup, Refetch getCurrentUser Query Upon Redirect 05:34
35 - Add Navbar Component, Add Search Component 06:22
36 - Add Navbar Links For Auth User 04:52
37 - Make Navbar Dynamic, Add Custom Heading 03:33
38 - Implement Signout Button 06:08
39 - Map Over Recipes, Create Recipe Item Component 05:35
40 - Create Recipe Page, Get Recipe Id From Path 06:08
41 - Add getRecipe Query in Backend, Run Query on Recipe Page 06:07
42 - Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form 06:26
43 - Make AddRecipe a Stateful Component 05:46
44 - Implement addRecipe Mutation on Client 11:46
45 - Clear State and Redirect Upon addRecipe Mutation 03:29
46 - Learning and Implementing Optimistic UI 10:27
47 - Create searchRecipes Query on Backend, add Apollo Query to Search Component 07:59
48 - Index Recipe Fields, Perform Search Query on Input Change Event 08:59
49 - Add SearchItem Component 02:51
50 - Add UserInfo Component to Profile Page 09:48
51 - Add UserRecipes Component to Profile Page, Implement getUserRecipes Query 07:47
52 - Add Route Protection with withAuth Component 09:00
53 - Add and Implement deleteUserRecipe Mutation 06:53
54 - Add Optimistic UI to deleteUserRecipe Mutation 05:13
55 - Add refetchQueries to deleteUserRecipe Mutation 02:04
56 - Add refetchQueries to addRecipe Mutation 02:08
57 - Provide Default Text for User Without Recipes 01:27
58 - Create LikeRecipe Component and Hide If Not Auth 04:06
59 - Add and Implement likeRecipe Mutation 08:07
60 - Develop Client-side Logic to Properly Toggle Like 05:40
61 - Create and Implement unlikeRecipe Mutation with Optimistic UI 09:43
62 - Prepare for Deployment 04:13
63 - Use Fragments to Clean Up Queries 05:04
64 - Deploy to Heroku 12:49
65 - Add Additional CSS to Project 01:50
66 - Adds imageUrl field on Recipe model and imageUrl input in addRecipe 04:45
67 - Display Recipe Image on Home Page, Build Card 04:37
68 - Style Recipe Page 05:31
69 - Add CKEditor Component to AddRecipe Page for Formatted Instructions 05:54
70 - Intro to React Pose Animation Library 07:26
71 - Add React Pose Animation to Home Page 07:18
72 - Add Spinners When Loading 05:03
73 - Style Searchbar and Redeploy 04:17
74 - Add Update Button, Make UserRecipes Stateful Component 02:53
75 - Create Edit Recipe Modal 06:46
76 - Populate Edit Recipe Modal 04:53
77 - Create updateUserRecipe Mutation, Execute on Client 08:25

About the Instructor

udemy

$0.00

$8.00

Que esta incluido?

Streaming Multiplataforma
Acceso de por vida
Soporte al cliente
Actualizaciones gratuitas