Full-Stack React, TypeScript, and Node
eBook - ePub

Full-Stack React, TypeScript, and Node

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

David Choi

Compartir libro
  1. 648 páginas
  2. English
  3. ePUB (apto para móviles)
  4. Disponible en iOS y Android
eBook - ePub

Full-Stack React, TypeScript, and Node

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

David Choi

Detalles del libro
Vista previa del libro

Información del libro

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.

Preguntas frecuentes

¿Cómo cancelo mi suscripción?
Simplemente, dirígete a la sección ajustes de la cuenta y haz clic en «Cancelar suscripción». Así de sencillo. Después de cancelar tu suscripción, esta permanecerá activa el tiempo restante que hayas pagado. Obtén más información aquí.
¿Cómo descargo los libros?
Por el momento, todos nuestros libros ePub adaptables a dispositivos móviles se pueden descargar a través de la aplicación. La mayor parte de nuestros PDF también se puede descargar y ya estamos trabajando para que el resto también sea descargable. Obtén más información aquí.
¿En qué se diferencian los planes de precios?
Ambos planes te permiten acceder por completo a la biblioteca y a todas las funciones de Perlego. Las únicas diferencias son el precio y el período de suscripción: con el plan anual ahorrarás en torno a un 30 % en comparación con 12 meses de un plan mensual.
¿Qué es Perlego?
Somos un servicio de suscripción de libros de texto en línea que te permite acceder a toda una biblioteca en línea por menos de lo que cuesta un libro al mes. Con más de un millón de libros sobre más de 1000 categorías, ¡tenemos todo lo que necesitas! Obtén más información aquí.
¿Perlego ofrece la función de texto a voz?
Busca el símbolo de lectura en voz alta en tu próximo libro para ver si puedes escucharlo. La herramienta de lectura en voz alta lee el texto en voz alta por ti, resaltando el texto a medida que se lee. Puedes pausarla, acelerarla y ralentizarla. Obtén más información aquí.
¿Es Full-Stack React, TypeScript, and Node un PDF/ePUB en línea?
Sí, puedes acceder a Full-Stack React, TypeScript, and Node de David Choi en formato PDF o ePUB, así como a otros libros populares de Ciencia de la computación y Servicios web y API. Tenemos más de un millón de libros disponibles en nuestro catálogo para que explores.



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 2Exploring 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...