newLine – TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL – Part One 2020-2

Description

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL is an advanced React, Node, TypeScript and GraphQL training course with a build program over an 8 week online course.

What you will learn in TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

How to build a GraphQL API in Node.js with Apollo Server from scratch

Ensure you build professional applications

Build large-scale React applications with 2020 techniques like Hooks

Use React Apollo and Apollo CLI to manage GraphQL requests by React

Prevent bugs by using TypeScript to write optimal code

Save data using MongoDB and PostgreSQL

Manage purchases using Stripe

Learn how to deploy hassle-free applications using Heroku

Use authentication complexity using the OAuth 2.0 industry standard (Google Sign-In)

Use location search using Googles Geocode API

Course information

Publisher: newLine Instructors: Hassan Djirdeh and Jing Chen English language Level of education: Intermediate Number of lessons: 68 Duration: Assuming 4 hours of work per week, 2 months

Topics

Welcome Introduction

TinyHouse Welcome Syllabus How To Go Through The Course Environment Setup Part One Welcome

Module 1 Getting Started With Our Server

Module 1 Introduction What is Node? Running JavaScript with Node Creating a minimal Node:Express Server Automatic Reloading Using Nodemon Introducing TypeScript Adding TypeScript to our Server Compiling our TypeScript project Linting with ESLint Introducing mock listings Creating GET and POST Express routes Module 1 Summary

Module 2 Comparing APIs

Module 2 Introduction What is GraphQL? Comparing Github’s REST and GraphQL APIs GraphQL Concepts

Module 3 Using Apollo Server

Module 3 Introduction Installing Apollo Server and GraphQL Creating a GraphQL Schema with the GraphQL JS Library Querying and mutating listings data with GraphQL Using the GraphQL Schema Language Module 3 Summary

Module 4 Storing Data

Module 4 Introduction Introduction to MongoDB Setting up a new MongoDB Cluster with Atlas Connecting the server with MongoDB TypeScript Generics and adding types to our Collections Setting Up Env Variables Seeding mock data to the database Processing Data from MongoDB Modularizing Resolvers Module 4 Summary

Module 5 Getting Started with React

Module 5 Introduction React Create React App Create React App – The Rundown

Module 6 Building out Listings

Module 6 Introduction The Listings Component Props & TypeScript Functional Components & TypeScript Querying Listings Abstracting the type of data from server fetch Deleting a listing Module 6 Summary

Module 7 GraphQL and Hooks

Module 7 Introduction React Hooks The useState Hook The useEffect Hook Custom useQuery Hook Custom useQuery and refetch Custom useQuery and loading/error states Custom useMutation Hook The useReducer Hook Module 7 Summary

Module 8 Introducing React Apollo

Module 8 Introduction Creating our Apollo Client React Apollo Hooks Autogenerated types with Apollo CLI Module 8 Summary

Module 9 Styling with Ant Design

Module 9 Introduction UI Frameworks and Ant Design Styling with Ant Design

Module 10 Part One Conclusion

Part One Conclusion

Prerequisite

We assume you know the basics of HTML/CSS/JavaScript and perhaps have dabbled in a newer front-end library (like React) to recognize what it offers. With that said, we spend as much time as we can to ensure that we introduce and explain all the technologies we intend to use before we use them.

The course does not teach you how to program from scratch. We delve into intermediate/advanced code, for example, building a GraphQL server with Node and using Hooks with React.

While you don’t have to be a React or Node expert, it is good if you have, for example, gone through a basic React tutorial beforehand.

Installation

After Extract, watch with your favorite Player.

Subtitle: None

Quality: 1080

Note: The following modules are available in the second part of this course entitled TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two.

Changes

Version 2020/2 has not changed the content and total time of lessons compared to version 2020/1, but source code and PDF files have been added.