English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 241 lectures (24h 45m) | 8.73 GB
Learn how to build a single page application in React, with data supplied by a Go back end REST API
React and Go are something of a match made in heaven. React is the world’s most popular JavaScript library for building Single Page Applications, and Go is uniquely well-suited for building REST back ends. That is what this course is all about.
This course has been completely re-done, for React version 18 and React Router version 6. The old version of this course is still available at the end of the new one, with each section marked as “Legacy.” I’ll remove it in a month or so, just to give people who have already started a chance to finish that version, if they so desire.
Learn how to develop and deploy a fast, secure web application built using the most popular and in-demand JavaScript front end (React), with one of the most popular and powerful programming languages for the back end (Go).
React is an open-source, front end JavaScript library for building user interfaces or UI components. React is maintained by Facebook and a community of developers and companies. React can be used as a base in the development of single-page or mobile applications. React is the most popular front-end JavaScript library in the field of web development, and is used by many well-known organizations, including Netflix, Instagram, and the New York Times. With React, we build fast, interactive user interfaces.
Go is a modern, type safe, compiled, and extremely fast programming language. It it is ideally suited for building safe, scalable, incredibly fast REST APIs and web applications, and is also used by large corporations around the wold, including Netflix, Instagram, American Express, and the New York Times.
If you were paying attention, you might have noticed some overlap there — the same large companies using React are also using Go. There is a reason for that, and we will be exploring that reason in this course.
In this course we will go over the core fundamentals of React, including the React life cycle, components, functional components, props, state, and more. We will also cover calling a remote API (both one we build, and a 3rd party API), and much more.
In the first part of the course, we’ll build a simple application using both React class component and Functional Components with hooks. Although hooks and functions appear to the the future for React, there are literally millions of lines of code out there built using classes, so it’s important to know how to work with React using both classes and functions & hooks.
In the second project for this course, we’ll build a Single Page Web Application (SPA) with a React front end and a Go back end API, where we will cover receiving requests on the back end, both as JSON and as GraphQL, and returning that response as JSON.
In order to secure access to authenticated users for certain parts of our site, we will also explore how to generate and use JSON Web Tokens (JWT), including refresh tokens.
This course is not intended for absolute beginners. I expect that you have some experience in JavaScript and Go, and a good knowledge of HTML.
What you’ll learn
- Build amazing single page applications with React JS
- Build reusable, composable components in React
- Build a REST API in Go that handles JSON requests, and serves JSON responses
- Build an API in Go that handles GraphQL requests
Table of Contents
Introduction
1 Welcome
2 Notice for existing students
3 A bit about me
4 Asking for help
5 Mistakes we all make them
Setting up our development environment
6 Installing Node
7 Installing Go
8 Installing Visual Studio Code
9 Installing Docker
Getting Started with React
10 How React works
11 Hello world with React using Classes
12 Hello world with React using functional components
13 Styling Components
14 Using Bootstrap CSS
15 Using props passing data to components
16 React and State I
17 React and State II
18 React and State III
19 React and State IV
20 React and State V
21 Intercepting form submissions with onSubmit
22 handleSubmit continued
23 Ref using references in React
24 References with components forwardRef
25 Class Lifecycle
Getting started with our main project Go Watch a Movie
26 Getting started with our project
27 Setting up the application layout
28 Getting started with React Router v6
29 Configuring React Router
30 Using React Routers Link
31 Working on the Movies component
32 Routing from the Movies component to individual movies
33 Displaying an individual movie
Setting up User Login
34 Working on the Login button
35 Creating the login form
36 Giving the Login component access to setJWT
37 Adding error messages and redirects to the Login component
38 Logging out
Getting started with our Back End API
39 Starting the back end API
40 Adding handlers and routes to our API
41 Installing a routing package
42 Adding a route to our handlers
43 Returning JSON from our API
44 Returning a list of movies as JSON
45 Connecting the front end to the back end API
46 Enabling CORS middleware
47 Enabling Reacts proxy to the back end API
Connecting to Postgres
48 Setting up our database using Docker
49 Getting started connecting our API to Postgres
50 Installing a database driver and connecting to Postgres
51 Setting up a database repository I
52 Setting up a database repository II
53 Improving the allMovies handler to use our database
Working with JSON
54 Setting up utilsgo and a writeJSON helper function
55 Adding a readJSON helper function
56 Adding an errorJSON helper function
57 Using our errorJSON helper function
Authentication with JWT
58 Installing a JWT package
59 Generating tokens
60 Setting default values for JWT tokens
61 Creating a handler to generate a JWT
62 Trying out our handler
63 Generate refresh token cookie
64 Reading a JSON payload in the authenticate handler
65 Looking up a user by email
66 Validating a password
67 Updating the Login component on the front end
68 Refresh tokens I
69 Refresh tokens II
70 Refresh tokens III
71 Refresh tokens IV
72 Refresh tokens V
73 Protecting routes using JWT tokens
74 Authentication middleware
75 Adding our middleware to routes
76 Trying our our protected routes
CreateReadUpdateDelete for our Movie Catalogue
77 Starting on the AddEdit movie component
78 Creating a select component
79 Creating a checkbox component
80 Using our input controls to create the edit movie form
81 Continuing to work on the EditMovie component
82 Getting a movie and Genres from the database
83 Creating handlers to get movies for public and admin
84 Displaying a movie to the public on the front end
85 Getting started with showing genres on the AddEdit movie component
86 Adding checkboxes for genres to the front end form
87 Enabling checkbox clicks on the EditMovie component
88 Validation I
89 Validation II
90 Creating a database method to insert a movie
91 Creating a handler to insert a movie
92 Getting a movie image from a remote API I
93 Getting a movie image from a remote API II
94 Handling genres when inserting a movie
95 Inserting a movie from the front end
96 Trying out adding a movie
97 Editing an existing movie I
98 Editing an existing movie II
99 Editing an existing movie III
100 Writing the handler to update a movie
101 Trying out editing a movie from the front end
102 Getting started with deleting a movie
103 Deleting a movie II
104 Deleting a movie III
105 Deleting a movie IV
Displaying movies by Genre
106 Getting started with listing movies by Genre
107 Creating a handler to list movies by Genre
108 Modifying the front end to list movies by Genre
109 Creating the OneGenre component
GraphQL
110 Getting started with GraphQL
111 GraphQL II
112 GraphQL III
113 Creating a handler for GraphQL
114 Connecting to our GraphQL endpoint from the front end
115 Adding search functionality
Deploying our application
116 Configuring environment variables with env
117 Preparing the back end for deployment
118 Dumping our database for the live server
119 Copying files to the server for deployment
120 Populating the database on the live server
121 Starting our back end with Supervisor
122 Configuring Caddy
123 Trying out our live application
124 Fixing the Genres component
LEGACY Introduction
125 Introduction
126 A bit about me
127 How to ask for help
128 Useful Resources
LEGACY Setting up our Development Environment
129 Installing nodejs and an IDE
130 Installing Postgres
131 Installing Go
LEGACY Getting started with React
132 How React Works
133 How to use the downloadable code
134 Our first React app
135 The obligatory Hello world app
136 Working with components
137 Styling components
138 Using a CSS Framework
139 More about the CSS Framework
140 Components and props
141 More about props
142 React Events
143 More events
144 Refs
145 Simplifying things with state
146 More about state lifting state to share data between components
147 Functional components
148 Cleaning things up
LEGACY Building the Front End
149 What are we going to create
150 A note about React Router 6
151 Creating our front end application and introducting the React Router
152 Routing to a component
153 Challenge Route to components
154 Solution to Challenge
155 More about routing and a bit about the React lifecycle
156 More about routing Part II
157 More about routing Part III
158 Displaying one movie
LEGACY Setting up our Go Back end as a REST API
159 Installing the necessary software
160 Setting up the Go project
161 Installing a router and creating better handlers
162 Models
163 Setting up a simple API route
164 Improved error handling
165 Creating the database
166 Creating our connection pool and connecting to the database
167 Database functions a challenge
168 Solution to challenge
169 An aside cleaning up our JSON feed
170 Getting all movies as JSON
171 Next Steps
LEGACY Connecting to our REST API
172 Setting up CORS middleware
173 Getting the list of movies
174 Checking for errors
175 Displaying one movie
176 Getting started with Movies by Genre
177 Getting Genres from back end
178 Displaying the list of Genres
179 Getting movies by Genre
180 Displaying movies by Genre
181 Showing Genre name an alternative to lifting state
182 Code clean up
LEGACY Working with forms React and Go
183 Building a form in React
184 Making our form a controlled component and binding it to state
185 Making form inputs reusable components and a Challenge
186 Solution to Challenge
187 Creating a reusable select component
188 Prepopulating the form with an existing movie
189 Sending data to the REST back end
190 Client side form validation
191 Receiving data on the REST back end
192 Providing feedback with a reusable alert
193 Editing an existing movie
194 Deleting a movie
195 Adding a confirmation step when deleting movies
196 Implementing delete on the back end
197 Connecting our delete button to the REST back end
198 Challenge displaying list of movies to edit
199 Solution to challenge
LEGACY Securing Routes in our REST API
200 Generating JSON Web Tokens on the back end
201 Changing App to a component and setting up state
202 Getting the JSON Web Token from the back end
203 Handling a successful login
204 Adding middleware to check for a valid token
205 Protecting the route on our front end
206 Adding redirects for protected components
207 Challenge
208 Solution to Challenge
209 Saving our token when the user leaves the site
210 Making better error responses from our back end
211 Adding images
LEGACY Adding GraphQL into the equation
212 What is GraphQL
213 Setting up a schema and REST endpoint for GraphQL
214 Handling the GraphQL request
215 Implementing GraphQL requests for all movies
216 Adding a search endpoint
217 Implementing GraphQL requests for search on front end
218 Displaying one movie using GraphQL
219 Updating the front end
220 Modifying the back end to handle poster images
221 Updating the front end to display the poster image
222 Cleaning things up
LEGACY Deploying our app to a server
223 Getting the React application ready for deployment
224 Building the production ready React application
225 Getting the Go project ready for deployment
226 Building the Go back end for our remote server
227 Copying files to the server
228 Setting up the production database
229 Setting up the web server
230 Running the Go back end with supervisor
LEGACY Converting our project to use functions and React Hoooks
231 About this section
232 Converting the Moviesjs component to a function with hooks
233 Coverting the Genresjs component to a function with hooks
234 Converting the OneMoviejs component to a function
235 Converting the OneGenrejs component to a function
236 Converting the EditMoviejs component to a function
237 Challenge convert Adminjs to a function
238 Solution to challenge
239 Convert Loginjs to a function
240 Convert Appjs to a function
LEGACY Where to go from here
241 React and Redux
Resolve the captcha to access the links!