Working with React and Go (Golang)

Name: Working with React and Go (Golang)
Price: 12.75 USD
Availability: InStock

24h 48m 43s

English

Paid

April 18, 2024

React and Go work well together. React handles the front end. Go handles the back end. In this course, you learn how to build and deploy a fast web app with a React UI and a Go API.

Why Use React

React is an open-source JavaScript library for building user interfaces. It helps you make fast and interactive apps. Many companies use it, including Netflix and Instagram. You use React to build single-page apps and mobile apps.

Why Use Go

Go is a fast and type-safe programming language. It works well for building REST APIs. Many large companies use Go for secure and scalable apps. You will use Go in this course to build the back end for your React app.

React and Go Together

You may notice that many companies use both React and Go. They pair well because React handles UI work, while Go handles API and server work. You will see how they fit together as you move through the lessons.

What You Will Learn

You start with the core parts of React. You learn about components, props, state, and the React life cycle. You also learn how to call remote APIs, both the API you build and a third-party API.

Class Components and Hooks

You first build an app using class components. After that, you rebuild the same app using functions and hooks. Many older projects still use classes, so it helps to know both styles.

Working With the Go Back End

You learn how to receive and return data with Go. You handle JSON and GraphQL requests. You send JSON responses back to the front end.

Adding Auth With JWT

You also learn how to protect parts of your site. You create and use JSON Web Tokens (JWT) to handle user authentication.

Who This Course Is For

This course is not for absolute beginners. You should know some JavaScript and Go. You should also feel comfortable with HTML.

About the Author: Udemy

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 238 lessons

0:00

#1: Welcome

All Course Lessons (238)

#	Lesson Title	Duration
1	Welcome Demo	06:13
2	A bit about me	01:02
3	Asking for help	01:15
4	Mistakes: we all make them.	01:07
5	Installing Node	01:02
6	Installing Go	01:28
7	Installing Visual Studio Code	01:57
8	Installing Docker	00:52
9	How React works	13:42
10	Hello world with React using Classes	05:00
11	Hello world with React using functional components	06:43
12	Styling Components	03:52
13	Using Bootstrap CSS	03:09
14	Using props: passing data to components	04:58
15	React and State I	09:20
16	React and State II	06:48
17	React and State III	09:24
18	React and State IV	06:19
19	React and State V	06:46
20	Intercepting form submissions with onSubmit()	03:22
21	handleSubmit() continued	05:53
22	Ref: using references in React	03:30
23	References with components: forwardRef()	03:21
24	Class Lifecycle	14:00
25	Getting started with our project	02:49
26	Setting up the application layout	11:38
27	Getting started with React Router v6	03:58
28	Configuring React Router	07:15
29	Using React Router's Link	10:24
30	Working on the Movies component	07:49
31	Routing from the Movies component to individual movies	02:23
32	Displaying an individual movie	05:30
33	Working on the Login button	05:12
34	Creating the login form	12:46
35	Giving the Login component access to setJWT	04:27
36	Adding error messages and redirects to the Login component	09:02
37	Logging out	02:35
38	Starting the back end API	09:56
39	Adding handlers and routes to our API	06:56
40	Installing a routing package	04:12
41	Adding a route to our handlers	02:43
42	Returning JSON from our API	06:03
43	Returning a list of movies as JSON	10:52
44	Connecting the front end to the back end API	04:47
45	Enabling CORS middleware	07:05
46	Enabling React's proxy to the back end API	02:51
47	Setting up our database using Docker	06:13
48	Getting started connecting our API to Postgres	03:25
49	Installing a database driver and connecting to Postgres	09:03
50	Setting up a database repository I	16:00
51	Setting up a database repository II	05:40
52	Improving the allMovies handler to use our database	03:07
53	Setting up utils.go and a writeJSON helper function	07:11
54	Adding a readJSON helper function	06:20
55	Adding an errorJSON helper function	02:23
56	Using our errorJSON helper function	01:32
57	Installing a JWT package	08:10
58	Generating tokens	13:12
59	Setting default values for JWT tokens	06:10
60	Creating a handler to generate a JWT	03:43
61	Trying out our handler	02:14
62	Generate refresh token cookie	05:47
63	Reading a JSON payload in the authenticate handler	02:08
64	Looking up a user by email	07:46
65	Validating a password	06:42
66	Updating the Login component on the front end	08:46
67	Refresh tokens I	10:12
68	Refresh tokens II	04:19
69	Refresh tokens III	05:32
70	Refresh tokens IV	09:00
71	Refresh tokens V	09:34
72	Protecting routes using JWT tokens	13:43
73	Authentication middleware	02:44
74	Adding our middleware to routes	03:10
75	Trying our our protected routes	09:13
76	Starting on the Add/Edit movie component	04:13
77	Creating a select component	05:31
78	Creating a checkbox component	03:04
79	Using our input controls to create the edit movie form	13:52
80	Continuing to work on the EditMovie component	09:01
81	Getting a movie and Genres from the database	19:34
82	Creating handlers to get movies for public and admin	08:37
83	Displaying a movie to the public on the front end	08:52
84	Getting started with showing genres on the Add/Edit movie component	07:30
85	Adding checkboxes for genres to the front end form	18:32
86	Enabling checkbox clicks on the EditMovie component	04:59
87	Validation I	05:48
88	Validation II	06:17
89	Creating a database method to insert a movie	04:18
90	Creating a handler to insert a movie	03:04
91	Getting a movie image from a remote API I	12:35
92	Getting a movie image from a remote API II	02:36
93	Handling genres when inserting a movie	05:52
94	Inserting a movie from the front end	07:38
95	Trying out adding a movie	02:36
96	Editing an existing movie I	10:02
97	Editing an existing movie II	01:52
98	Editing an existing movie III	03:19
99	Writing the handler to update a movie	05:26
100	Trying out editing a movie from the front end	03:32
101	Getting started with deleting a movie	06:20
102	Deleting a movie II	02:02
103	Deleting a movie III	02:37
104	Deleting a movie IV	01:44
105	Getting started with listing movies by Genre	04:25
106	Creating a handler to list movies by Genre	03:15
107	Modifying the front end to list movies by Genre	08:41
108	Creating the OneGenre component	10:50
109	Getting started with GraphQL	09:29
110	GraphQL II	11:43
111	GraphQL III	04:36
112	Creating a handler for GraphQL	05:38
113	Connecting to our GraphQL endpoint from the front end	15:59
114	Adding search functionality	07:14
115	Configuring environment variables with .env	07:11
116	Preparing the back end for deployment	03:36
117	Dumping our database for the live server	02:16
118	Copying files to the server for deployment	05:46
119	Populating the database on the live server	06:28
120	Starting our back end with Supervisor	07:44
121	Configuring Caddy	07:46
122	Trying out our live application	02:27
123	Fixing the Genres component	03:23
124	Introduction	04:03
125	A bit about me	00:53
126	How to ask for help	01:45
127	Installing node.js and an IDE	01:30
128	Installing Postgres	02:53
129	Installing Go	00:51
130	How React Works	03:36
131	How to use the downloadable code	01:09
132	Our first React app	02:34
133	The obligatory "Hello, world" app	10:53
134	Working with components	07:10
135	Styling components	05:03
136	Using a CSS Framework	04:38
137	More about the CSS Framework	03:18
138	Components and props	04:16
139	More about props	02:40
140	React Events	06:32
141	More events	04:31
142	Refs	05:19
143	Simplifying things with state	08:25
144	More about state: lifting state to share data between components	09:39
145	Functional components	06:08
146	Cleaning things up	02:09
147	What are we going to create?	02:24
148	Creating our front end application and introducting the React Router	15:14
149	Routing to a component	02:25
150	Challenge: Route to components	01:14
151	Solution to Challenge	02:53
152	More about routing (and a bit about the React lifecycle)	07:41
153	More about routing Part II	05:15
154	More about routing Part III	10:57
155	Displaying one movie	06:29
156	Installing the necessary software	02:07
157	Setting up the Go project	12:17
158	Installing a router and creating better handlers	14:14
159	Models	05:19
160	Setting up a simple API route	11:44
161	Improved error handling	03:32
162	Creating the database	01:41
163	Creating our connection pool and connecting to the database	08:01
164	Database functions & a challenge	12:13
165	Solution to challenge	08:50
166	An aside: cleaning up our JSON feed	02:33
167	Getting all movies as JSON	09:27
168	Next Steps	02:00
169	Setting up CORS middleware	03:47
170	Getting the list of movies	05:05
171	Checking for errors	05:55
172	Displaying one movie	08:11
173	Getting started with Movies by Genre	07:40
174	Getting Genres from back end	05:52
175	Displaying the list of Genres	03:19
176	Getting movies by Genre	06:11
177	Displaying movies by Genre	06:24
178	Showing Genre name - an alternative to lifting state	03:50
179	Code clean up	02:57
180	Building a form in React	11:59
181	Making our form a controlled component, and binding it to state	10:57
182	Making form inputs reusable components and a Challenge	07:33
183	Solution to Challenge	01:09
184	Creating a reusable select component	07:24
185	Prepopulating the form with an existing movie	08:09
186	Sending data to the REST back end	07:49
187	Client side form validation	07:06
188	Receiving data on the REST back end	16:49
189	Providing feedback with a reusable alert	09:10
190	Editing an existing movie	06:12
191	Deleting a movie	05:02
192	Adding a confirmation step when deleting movies	06:01
193	Implementing delete on the back end	03:31
194	Connecting our delete button to the REST back end	06:11
195	Challenge: displaying list of movies to edit	02:29
196	Solution to challenge	01:12
197	Generating JSON Web Tokens on the back end	15:34
198	Changing App to a component, and setting up state	19:25
199	Getting the JSON Web Token from the back end	06:15
200	Handling a successful login	04:01
201	Adding middleware to check for a valid token	18:14
202	Protecting the route on our front end	07:30
203	Adding redirects for protected components	02:59
204	Challenge	01:39
205	Solution to Challenge	02:27
206	Saving our token when the user leaves the site	06:28
207	Making better error responses from our back end	04:37
208	Adding images	05:07
209	What is GraphQL?	01:33
210	Setting up a schema and REST endpoint for GraphQL	15:33
211	Handling the GraphQL request	05:58
212	Implementing GraphQL requests for all movies	11:38
213	Adding a search endpoint	05:33
214	Implementing GraphQL requests for search on front end	08:58
215	Displaying one movie using GraphQL	02:57
216	Updating the front end	06:56
217	Modifying the back end to handle poster images	12:53
218	Updating the front end to display the poster image	04:56
219	Cleaning things up	02:53
220	Getting the React application ready for deployment	04:05
221	Building the production ready React application	02:45
222	Getting the Go project ready for deployment	03:04
223	Building the Go back end for our remote server	01:30
224	Copying files to the server	02:21
225	Setting up the production database	03:35
226	Setting up the web server	10:03
227	Running the Go back end with supervisor	04:53
228	About this section	08:59
229	Converting the Movies.js component to a function with hooks	10:28
230	Coverting the Genres.js component to a function with hooks	04:47
231	Converting the OneMovie.js component to a function	05:25
232	Converting the OneGenre.js component to a function	07:15
233	Converting the EditMovie.js component to a function	20:16
234	Challenge: convert Admin.js to a function	01:45
235	Solution to challenge	02:17
236	Convert Login.js to a function	10:07
237	Convert App.js to a function	07:42
238	React and Redux	01:58

Unlock unlimited learning

Get instant access to all 237 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

238 lessons · 24h 48m 43s

Show all 238 lessons

1 Welcome 06:13
2 A bit about me 01:02
3 Asking for help 01:15
4 Mistakes: we all make them. 01:07
5 Installing Node 01:02
6 Installing Go 01:28
7 Installing Visual Studio Code 01:57
8 Installing Docker 00:52
9 How React works 13:42
10 Hello world with React using Classes 05:00
11 Hello world with React using functional components 06:43
12 Styling Components 03:52
13 Using Bootstrap CSS 03:09
14 Using props: passing data to components 04:58
15 React and State I 09:20
16 React and State II 06:48
17 React and State III 09:24
18 React and State IV 06:19
19 React and State V 06:46
20 Intercepting form submissions with onSubmit() 03:22
21 handleSubmit() continued 05:53
22 Ref: using references in React 03:30
23 References with components: forwardRef() 03:21
24 Class Lifecycle 14:00
25 Getting started with our project 02:49
26 Setting up the application layout 11:38
27 Getting started with React Router v6 03:58
28 Configuring React Router 07:15
29 Using React Router's Link 10:24
30 Working on the Movies component 07:49
31 Routing from the Movies component to individual movies 02:23
32 Displaying an individual movie 05:30
33 Working on the Login button 05:12
34 Creating the login form 12:46
35 Giving the Login component access to setJWT 04:27
36 Adding error messages and redirects to the Login component 09:02
37 Logging out 02:35
38 Starting the back end API 09:56
39 Adding handlers and routes to our API 06:56
40 Installing a routing package 04:12
41 Adding a route to our handlers 02:43
42 Returning JSON from our API 06:03
43 Returning a list of movies as JSON 10:52
44 Connecting the front end to the back end API 04:47
45 Enabling CORS middleware 07:05
46 Enabling React's proxy to the back end API 02:51
47 Setting up our database using Docker 06:13
48 Getting started connecting our API to Postgres 03:25
49 Installing a database driver and connecting to Postgres 09:03
50 Setting up a database repository I 16:00
51 Setting up a database repository II 05:40
52 Improving the allMovies handler to use our database 03:07
53 Setting up utils.go and a writeJSON helper function 07:11
54 Adding a readJSON helper function 06:20
55 Adding an errorJSON helper function 02:23
56 Using our errorJSON helper function 01:32
57 Installing a JWT package 08:10
58 Generating tokens 13:12
59 Setting default values for JWT tokens 06:10
60 Creating a handler to generate a JWT 03:43
61 Trying out our handler 02:14
62 Generate refresh token cookie 05:47
63 Reading a JSON payload in the authenticate handler 02:08
64 Looking up a user by email 07:46
65 Validating a password 06:42
66 Updating the Login component on the front end 08:46
67 Refresh tokens I 10:12
68 Refresh tokens II 04:19
69 Refresh tokens III 05:32
70 Refresh tokens IV 09:00
71 Refresh tokens V 09:34
72 Protecting routes using JWT tokens 13:43
73 Authentication middleware 02:44
74 Adding our middleware to routes 03:10
75 Trying our our protected routes 09:13
76 Starting on the Add/Edit movie component 04:13
77 Creating a select component 05:31
78 Creating a checkbox component 03:04
79 Using our input controls to create the edit movie form 13:52
80 Continuing to work on the EditMovie component 09:01
81 Getting a movie and Genres from the database 19:34
82 Creating handlers to get movies for public and admin 08:37
83 Displaying a movie to the public on the front end 08:52
84 Getting started with showing genres on the Add/Edit movie component 07:30
85 Adding checkboxes for genres to the front end form 18:32
86 Enabling checkbox clicks on the EditMovie component 04:59
87 Validation I 05:48
88 Validation II 06:17
89 Creating a database method to insert a movie 04:18
90 Creating a handler to insert a movie 03:04
91 Getting a movie image from a remote API I 12:35
92 Getting a movie image from a remote API II 02:36
93 Handling genres when inserting a movie 05:52
94 Inserting a movie from the front end 07:38
95 Trying out adding a movie 02:36
96 Editing an existing movie I 10:02
97 Editing an existing movie II 01:52
98 Editing an existing movie III 03:19
99 Writing the handler to update a movie 05:26
100 Trying out editing a movie from the front end 03:32
101 Getting started with deleting a movie 06:20
102 Deleting a movie II 02:02
103 Deleting a movie III 02:37
104 Deleting a movie IV 01:44
105 Getting started with listing movies by Genre 04:25
106 Creating a handler to list movies by Genre 03:15
107 Modifying the front end to list movies by Genre 08:41
108 Creating the OneGenre component 10:50
109 Getting started with GraphQL 09:29
110 GraphQL II 11:43
111 GraphQL III 04:36
112 Creating a handler for GraphQL 05:38
113 Connecting to our GraphQL endpoint from the front end 15:59
114 Adding search functionality 07:14
115 Configuring environment variables with .env 07:11
116 Preparing the back end for deployment 03:36
117 Dumping our database for the live server 02:16
118 Copying files to the server for deployment 05:46
119 Populating the database on the live server 06:28
120 Starting our back end with Supervisor 07:44
121 Configuring Caddy 07:46
122 Trying out our live application 02:27
123 Fixing the Genres component 03:23
124 Introduction 04:03
125 A bit about me 00:53
126 How to ask for help 01:45
127 Installing node.js and an IDE 01:30
128 Installing Postgres 02:53
129 Installing Go 00:51
130 How React Works 03:36
131 How to use the downloadable code 01:09
132 Our first React app 02:34
133 The obligatory "Hello, world" app 10:53
134 Working with components 07:10
135 Styling components 05:03
136 Using a CSS Framework 04:38
137 More about the CSS Framework 03:18
138 Components and props 04:16
139 More about props 02:40
140 React Events 06:32
141 More events 04:31
142 Refs 05:19
143 Simplifying things with state 08:25
144 More about state: lifting state to share data between components 09:39
145 Functional components 06:08
146 Cleaning things up 02:09
147 What are we going to create? 02:24
148 Creating our front end application and introducting the React Router 15:14
149 Routing to a component 02:25
150 Challenge: Route to components 01:14
151 Solution to Challenge 02:53
152 More about routing (and a bit about the React lifecycle) 07:41
153 More about routing Part II 05:15
154 More about routing Part III 10:57
155 Displaying one movie 06:29
156 Installing the necessary software 02:07
157 Setting up the Go project 12:17
158 Installing a router and creating better handlers 14:14
159 Models 05:19
160 Setting up a simple API route 11:44
161 Improved error handling 03:32
162 Creating the database 01:41
163 Creating our connection pool and connecting to the database 08:01
164 Database functions & a challenge 12:13
165 Solution to challenge 08:50
166 An aside: cleaning up our JSON feed 02:33
167 Getting all movies as JSON 09:27
168 Next Steps 02:00
169 Setting up CORS middleware 03:47
170 Getting the list of movies 05:05
171 Checking for errors 05:55
172 Displaying one movie 08:11
173 Getting started with Movies by Genre 07:40
174 Getting Genres from back end 05:52
175 Displaying the list of Genres 03:19
176 Getting movies by Genre 06:11
177 Displaying movies by Genre 06:24
178 Showing Genre name - an alternative to lifting state 03:50
179 Code clean up 02:57
180 Building a form in React 11:59
181 Making our form a controlled component, and binding it to state 10:57
182 Making form inputs reusable components and a Challenge 07:33
183 Solution to Challenge 01:09
184 Creating a reusable select component 07:24
185 Prepopulating the form with an existing movie 08:09
186 Sending data to the REST back end 07:49
187 Client side form validation 07:06
188 Receiving data on the REST back end 16:49
189 Providing feedback with a reusable alert 09:10
190 Editing an existing movie 06:12
191 Deleting a movie 05:02
192 Adding a confirmation step when deleting movies 06:01
193 Implementing delete on the back end 03:31
194 Connecting our delete button to the REST back end 06:11
195 Challenge: displaying list of movies to edit 02:29
196 Solution to challenge 01:12
197 Generating JSON Web Tokens on the back end 15:34
198 Changing App to a component, and setting up state 19:25
199 Getting the JSON Web Token from the back end 06:15
200 Handling a successful login 04:01
201 Adding middleware to check for a valid token 18:14
202 Protecting the route on our front end 07:30
203 Adding redirects for protected components 02:59
204 Challenge 01:39
205 Solution to Challenge 02:27
206 Saving our token when the user leaves the site 06:28
207 Making better error responses from our back end 04:37
208 Adding images 05:07
209 What is GraphQL? 01:33
210 Setting up a schema and REST endpoint for GraphQL 15:33
211 Handling the GraphQL request 05:58
212 Implementing GraphQL requests for all movies 11:38
213 Adding a search endpoint 05:33
214 Implementing GraphQL requests for search on front end 08:58
215 Displaying one movie using GraphQL 02:57
216 Updating the front end 06:56
217 Modifying the back end to handle poster images 12:53
218 Updating the front end to display the poster image 04:56
219 Cleaning things up 02:53
220 Getting the React application ready for deployment 04:05
221 Building the production ready React application 02:45
222 Getting the Go project ready for deployment 03:04
223 Building the Go back end for our remote server 01:30
224 Copying files to the server 02:21
225 Setting up the production database 03:35
226 Setting up the web server 10:03
227 Running the Go back end with supervisor 04:53
228 About this section 08:59
229 Converting the Movies.js component to a function with hooks 10:28
230 Coverting the Genres.js component to a function with hooks 04:47
231 Converting the OneMovie.js component to a function 05:25
232 Converting the OneGenre.js component to a function 07:15
233 Converting the EditMovie.js component to a function 20:16
234 Challenge: convert Admin.js to a function 01:45
235 Solution to challenge 02:17
236 Convert Login.js to a function 10:07
237 Convert App.js to a function 07:42
238 React and Redux 01:58

Related courses

Updated 1y ago
Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
By: Ryan Fitzgerald
You learn to build Chrome extensions with React and Node.js. The text covers setup, UI, API work, tests, and publish steps.
10 hours 3 minutes 45 seconds 5 / 5
Updated 3mo ago
Golang for Beginners
By: Zero To Mastery
Learn Golang from scratch. Dive into the world of scalable and high-performance software. Prepare your skills for real-world projects and interviews.
2 hours 28 minutes 28 seconds
Updated 2y ago
MERN React Node Next.js Multi User SEO Blogging Platform
By: Udemy
Master the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b
20 hours 25 minutes 13 seconds

Frequently asked questions

What is Working with React and Go (Golang) about?

React and Go work well together. React handles the front end. Go handles the back end. In this course, you learn how to build and deploy a fast web app with a React UI and a Go API. Why Use React React is an open-source JavaScript library…

Who teaches Working with React and Go (Golang)?

Working with React and Go (Golang) is taught by Udemy. You can find more courses by this instructor on the corresponding source page.

How long is Working with React and Go (Golang)?

Working with React and Go (Golang) contains 238 lessons with a total runtime of 24 hours 48 minutes. All lessons are available to watch online at your own pace.

Is Working with React and Go (Golang) free to watch?

Working with React and Go (Golang) is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.

Where can I watch Working with React and Go (Golang) online?

Working with React and Go (Golang) is available to watch online on CourseFlix at https://courseflix.net/course/working-with-react-and-go-golang. The page hosts every lesson with the integrated video player; no download is required.