Full-Stack React, TypeScript, and Node

Full-Stack React, TypeScript, and Node

by David Choi
Released December 2020
Publisher(s): Packt Publishing
ISBN: 9781839219931

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

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

Product information

  • Title: Full-Stack React, TypeScript, and Node
  • Author(s): David Choi
  • Release date: December 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781839219931