Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL

✍ Scribed by David Choi

• Publisher: Packt Publishing
• Year: 2020
• Tongue: English
• Leaves: 648
• Category: Library

✦ Synopsis

Discover the current landscape of full-stack development and how to leverage modern web technologies for building production-ready React.js applications to deploy on AWS
Key Features

Understand the architecture of React and single-page applications
Build a modern Web API for your SPA using Node.js, Express, and GraphQL
Gain a clear and practical understanding of how to build a complete full-stack application

Book Description

React sets the standard for building high-performance client-side web apps. Node.js is a scalable application server that is used in thousands of websites, while GraphQL is becoming the standard way for large websites to provide data and services to their users. Together, these technologies, when reinforced with the capabilities of TypeScript, provide a cutting-edge stack for complete web application development.

This book takes a hands-on approach to implementing modern web technologies and the associated methodologies for building full-stack apps. You'll begin by gaining a strong understanding of TypeScript and how to use it to build high-quality web apps. The chapters that follow delve into client-side development with React using the new Hooks API and Redux. Next, you'll get to grips with server-side development with Express, including authentication with Redis-based sessions and accessing databases with TypeORM. The book will then show you how to use Apollo GraphQL to build web services for your full-stack app. Later, you'll learn how to build GraphQL schemas and integrate them with React using Hooks. Finally, you'll focus on how to deploy your application onto an NGINX server using the AWS cloud.

By the end of this book, you'll be able to build and deploy complete high-performance web applications using React, Node, and GraphQL.
What you will learn

Discover TypeScript's most important features and how they can be used to improve code quality and maintainability
Understand what React Hooks are and how to build React apps using them
Implement state management for your React app using Redux
Set up an Express project with TypeScript and GraphQL from scratch
Build a fully functional online forum app using React and GraphQL
Add authentication to your web app using Redis
Save and retrieve data from a Postgres database using TypeORM
Configure NGINX on the AWS cloud to deploy and serve your apps

Who this book is for

The book is for web developers who want to go beyond front-end web development and enter the world of full-stack web development by learning about modern web technologies and how they come together. A good understanding of JavaScript programming is required before getting started with this web development book.

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Table of Contents
Preface
Section 1:Understanding TypeScript and How It Can Improve Your JavaScript
Chapter 1: Understanding TypeScript
Technical requirements
What is TypeScript?
Why is TypeScript necessary?
Dynamic versus static typing
Object-oriented programming
Summary
Chapter 2: Exploring TypeScript
Technical requirements
What are types?
How do types work?
Exploring TypeScript types
The any type
The unknown type
Intersection and union types
Literal types
Type aliases
Function return types
Functions as types
The never type
Understanding classes and interfaces
Classes
Interfaces
Understanding inheritance
Abstract classes
Interface
Learning generics
Learning the latest features and configuring the compiler
Optional chaining
Nullish coalescing
TypeScript configuration
Summary
Chapter 3: Building Better Apps with ES6+ Features
Technical requirements
Learning about ES6 variable types and JavaScript scoping
Learning about arrow functions
Changing the this context
Learning about spread, destructuring, and rest
Spread, Object.assign, and Array.concat
Rest
Learning about new array functions
find
filter
map
reduce
some and every
Learning about new collection types
Set
Map
Learning about async await
Summary
Section 2: Learning Single-Page Application Development Using React
Chapter 4: Learning Single-Page Application Concepts and How React Enables Them
Technical requirements
Understanding how websites were built in the past
Understanding SPA benefits and attributes
Understanding how React helps build SPAs
Attributes of a React application
Summary
Chapter 5: React Development with Hooks
Technical requirements
Understanding the limitations and issues with the old class-style components
State
Lifecycle methods
Learning React Hooks and understanding how it is an improvement over class-style components
Comparing and contrasting the class way versus the Hooks way
Code reuse
Simplicity
Summary
Chapter 6: Setting Up Our Project Using create-react-app and Testing with Jest
Technical requirements
Learning React development methods and about the build system
Project tools
Transpilation
Code repositories
Understanding client-side testing for React
Mocking
Mocking with jest.fn
Component mocking
Learning common tools and practices for React development
VS Code
Prettier
Chrome Debugger
Alternative IDEs
Summary
Chapter 7: Learning Redux and React Router
Technical requirements
Learning about Redux state
Reducers and actions
React Context
Learning about React Router
Summary
Section 3: Understanding Web Service Development Using Express and GraphQL
Chapter 8: Learning Server-Side Development with Node.js and Express
Technical requirements
Understanding how Node works
Event loop
Learning Node's capabilities
Installing Node
Creating a simple Node server
Request and Response
Routing
Debugging
Understanding how Express improves Node development
Learning Express's capabilities
Creating a web API with Express
Summary
Chapter 9: What is GraphQL?
Technical requirements
Understanding GraphQL
Understanding GraphQL schemas
Understanding Typedefs and Resolvers
Understanding queries, mutations, and subscriptions
Summary
Chapter 10: Setting Up an Express Project with TypeScript and GraphQL Dependencies
Technical requirements
Creating a TypeScript-based Express project
Adding GraphQL and dependencies to a project
Reviewing ancillary packages
Summary
Chapter 11: What We Will Learn – Online Forum Application
Analyzing what we will build – The forum application
Analyzing forum authentication
Analyzing thread management
Analyzing the thread points system
Summary
Chapter 12: Building the React Client for Our Online Forum Application
Technical requirements
Creating the initial version of our React application
CSS Grid
Error Boundaries
Data Service layer
Navigation menu
Authentication components
Routing and screens
Home screen
Thread posts screen
Summary
Chapter 13: Set Up a Session State Using Express and Redis
Technical requirements
Understanding session state
Understanding Redis
Building session state with Express and Redis
Summary
Chapter 14: Setting Up Postgres and a Repository Layer with TypeORM
Technical requirements
Setting up our Postgres database
Understanding object relational mappers by using TypeORM
Building our repository layer using Postgres and TypeORM
Summary
Chapter 15: Adding GraphQL Schema Part I
Technical requirements
Creating GraphQL server-side typedefs and resolvers
ThreadPoint System
Integrating authentication with GraphQL resolvers
Creating React client-side Hooks for querying Apollo GraphQL
The Main screen
Authentication-related features
The UserProfile screen
Summary
Chapter 16: Adding a GraphQL Schema – Part II
Thread route
Points system
Summary
Chapter 17: Deploying an Application to AWS
Technical requirements
Setting up Ubuntu Linux on AWS Cloud
Setting up Redis, Postgres, and Node on Ubuntu
Setting up Redis
Setting up Postgres
Setting up Node
Setting up and deploying our app on NGINX
Setting up super-forum-server
Setting up super-forum-client
Troubleshooting
Summary
Other Books You May Enjoy
Index