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 a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

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