Building and Deploying a Full-Stack React Application

Building and Deploying a Full-Stack React Application

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 4h 16m | 626 MB

React—a popular JavaScript framework—boasts a number of developer-friendly tools that can help you quickly and efficiently turn your ideas into fully-functioning applications. If you already have a solid grasp of the essentials of full-stack JavaScript web development, this practical, project-based course can help you get acquainted with React. Follow Carl Peaslee as he walks through how to plan, configure, create, and deploy a scalable, full-stack React and Relay application. As Carl explains how to lay out a UX roadmap, construct the foundation of an application, implement authentication, and connect your app to a remote database, you can practice what you learn by building a site where users can play simple games.

Topics include:

  • Installing local dependencies
  • Generating a starter project
  • Deploying to Heroku
  • Planning your development process
  • Using styled-components
  • Styling for mobile
  • Setting up models on Graphcool
  • Creating Relay mutations
  • Adding Relay to your authentication flow
  • Protecting routes with authentication
Table of Contents

1 Welcome
2 What you should know
3 Exercise files
4 Installing local dependencies
5 Design overview of the app
6 Generating a starter project
7 Creating a Git repository
8 Preparing for relay
9 Setting up React Router
10 Creating children routes
11 Implementing Material-UI
12 Deploying to Heroku
13 Planning our development process
14 Building a nav drawer
15 Nav drawer functionality
16 Nav drawer links
17 Presentational components
18 Using styled-components
19 Styling for mobile
20 Canvas setup
21 Building boards
22 Creating squares
23 Square functionality
24 Building AI
25 Finishing the game
26 Profile page styles
27 Profile page records
28 Authentication setup
29 Authentication class
30 Relay authorization headers
31 Injecting the Relay network layer
32 Setting up models on Graphcool
33 Viewer queries and Relay containers
34 Creating user mutation
35 Signin mutations
36 Adding Relay to our authentication flow
37 Creating an authentication button
38 Creating a Turing test
39 Recording the game
40 Connecting a profile to Relay
41 Protecting routes with authentication
42 Next steps