Working with React and Go (Golang)

Focused View

Trevor Sawler

24:44:46

99 View

01 - Introduction

001 Welcome.mp4

06:12

002 Notice for existing students.html

003 A bit about me.mp4

01:01

004 Asking for help.mp4

01:14

005 Mistakes. We all make them.mp4

01:06

02 - Setting up our development environment

001 Installing Node.mp4

01:01

002 Installing Go.mp4

01:27

003 Installing Visual Studio Code.mp4

01:56

004 Installing Docker.mp4

00:51

03 - Getting Started with React

001 How React works.mp4

13:41

002 Hello world with React using Classes.mp4

04:59

002 source.zip

003 Hello world with React using functional components.mp4

06:42

003 source.zip

004 Styling Components.mp4

03:51

004 source.zip

005 Using Bootstrap CSS.mp4

03:08

005 source.zip

006 Using props passing data to components.mp4

04:57

006 source.zip

007 React and State I.mp4

09:19

007 source.zip

008 React and State II.mp4

06:47

008 source.zip

009 React and State III.mp4

09:23

009 source.zip

010 React and State IV.mp4

06:18

010 source.zip

011 React and State V.mp4

06:45

011 source.zip

012 Intercepting form submissions with onSubmit().mp4

03:21

012 source.zip

013 handleSubmit() continued.mp4

05:52

013 source.zip

014 Ref using references in React.mp4

03:29

014 source.zip

015 References with components forwardRef().mp4

03:20

015 source.zip

016 Class Lifecycle.mp4

13:59

016 source.zip

04 - Getting started with our main project Go Watch a Movie

001 Getting started with our project.mp4

02:48

001 source.zip

002 Setting up the application layout.mp4

11:37

002 movie-tickets.jpg.zip

002 source.zip

003 Getting started with React Router v6.mp4

03:57

003 source.zip

004 Configuring React Router.mp4

07:14

004 source.zip

005 Using React Routers Link.mp4

10:23

005 source.zip

006 Working on the Movies component.mp4

07:48

006 source.zip

007 Routing from the Movies component to individual movies.mp4

02:22

007 source.zip

008 Displaying an individual movie.mp4

05:29

008 source.zip

05 - Setting up User Login

001 Working on the Login button.mp4

05:11

001 source.zip

002 Creating the login form.mp4

12:45

002 source.zip

003 Giving the Login component access to setJWT.mp4

04:26

003 source.zip

004 Adding error messages and redirects to the Login component.mp4

09:01

004 source.zip

005 Logging out.mp4

02:34

005 source.zip

06 - Getting started with our Back End API

001 Starting the back end API.mp4

09:55

001 source-back-end.zip

002 Adding handlers and routes to our API.mp4

06:55

002 source-back-end.zip

003 Installing a routing package.mp4

04:11

003 source-back-end.zip

004 Adding a route to our handlers.mp4

02:42

004 source-back-end.zip

005 Returning JSON from our API.mp4

06:02

005 source-back-end.zip

006 Returning a list of movies as JSON.mp4

10:51

006 source-back-end.zip

007 Connecting the front end to the back end API.mp4

04:46

007 source.zip

008 Enabling CORS middleware.mp4

07:04

008 source-back-end.zip

009 Enabling Reacts proxy to the back end API.mp4

02:50

009 source.zip

07 - Connecting to Postgres

001 Setting up our database using Docker.mp4

06:12

001 db.zip

001 source-back-end.zip

002 Getting started connecting our API to Postgres.mp4

03:24

002 source-back-end.zip

003 Installing a database driver and connecting to Postgres.mp4

09:02

003 source-back-end.zip

004 Setting up a database repository I.mp4

15:59

004 source-back-end.zip

005 Setting up a database repository II.mp4

05:39

005 source-back-end.zip

006 Improving the allMovies handler to use our database.mp4

03:06

006 source-back-end.zip

external-links.txt

08 - Working with JSON

001 Setting up utils.go and a writeJSON helper function.mp4

07:10

001 source-back-end.zip

002 Adding a readJSON helper function.mp4

06:19

002 source-back-end.zip

003 Adding an errorJSON helper function.mp4

02:22

003 source-back-end.zip

004 Using our errorJSON helper function.mp4

01:31

004 source-back-end.zip

09 - Authentication with JWT

001 Installing a JWT package.mp4

08:09

001 source-back-end.zip

002 Generating tokens.mp4

13:11

002 source-back-end.zip

003 Setting default values for JWT tokens.mp4

06:09

003 source-back-end.zip

004 Creating a handler to generate a JWT.mp4

03:42

004 source-back-end.zip

005 Trying out our handler.mp4

02:13

006 Generate refresh token cookie.mp4

05:46

006 source-back-end.zip

007 Reading a JSON payload in the authenticate handler.mp4

02:07

007 source-back-end.zip

008 Looking up a user by email.mp4

07:45

008 source-back-end.zip

009 Validating a password.mp4

06:41

009 source-back-end.zip

010 Updating the Login component on the front end.mp4

08:45

010 source.zip

010 source-back-end.zip

011 Refresh tokens I.mp4

10:11

011 source-back-end.zip

012 Refresh tokens II.mp4

04:18

012 source.zip

013 Refresh tokens III.mp4

05:31

013 source.zip

013 source-back-end.zip

014 Refresh tokens IV.mp4

08:59

014 source.zip

015 Refresh tokens V.mp4

09:33

015 source.zip

016 Protecting routes using JWT tokens.mp4

13:42

016 source-back-end.zip

017 Authentication middleware.mp4

02:43

017 source-back-end.zip

018 Adding our middleware to routes.mp4

03:09

018 source-back-end.zip

019 Trying our our protected routes.mp4

09:12

019 source.zip

019 source-back-end.zip

external-links.txt

10 - CreateReadUpdateDelete for our Movie Catalogue

001 Starting on the AddEdit movie component.mp4

04:12

001 source.zip

002 Creating a select component.mp4

05:30

002 source.zip

003 Creating a checkbox component.mp4

03:03

003 source.zip

004 Using our input controls to create the edit movie form.mp4

13:51

004 source.zip

005 Continuing to work on the EditMovie component.mp4

09:00

005 source.zip

006 Getting a movie and Genres from the database.mp4

19:33

006 source-back-end.zip

007 Creating handlers to get movies for public and admin.mp4

08:36

007 source-back-end.zip

008 Displaying a movie to the public on the front end.mp4

08:51

008 source.zip

009 Getting started with showing genres on the AddEdit movie component.mp4

07:29

009 source-back-end.zip

010 Adding checkboxes for genres to the front end form.mp4

18:31

010 source.zip

011 Enabling checkbox clicks on the EditMovie component.mp4

04:58

011 source.zip

012 Validation I.mp4

05:47

012 source.zip

013 Validation II.mp4

06:17

013 source.zip

014 Creating a database method to insert a movie.mp4

04:17

014 source-back-end.zip

015 Creating a handler to insert a movie.mp4

03:03

015 source-back-end.zip

016 Getting a movie image from a remote API I.mp4

12:34

016 source-back-end.zip

017 Getting a movie image from a remote API II.mp4

02:35

017 source-back-end.zip

018 Handling genres when inserting a movie.mp4

05:51

018 source-back-end.zip

019 Inserting a movie from the front end.mp4

07:37

019 source.zip

020 Trying out adding a movie.mp4

02:35

020 source-back-end.zip

021 Editing an existing movie I.mp4

10:01

021 source.zip

022 Editing an existing movie II.mp4

01:51

022 source.zip

023 Editing an existing movie III.mp4

03:18

023 source-back-end.zip

024 Writing the handler to update a movie.mp4

05:25

024 source-back-end.zip

025 Trying out editing a movie from the front end.mp4

03:31

025 source.zip

025 source-back-end.zip

026 Getting started with deleting a movie.mp4

06:19

026 source.zip

027 Deleting a movie II.mp4

02:01

027 source-back-end.zip

028 Deleting a movie III.mp4

02:36

028 source-back-end.zip

029 Deleting a movie IV.mp4

01:43

external-links.txt

11 - Displaying movies by Genre

001 Getting started with listing movies by Genre.mp4

04:24

001 source-back-end.zip

002 Creating a handler to list movies by Genre.mp4

03:14

002 source-back-end.zip

003 Modifying the front end to list movies by Genre.mp4

08:40

003 source.zip

004 Creating the OneGenre component.mp4

10:49

004 source.zip

12 - GraphQL

001 Getting started with GraphQL.mp4

09:28

001 source-back-end.zip

002 GraphQL II.mp4

11:42

002 source-back-end.zip

003 GraphQL III.mp4

04:35

003 source-back-end.zip

004 Creating a handler for GraphQL.mp4

05:37

004 source-back-end.zip

005 Connecting to our GraphQL endpoint from the front end.mp4

15:58

005 source.zip

005 source-back-end.zip

006 Adding search functionality.mp4

07:13

006 source.zip

13 - Deploying our application

001 Configuring environment variables with .env.mp4

07:10

001 source.zip

002 Preparing the back end for deployment.mp4

03:35

002 source-back-end.zip

003 Dumping our database for the live server.mp4

02:15

004 Copying files to the server for deployment.mp4

05:45

005 Populating the database on the live server.mp4

06:27

006 Starting our back end with Supervisor.mp4

07:43

007 Caddyfile.zip

007 Configuring Caddy.mp4

07:45

008 Trying out our live application.mp4

02:26

009 Fixing the Genres component.mp4

03:22

external-links.txt

14 - LEGACY Introduction

001 Introduction.mp4

04:02

002 A bit about me.mp4

00:52

003 How to ask for help.mp4

01:44

004 Useful Resources.html

15 - LEGACY Setting up our Development Environment

001 Installing node.js and an IDE.mp4

01:29

002 Installing Postgres.mp4

02:52

003 Installing Go.mp4

00:50

external-links.txt

16 - LEGACY Getting started with React

001 How React Works.mp4

03:35

002 How to use the downloadable code.mp4

01:08

003 Our first React app.mp4

02:33

004 The obligatory Hello, world app.mp4

10:52

005 Working with components.mp4

07:09

005 source-code.zip

006 Styling components.mp4

05:02

006 source-code-styling-components.zip

007 Using a CSS Framework.mp4

04:37

008 More about the CSS Framework.mp4

03:17

008 source-code-more-css.zip

009 Components and props.mp4

04:15

009 source-code-props.zip

010 More about props.mp4

02:39

011 React Events.mp4

06:31

011 source-code-events.zip

012 More events.mp4

04:30

012 source-code-more-events.zip

013 Refs.mp4

05:18

013 source-code.zip

014 Simplifying things with state.mp4

08:24

014 source-code-simplifying-things-with-state.zip

015 More about state lifting state to share data between components.mp4

09:38

015 source-code-more-about-state.zip

016 Functional components.mp4

06:07

016 source.zip

017 Cleaning things up.mp4

02:08

017 source-code-cleanup.zip

external-links.txt

17 - LEGACY Building the Front End

001 What are we going to create.mp4

02:23

002 A note about React Router 6.html

003 Creating our front end application and introducting the React Router.mp4

15:13

003 source-code-intro.zip

004 Routing to a component.mp4

02:24

004 source-code-routing-to-component.zip

005 Challenge Route to components.mp4

01:13

006 Solution to Challenge.mp4

02:52

006 source-code-solution.zip

007 More about routing (and a bit about the React lifecycle).mp4

07:40

007 source-code-nested-links-1.zip

008 More about routing Part II.mp4

05:14

008 source-code-nested-routing-2.zip

009 More about routing Part III.mp4

10:56

009 source-code-nested-routing-3.zip

010 Displaying one movie.mp4

06:28

010 source-code-nested-routing-4.zip

external-links.txt

18 - LEGACY Setting up our Go Back end as a REST API

001 Installing the necessary software.mp4

02:06

002 Setting up the Go project.mp4

12:16

002 source-code-setting-up-app.zip

003 Installing a router and creating better handlers.mp4

14:13

003 source-code-installing-router.zip

004 Models.mp4

05:18

004 source-code-models.zip

005 Setting up a simple API route.mp4

11:43

005 source-code-one-route.zip

006 Improved error handling.mp4

03:31

006 source-code-improved-error-handling.zip

007 Creating the database.mp4

01:40

007 go-movies.zip

008 Creating our connection pool and connecting to the database.mp4

08:00

008 source-code-connecting-to-db.zip

009 Database functions And a challenge.mp4

12:12

009 source-code-database-functions.zip

010 Solution to challenge.mp4

08:49

010 source-code-solution-db-functions.zip

011 An aside cleaning up our JSON feed.mp4

02:32

011 source-code-db-functions-2.zip

012 Getting all movies as JSON.mp4

09:26

012 source-code-get-all-movies.zip

013 Next Steps.mp4

01:59

013 source-code-next-steps.zip

external-links.txt

19 - LEGACY Connecting to our REST API

001 Setting up CORS middleware.mp4

03:46

001 source-code-cors.zip

002 Getting the list of movies.mp4

05:04

002 source-code-list-all-movies-react.zip

003 Checking for errors.mp4

05:54

003 source-code-error-checking.zip

004 Displaying one movie.mp4

08:10

004 source-code-display-one-movie-front-end.zip

005 Getting started with Movies by Genre.mp4

07:39

005 source-code-genres-part-1.zip

006 Getting Genres from back end.mp4

05:51

006 source-code-genres-part-2.zip

007 Displaying the list of Genres.mp4

03:18

007 source-backend-app.zip

007 source-front-end.zip

008 Getting movies by Genre.mp4

06:10

008 source-code-back-end-movies-by-genre.zip

009 Displaying movies by Genre.mp4

06:23

009 source-code-displaying-movies-by-genre-front-end.zip

010 Showing Genre name - an alternative to lifting state.mp4

03:49

010 source-code-show-genre-name.zip

011 Code clean up.mp4

02:56

011 source-code-clean-up.zip

20 - LEGACY Working with forms, React, and Go

001 Building a form in React.mp4

11:58

001 source-form.zip

002 Making our form a controlled component, and binding it to state.mp4

10:56

002 source-form-2.zip

003 Making form inputs reusable components and a Challenge.mp4

07:32

003 source-forms-3.zip

004 Solution to Challenge.mp4

01:08

004 source-form-4.zip

005 Creating a reusable select component.mp4

07:23

005 source-reusable-select.zip

006 Prepopulating the form with an existing movie.mp4

08:08

006 source-populating-form.zip

007 Sending data to the REST back end.mp4

07:48

007 source-back-end.zip

007 source-front-end.zip

008 Client side form validation.mp4

07:05

008 source.zip

009 Receiving data on the REST back end.mp4

16:48

009 source-back-end.zip

010 Providing feedback with a reusable alert.mp4

09:09

010 source-back-end.zip

010 source-front-end.zip

011 Editing an existing movie.mp4

06:11

011 source-back-end.zip

012 Deleting a movie.mp4

05:01

012 source-front-end.zip

013 Adding a confirmation step when deleting movies.mp4

06:00

013 source-front-end.zip

014 Implementing delete on the back end.mp4

03:30

014 source-back-end.zip

015 Connecting our delete button to the REST back end.mp4

06:10

015 source-front-end.zip

016 Challenge displaying list of movies to edit.mp4

02:28

017 Solution to challenge.mp4

01:11

017 source-front-end.zip

external-links.txt

21 - LEGACY Securing Routes in our REST API

001 Generating JSON Web Tokens on the back end.mp4

15:33

001 source-back-end.zip

002 Changing App to a component, and setting up state.mp4

19:24

002 source-front.zip

003 Getting the JSON Web Token from the back end.mp4

06:14

003 source-front.zip

004 Handling a successful login.mp4

04:00

005 Adding middleware to check for a valid token.mp4

18:13

005 source-back-end.zip

006 Protecting the route on our front end.mp4

07:29

007 Adding redirects for protected components.mp4

02:58

007 source-front.zip

008 Challenge.mp4

01:38

009 Solution to Challenge.mp4

02:26

009 source-back-end.zip

009 source-front.zip

010 Saving our token when the user leaves the site.mp4

06:27

010 source-front.zip

011 Making better error responses from our back end.mp4

04:36

011 source-back-end.zip

012 Adding images.mp4

05:06

012 movie-tickets.zip

012 source-front.zip

external-links.txt

22 - LEGACY Adding GraphQL into the equation

001 What is GraphQL.mp4

01:32

002 Setting up a schema and REST endpoint for GraphQL.mp4

15:32

002 source-back-end.zip

003 Handling the GraphQL request.mp4

05:57

003 source-back-end.zip

004 Implementing GraphQL requests for all movies.mp4

11:37

004 source-front.zip

005 Adding a search endpoint.mp4

05:32

005 source-back-end.zip

006 Implementing GraphQL requests for search on front end.mp4

08:57

006 source-front.zip

007 Displaying one movie using GraphQL.mp4

02:56

008 Updating the front end.mp4

06:55

008 source-front.zip

009 Modifying the back end to handle poster images.mp4

12:52

009 source-back-end.zip

010 Updating the front end to display the poster image.mp4

04:55

010 source-back-end.zip

010 source-front.zip

011 Cleaning things up.mp4

02:52

011 source-back-end.zip

011 source-front.zip

external-links.txt

23 - LEGACY Deploying our app to a server

001 Getting the React application ready for deployment.mp4

04:04

001 source-front.zip

002 Building the production ready React application.mp4

02:44

003 Getting the Go project ready for deployment.mp4

03:03

003 source-back-end.zip

004 Building the Go back end for our remote server.mp4

01:29

005 Copying files to the server.mp4

02:20

006 Setting up the production database.mp4

03:34

007 Setting up the web server.mp4

10:02

007 caddyfile.zip

008 Running the Go back end with supervisor.mp4

04:52

external-links.txt

24 - LEGACY Converting our project to use functions and React Hoooks

001 About this section.mp4

08:58

001 hook-test-source-code.zip

002 Converting the Movies.js component to a function with hooks.mp4

10:27

002 front-end.zip

003 Coverting the Genres.js component to a function with hooks.mp4

04:46

003 front-end.zip

004 Converting the OneMovie.js component to a function.mp4

05:24

004 front-end.zip

005 Converting the OneGenre.js component to a function.mp4

07:14

005 front-end.zip

006 Converting the EditMovie.js component to a function.mp4

20:15

006 front-end.zip

007 Challenge convert Admin.js to a function.mp4

01:44

008 Solution to challenge.mp4

02:16

008 front-end.zip

009 Convert Login.js to a function.mp4

10:06

009 front-end.zip

010 Convert App.js to a function.mp4

07:41

010 front-end.zip

25 - LEGACY Where to go from here

001 React and Redux.mp4

01:57

external-links.txt

Description

Learn how to build a single page application in React, with data supplied by a Go back end REST API

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

Who is this for?

Developers who are somewhat familiar with Go & JavaScript

What You Need to Know?

A basic knowledge of the Go programming language

A basic knowledge of Javascript

A basic knowledge of HTML

More details

Description
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.
Who this course is for:
Developers who are somewhat familiar with Go & JavaScript

User Reviews

Rating

average 0

Total votes0

Focused display

I have twenty years of experience in professional software development, and twenty years of experience as a University professor. As an entrepreneur, I have worked with a broad range of clients, including Thomson Nelson, Hewlett Packard, the Royal Bank of Canada, Keybank, Sprint, and many, many others. I also have extensive management and project management experience. I have led teams of fifty developers and artists on multi-million dollar projects, and much smaller teams on much smaller projects.As a professor, I have taught in a wide variety of course areas, including Computer Science, English, Irish, and American literature, and a number of "crossover" courses that bridge the liberal arts and technological fields.I have won regional, national, and international awards for my work in the IT field, and have also won awards for my teaching and research as a University professor.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.