Главная страницаКатегория react.jsFull-Stack React с GraphQL и Apollo Boost

Full-Stack React с GraphQL и Apollo Boost

Name: Full-Stack React с GraphQL и Apollo Boost
Rating: 5 (30 reviews)

Full-Stack React with GraphQL and Apollo Boost

udemy

★5 (всего оценок - 30)

Full-Stack React с GraphQL и Apollo Boost

Загрузить

Продолжительность

6 ч 54 мин

Категория

React.js

Количество уроков

76 Видео

Дата добавления

6 авг. 2018 г., 19:57

Язык

Английский

Дата выхода

10 июл. 2018 г., 10:00

Дата обновления

5 апр. 2020 г., 14:54

Создавайте и развертывайте приложение с React и GraphQL с нуля с помощью Apollo Boost, Express и MongoDB.

Этот курс предназначен для всех, кто хочет начать создавать приложения с помощью React и GraphQL! В этом курсе мы создадим приложение "рецептов" с нуля с полной аутентификацией (signup, signin, signout), а также с возможностью создавать, просматривать, искать, сохранять и удалять рецепты.

Построение этого проекта даст вам навыки для создания приложений полного стека React и GraphQL с нуля для любой темы, которая вам нравится!

Этот курс предполагает некоторый опыт работы с React, но если вы знакомы с базовыми концепциями JavaScript и имеете некоторые знания о функциях ES6, вы сможете проходить курс.

Мы начнем с создания бэкэнда с помощью Node.js с использованием Express, а затем узнаем, как интегрировать наш сервер с GraphQL. Мы узнаем о важнейших вопросах в GraphQL, таких как запросы, мутации, схемы и решения, мы изучим синтаксис GraphQL и много поработаем с GraphiQL для тестирования наших запросов и мутаций, после чего мы перейдем к работе с React.
Затем мы создадим приложение React, подключим его к нашему серверу GraphQL-Express с помощью Apollo Boost. Мы рассмотрим все новейшие функции Apollo Boost и React Apollo, включая ApolloClient, ApolloProvider / ApolloConsumer, а также компоненты Query и Mutation. Кроме того, мы узнаем, как обновлять запросы, использовать Optimistic UI, компоненты запросов и мутаций, использовать фрагменты и многое другое!
Помимо изучения всех возможностей Apollo Boost, мы будем использовать основные библиотеки React, такие как React Router (версия 4), чтобы обеспечить маршрутизацию для нашего приложения, узнать, как создавать защищенные маршруты, использовать основные методы жизненного цикла, укрепить надлежащие методы управления состоянием, использовать полезные фичи ES6, такие как операторы распространения объектов и массивов, деструктурирование объектов и массивов, а также более чистые методы React, такие как синтаксис инициализатора свойств.
Когда мы закончим создание нашего приложения, мы пройдем процесс развертывания в Heroku. Мы создадим сценарий postbuild, который позволит нам развернуть наше приложение с полным стеком, используя CLI Heroku.
В качестве раздела бонуса мы собираемся погрузиться в некоторые дополнительные библиотеки компонентов React, что даст нам возможность предоставить пользователям способность настраивать свои рецепты и сделать наше приложение отзывчивым с помощью CSS.

Посмотреть больше

Урок 1.00:10:53
Project App Demo
Урок 2.00:08:10
GraphQL Introduction
Урок 3.00:03:05
Apollo / Apollo Boost Introduction
Урок 4.00:01:59
Install Packages our for Project
Урок 5.00:01:08
Git Clone and npm Install Dependencies
Урок 6.00:02:38
Initialize Express Server
Урок 7.00:05:49
Create MongoDB Atlas Database and Connect To It
Урок 8.00:06:07
Create Mongoose Schemas
Урок 9.00:04:23
Add Apollo-Express Middleware
Урок 10.00:04:34
Create GraphQL Schema
Урок 11.00:03:48
Add bodyParser Middleware and Root Query Type
Урок 12.00:05:28
Create First Mutation
Урок 13.00:03:24
Create First Query
Урок 14.00:01:41
Create React Application with create-react-app
Урок 15.00:02:46
Clean Up App.js and Add Components Folder
Урок 16.00:02:02
Add Client Dependencies and Set Up ApolloClient/ApolloProvider
Урок 17.00:05:06
Create Queries Folder, Write First Apollo Query
Урок 18.00:02:06
Add cors Middleware to Prevent Cross-Origin Errors
Урок 19.00:01:20
Add Skeleton CSS and Base Styles
Урок 20.00:06:19
Create Signup Mutation
Урок 21.00:03:34
Hash User Password with bcrypt
Урок 22.00:05:18
Add Routing with react-router-dom
Урок 23.00:03:07
Add Form to Signup Component
Урок 24.00:05:37
Manage Input State in Signup Form
Урок 25.00:05:43
Add Mutation Component to Signup Component, Write SIGNUP_USER Apollo Mutation
Урок 26.00:03:59
Add onSubmit to Signup Form, Run Signup Mutation on Client
Урок 27.00:09:12
Create Error Component, Clear State Upon Submit, Add Form Validation
Урок 28.00:05:36
Create Signin Mutation on Backend
Урок 29.00:03:38
Implement Signin Mutation on Client
Урок 30.00:06:27
Add Token to Local Storage, Put Token on Authorization Header
Урок 31.00:03:20
Verify JWT on Backend to Get Current User
Урок 32.00:10:32
Add getCurrentUser Query, Create withSession Component
Урок 33.00:05:34
Redirect Upon Signin/Signup, Refetch getCurrentUser Query Upon Redirect
Урок 34.00:06:22
Add Navbar Component, Add Search Component
Урок 35.00:04:52
Add Navbar Links For Auth User
Урок 36.00:03:33
Make Navbar Dynamic, Add Custom Heading
Урок 37.00:06:08
Implement Signout Button
Урок 38.00:05:35
Map Over Recipes, Create Recipe Item Component
Урок 39.00:06:08
Create Recipe Page, Get Recipe Id From Path
Урок 40.00:06:07
Add getRecipe Query in Backend, Run Query on Recipe Page
Урок 41.00:06:26
Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form
Урок 42.00:05:46
Make AddRecipe a Stateful Component
Урок 43.00:11:46
Implement addRecipe Mutation on Client
Урок 44.00:03:29
Clear State and Redirect Upon addRecipe Mutation
Урок 45.00:10:27
Learning and Implementing Optimistic UI
Урок 46.00:07:59
Create searchRecipes Query on Backend, add Apollo Query to Search Component
Урок 47.00:08:59
Index Recipe Fields, Perform Search Query on Input Change Event
Урок 48.00:02:51
Add SearchItem Component
Урок 49.00:09:48
Add UserInfo Component to Profile Page
Урок 50.00:07:47
Add UserRecipes Component to Profile Page, Implement getUserRecipes Query
Урок 51.00:09:00
Add Route Protection with withAuth Component
Урок 52.00:06:53
Add and Implement deleteUserRecipe Mutation
Урок 53.00:05:13
Add Optimistic UI to deleteUserRecipe Mutation
Урок 54.00:02:04
Add refetchQueries to deleteUserRecipe Mutation
Урок 55.00:02:08
Add refetchQueries to addRecipe Mutation
Урок 56.00:01:27
Provide Default Text for User Without Recipes
Урок 57.00:04:06
Create LikeRecipe Component and Hide If Not Auth
Урок 58.00:08:07
Add and Implement likeRecipe Mutation
Урок 59.00:05:40
Develop Client-side Logic to Properly Toggle Like
Урок 60.00:09:43
Create and Implement unlikeRecipe Mutation with Optimistic UI
Урок 61.00:04:13
Prepare for Deployment
Урок 62.00:05:04
Use Fragments to Clean Up Queries
Урок 63.00:12:49
Deploy to Heroku
Урок 64.00:01:50
Add Additional CSS to Project
Урок 65.00:04:45
Adds imageUrl field on Recipe model and imageUrl input in addRecipe
Урок 66.00:04:37
Display Recipe Image on Home Page, Build Card
Урок 67.00:05:31
Style Recipe Page
Урок 68.00:05:54
Add CKEditor Component to AddRecipe Page for Formatted Instructions
Урок 69.00:07:26
Intro to React Pose Animation Library
Урок 70.00:07:18
Add React Pose Animation to Home Page
Урок 71.00:05:03
Add Spinners When Loading
Урок 72.00:04:17
Style Searchbar and Redeploy
Урок 73.00:02:53
Add Update Button, Make UserRecipes Stateful Component
Урок 74.00:06:46
Create Edit Recipe Modal
Урок 75.00:04:53
Populate Edit Recipe Modal
Урок 76.00:08:25
Create updateUserRecipe Mutation, Execute on Client

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+195