
udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
Изучайте GraphQL и Apollo! Создайте быстрое приложение портфолио в Next.js (Next 9+) / React, backend с Apollo + Node.js.
Что такое GraphQL ?
GraphQL - это язык запросов для вашего API и серверная среда выполнения для выполнения запросов с использованием системы типов, которую вы определяете для своих данных. GraphQL не привязан к какой-либо конкретной базе данных или хранилищу, а поддерживается существующим кодом и данными.
Что такое Apollo ?
Apollo - это стандартная реализация GraphQL, предоставляющая слой графа данных, который соединяет современные приложения с облаком. Apollo будет осуществлять извлечение данных, кэширование и управление состоянием из коробки!
Что такое Next.js?
Next.js - это фреймоврк React, предоставляющий инфраструктуру и простой опыт разработки для приложения, отображаемого на стороне сервера (SSR).
Что мы будем строить?
Мы будем работать в основном над функциями портфолио. Вы узнаете, как управлять данными на клиенте и сервере с помощью Apollo и Graphql. Данные будут храниться в базе данных Mongo Atlas, с которой мы будем связываться через Node JS Server. Мы создадим функциональность для создания портфолио, и я объясню вам, как легко управлять формами. Затем мы рассмотрим функцию обновления, где я покажу вам, как заполнять входные данные существующими данными. После этого будем работать над удалением функциональности. Все функции будут реагировать и обновлять вид в режиме реального времени. Вы изучите основы извлечения данных и мутаций данных с помощью Apollo.
Еще одна важная функция, над которой мы будем работать, - это аутентификация на основе сеансов. Пользователи смогут регистрироваться, входить в систему и использовать функции только для аутентифицированных пользователей. Вы узнаете, как управлять сеансами, как защищать страницы и управлять состоянием аутентификации через ваше приложение.
Разработка форума будет самой большой. Вы узнаете, как создать полностью рабочий форум, состоящий из тем и сообщений. Мы интегрируем компонент, который будет использоваться для создания тем и сообщений. Пользователи смогут создавать различные темы, сообщения, а также ответы на другие сообщения, все они обновляются в режиме реального времени, а также в разных браузерах. После этого вы узнаете, как создать полностью работающую нумерацию страниц!
Позже в ходе курса мы создадим функции для получения случайных данных для домашней страницы, и я расскажу о возможности повторного использования. Мы закончим страницу резюме, и мы приступим к развертыванию. После того, как все производственные улучшения будут применены, мы развернем наше приложение на heroku, чтобы любой человек в Интернете мог получить доступ к нашему портфолио.
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
В этом курсе мы увидим, как быстро next.js ускоряет процесс создания серверных приложений ReactJS, создавая и развертывая приложение, которое загружает записи в блоге из API Google Blogger.По пути мы узнаем о многих удивительных функциях, которые Next.js предоставляет нам из коробки, таких как предварительная выборка маршрута и разделение кода, что позволяет нам тратить больше времени на разработку а не на настройку среды.
Next.js (Next 7), React (React16+) и Node. Узнайте, как создать изоморфный сайт, включая SEO, блог и развертывание. Если вы планируете начать карьеру разработчика или просто хотите усовершенствовать свои навыки программирования, тогда этот курс подходит именно вам. Узнайте, как создать удивительный сайт-портфолио, которым вы сможете поделиться со своими коллегами или будущими работодателями.
Хотите узнать весь процесс создания серверного приложения React? Это курс для вас. Мы начнем с самого начала: «Я даже не знаю, как его использовать ... и зачем мне это?», Чтобы понять, как работает серверная сторона с Next + React, и заставить его взаимодействовать с другими технологиями, такими как Auth0 и Express.
В этой серии мы изучим FullStack React с Next.js v9 и создадим API с Apollo и MongoDB.
Примечание: этот курс предполагает, что у вас есть базовые знания о React, Javascript и CSS. Если у вас их нет, я бы подумал сначала потратить время на изучение React. В этом курсе большую часть времени используются базовые концепции React, такие как создание компонентов, props, состояние и хуки useEffect.
А актуальная уже 3 версия.
Разница небольшая, например здесь gql импортируется из apollo-boost - https://github.com/webuxmotion/next-cv/blob/main/apollo/queries/index.js
А здесь (3 версия) из @apollo/client - https://github.com/webuxmotion/pereverziev/blob/main/apollo/queries/index.js
Т.к. версия Apollo на сайте более новая, чем в курсе, надо большинство импортировать из @apollo/client
import { gql, useQuery, useMutation, ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
за исключением:
import { getDataFromTree } from "@apollo/client/react/ssr";