Ознакомиться с важной информацией: Майнер отключен!

Full-Stack React с GraphQL и Apollo Boost - Видеоуроки

Full-Stack React with GraphQL and Apollo Boost
Duration 06:29:39
Открыть все курсы от udemy

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

И будет доступен в бесплатном просмотре 06.09.2018. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в наших пабликах facebook, или вступай в наш канал telegram.

Комментарии

Похожие курсы

15-04-2018 en 76 уроков
udemy MERN Stack Front To Back: Full Stack React, Redux & Node.js
Создавайте и разверните социальную сеть с помощью Node.js, Express, React, Redux и MongoDB и узнайте как собрать все это вместе.Добро пожаловать в «MERN Stack Front To Back». В этом курсе мы создадим полномасштабное приложение социальной сети, используя Node.js, Express, React, Redux и MongoDB вместе с ES6 +. Мы начнем с пустого текстового редактора и закончим развертывание полного приложения.
Duration 16:27:20
32 1
en
fullstack.io Fullstack React Book - The Complete Guide to ReactJS and Friends
Обновленное, подробное руководство по React. Станьте экспертом ReactJS уже сегодня. Прекратите тратить свое время на запутаные и неполные уроки и книги. Есть так много неправильных, запутанных и устаревших статей и книг... В одном учебнике говорится одно, в другом нечто совершенно иное. Слишком много вариантов. Существует пятьдесят различных паттернов и дюжина различных реализаций Flux. Какой из них лучше? Гугл только доводит вас до страха ......
Duration
32 0
24-08-2017 en 192 урока
udemy Node with React: Fullstack Web Development
Создавайте и развертывайте веб-приложения с помощью NodeJS, React, Redux, Express и MongoDB. Примечание. Этот курс предполагает что у вас уже есть знания React и Redux. Посмотрите мой курс «Modern React with Redux», он будет отличной подготовкой для вас перед просмотром этого курса.
Duration 25:43:06
14 0
16-01-2018 en 252 урока
udemy The complete React Fullstack course
Вы хотите увидеть весь процесс создания своего приложения? Тогда этот курс для вас. Поднимите свой скилл на новый уровень с помощью React, Node js, MongoDB, Firebase, Webpack и ES6.

Мы начнем с самого начала, начиная с «Я даже не знаю, как использовать это ... и зачем мне оно», чтобы реально понять, как работает React, и заставить его общаться с другими технологиями, такими как Firebase и Node js. Вы узнаете всю логику и...
Duration 44:33:39
42 0

Последнее добавленное

Продвинутый Elm

Продвинутый Elm

en
Вы потратили время на строительство с Elm, и у вас возникли некоторые вопросы. Каковы наилучшие методы аутентификации, масштабирования, стилизации, структуры модулей, отдельных страниц и оптимизации производительности? Как вы можете декодировать сложные структуры JSON и взаимодействовать с...
Java: модульное программирование с Java 9: 2 в 1

Java: модульное программирование с Java 9: 2 в 1

en
С легкостью создавайте и поддерживайте большие приложения с помощью возможностей модульного программирования в Java 9. Чтобы создать стандартизованный интерфейс и включить модули для связи, вам необходимо разбить среду разработки программного обеспечения на отдельные модули, чтобы минимизировать...
Изучаем React с нуля на реальном проекте

Изучаем React с нуля на реальном проекте

ru
В этом курсе вы изучите, как создавать проекты на React. Вы создадите реальное приложение. Этот курс будет полезен тем, кто хочет изучить React на реальном проекте. Курс будет дополняться - вы получите еще больше обучающих видео уже осенью 2018! Будет записано более 20 часов. Вы изучите все...
Введение в Elm v2

Введение в Elm v2

en
В этом воркшопе вы получите знание языка программирования Elm с нуля, чтобы иметь возможность создавать веб-приложение. Во-первых, мы обсудим преимущества Elm, в том числе его очень сплоченную независимую экосистему пакетов, отладчик и репутацию практически никогда не падающего приложения.
AWS для Frontend инженеров (S3, Cloudfront, Route 53, and Lambda@Edge)

AWS для Frontend инженеров (S3, Cloudfront, Route 53, and Lambda@Edge)

en
Итак, вы работали над фантастическим приложением - что теперь? Как вы собираетесь выставить его в Интернете, чтобы ваши пользователи в Сиднее могли наслаждаться такой же задержкой, как в Миннеаполисе или Куала-Лумпуре? Как насчет DNS? В этом воркшопе мы рассмотрим, что предлагает AWS для Frontend...
chat
logo