Working with React and Go (Golang)

24:48:43 Inglés Premium 18/04/2024 238 videos

Descripción del curso

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. 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, 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 an application using React class components, and then, once that is complete, we'll rebuild the entire application using functions and 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. We will also 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). 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.

Curriculum

Section 1: Module 1

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

About the Instructor

udemy

$0.00

$8.00

Que esta incluido?

Streaming Multiplataforma
Acceso de por vida
Soporte al cliente
Actualizaciones gratuitas