Full-Stack React, TypeScript, and Node

Build cloud-ready web applications using React 17 with Hooks and GraphQL

David Choi

• Publisher: Packt Publishing
• Year: 2020
• Print ISBN: 9781839219931
• eBook ISBN: 9781839214691
• Edition: 1
• Topic: Computer Science
• Subtopic: Systems Architecture
• Index: Computer Science

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.

Section 1:Understanding TypeScript and How It Can Improve Your JavaScript

This section gives you an overview of the benefits of TypeScript and its most important language features. We will also cover what the most important features of ES6 are, and how we can improve code quality and readability.

This section comprises of the following chapters:

• Chapter 1, Understanding TypeScript
• Chapter 2, Exploring TypeScript
• Chapter 3, Building Better Apps with ES6+ Features

Chapter 1: Understanding TypeScript

JavaScript is an enormously popular and powerful language. According to GitHub, it is the most popular language in the world (yes, used even more than Python), and the new features in ES6+ continue to add useful capabilities. However, for large application development, its feature set is considered to be incomplete. This is why TypeScript was created.

In this chapter, we'll learn about the TypeScript language, why it was created, and what value it provides to JavaScript developers. We'll learn about the design philosophy Microsoft used in creating TypeScript and why these design decisions added important support in the language for large application development.

We'll also see how TypeScript enhances and improves upon JavaScript. We'll compare and contrast the JavaScript way of writing code with TypeScript. TypeScript has a wealth of cutting-edge features to benefit developers. Chief among them are static typing and Object-Oriented Programming (OOP) capabilities. These features can make for code that is higher quality and easier to maintain.

By the end of this chapter, you will understand some of the limitations of JavaScript that make it difficult to use in large projects. You will also understand how TypeScript fills in some of those gaps and makes writing large, complex applications easier and less prone to error.

In this chapter, we're going to cover the following main topics:

• What is TypeScript?
• Why is TypeScript necessary?

Technical requirements

In order to take full advantage of this chapter, you should have a basic understanding of JavaScript version ES5 or higher and some experience with building web applications with a JavaScript framework. You'll also need to install Node and a JavaScript code editor, such as Visual Studio Code (VSCode).

You can find the GitHub repository for this chapter at https://github.com/PacktPublishing/Full-Stack-React-TypeScript-and-Node. Use the code in the Chap1 folder.

What is TypeScript?

TypeScript is actually two distinct but related technologies – a language and a compiler:

• The language is a feature-rich, statically typed programming language that adds true object-oriented capabilities to JavaScript.
• The compiler converts TypeScript code into native JavaScript, but also provides the programmer with assistance in writing code with fewer errors.

TypeScript enables the developer to design software that's of a higher quality. The combination of the language and the compiler enhances the developer's capabilities. By using TypeScript, a developer can write code that is easier to understand and refactor and contains fewer bugs. Additionally, it adds discipline to the development workflow by forcing errors to be fixed while still in development.

TypeScript is a development-time technology. There is no runtime component and no TypeScript code ever runs on any machine. Instead, the TypeScript compiler converts TypeScript into JavaScript and that code is then deployed and run on browsers or servers. It's possible that Microsoft considered developing a runtime for TypeScript. However, unlike the operating system market, Microsoft does not control the ECMAScript standards body (the group that decides what will be in each version of JavaScript). So, getting buy-in from that group would have been difficult and time-consuming. Instead, Microsoft decided to create a tool that enhances a JavaScript developer's productivity and code quality.

So then, if TypeScript has no runtime, how do developers get running code? TypeScript uses a process called transpilation. Transpilation is a method where code from one language is "compiled" or converted into another language. What this means is that all TypeScript code ultimately is converted into JavaScript code before it is finally deployed and run.

In this section, we've learned what TypeScript is and how it works. In the next section, we'll learn about why these features are necessary for building large, complex applications.

Why is TypeScript necessary?

The JavaScript programming language was created by Brendan Eich and was added to the Netscape browser in 1995. Since that time, JavaScript has enjoyed enormous success and is now used to build server and desktop apps as well. However, this popularity and ubiquity have turned out to be a problem as well as a benefit. As larger and larger apps have been created, developers have started to notice the limitations of the language.

Large application development has greater needs than the browser development JavaScript was first created for. At a high level, almost all large application development languages, such as Java, C++, C#, and so on, provide static typing and OOP capabilities. In this section, we'll go over the advantages of static typing over JavaScript's dynamic typing. We'll also learn about OOP and why JavaScript's method of doing OOP is too limited to use for large apps.

But first, we'll need to install a few packages and programs to allow our examples. To do this, follow these instructions:

1. Let's install Node first. You can download Node from here: https://nodejs.org/. Node gives us npm, which is a JavaScript dependency manager that will allow us to install TypeScript. We'll dive deep into Node in Chapter 8, Learning...

Table of contents

• Full-Stack React, TypeScript, and Node
• Why subscribe?
• Preface
• Section 1:Understanding TypeScript and How It Can Improve Your JavaScript
• Chapter 1: Understanding TypeScript
• Chapter 2: Exploring TypeScript
• Chapter 3: Building Better Apps with ES6+ Features
• Section 2: Learning Single-Page Application Development Using React
• Chapter 4: Learning Single-Page Application Concepts and How React Enables Them
• Chapter 5: React Development with Hooks
• Chapter 6: Setting Up Our Project Using create-react-app and Testing with Jest
• Chapter 7: Learning Redux and React Router
• Section 3: Understanding Web Service Development Using Express and GraphQL
• Chapter 8: Learning Server-Side Development with Node.js and Express
• Chapter 9: What is GraphQL?
• Chapter 10: Setting Up an Express Project with TypeScript and GraphQL Dependencies
• Chapter 11: What We Will Learn – Online Forum Application
• Chapter 12: Building the React Client for Our Online Forum Application
• Chapter 13: Set Up a Session State Using Express and Redis
• Chapter 14: Setting Up Postgres and a Repository Layer with TypeORM
• Chapter 15: Adding GraphQL Schema Part I
• Chapter 16: Adding a GraphQL Schema – Part II
• Chapter 17: Deploying an Application to AWS
• Other Books You May Enjoy