- 695
- 6 074 525
Anson the Developer
United States
Registrace 14. 11. 2011
Software Engineer
This channel is used to upload programming related videos ranging from beginner to intermediate tutorials, as well as live-coding/1st-time project idea attempts, varying from popular languages such as JavaScript, Python, Java, and more.
This channel is used to upload programming related videos ranging from beginner to intermediate tutorials, as well as live-coding/1st-time project idea attempts, varying from popular languages such as JavaScript, Python, Java, and more.
React JS Full Course 2024
Code Repository: github.com/stuyy/react-tutorial-2024
Support the Channel:
Become a Member: www.youtube.com/@ansonthedev/join
Become a Patreon: patreon.com/stuyy
Buy me a Coffee: ko-fi.com/anson
Donate on PayPal: paypal.me/ansonfoong
Connect with me:
Twitter: ansonthedev
Discord: discord.gg/Gd5fAEJDQD
GitHub: github.com/stuyy
Twitch: twitch.tv/stuy
0:00 Intro
2:30 Why learn React?
3:01 Prerequisites
6:56 Setup React with Vite
8:00 Install NPM Dependencies
9:10 Project File Overview
18:58 Intro to Components
27:10 Creating a Component
38:35 createElement function
45:04 Component Props
52:30 Evaluating Props
58:28 Type Checking Props
1:10:40 Children Components
1:14:28 Fragments
1:21:00 Styling with CSS & SCSS
1:37:41 Dynamic Rendering Lists/Arrays
2:05:23 Conditional Rendering
2:25:00 Handling Events
2:29:56 Input Field onChange Event
2:43:05 Form onSubmit Event
2:51:30 Registering Window Events
2:54:38 State
2:59:18 useState Hook
3:06:25 Binding State to Input Fields
3:30:00 State with Arrays
3:52:00 Updating Element in State Array
4:01:50 Delete Element from State Array
4:09:31 Add Elements to State Array
4:20:57 useEffect Hook
4:30:10 useEffect Dependency Array
4:40:00 Fetching Data Example
5:01:12 AbortController
5:04:00 useEffect Cleanup Function
5:08:30 POST Request Example
5:24:05 Creating Custom Hooks
5:43:38 React Context
5:50:41 Creating a Context
5:53:53 Using Context Provider
5:55:29 Consuming Context
6:05:43 Using State with Context
6:12:24 Updating Values in Context
6:16:17 Custom Data Fetching Hook
6:41:16 Intro to React Router
6:43:20 createBrowserRouter
6:45:40 Setting up Routes
6:50:40 Nested/Child Routes
6:52:48 Outlet
6:56:00 Link Component
6:59:37 useNavigate Hook
7:03:08 Navigating Programmatically
7:05:16 Passing State to Route
7:14:42 Intro to Unit Testing with Vitest
7:17:00 Setting up Vitest & React Testing Library
7:17:41 Configuring vite.config.js for testing
7:19:14 Create setupTests.js file
7:22:16 Writing our First Test
7:26:40 Rendering Component Under Test
7:29:48 Snapshot Testing
7:36:18 Using Screen to Query Elements
7:37:25 getByText query
7:45:00 Understanding getBy vs queryBy queries
7:53:00 findBy queries
7:55:52 findByText example
8:04:38 More examples of Testing
8:21:00 Using getByRole to query Buttons
8:26:30 Firing User Events
8:27:23 Simulating Click Event
8:34:11 Querying for Input Elements
8:38:35 getByLabelText example
8:43:56 Testing Multiple Elements of Same Instances
8:46:22 Data Test IDs
8:49:02 getByTestId example
8:53:30 using within() to search elements inside an HTML Element
9:15:51 Simulating type event
9:21:00 Other queries
9:28:24 Testing Component with Context API
9:57:40 Using Mock Service Worker to Mock API Requests
Support the Channel:
Become a Member: www.youtube.com/@ansonthedev/join
Become a Patreon: patreon.com/stuyy
Buy me a Coffee: ko-fi.com/anson
Donate on PayPal: paypal.me/ansonfoong
Connect with me:
Twitter: ansonthedev
Discord: discord.gg/Gd5fAEJDQD
GitHub: github.com/stuyy
Twitch: twitch.tv/stuy
0:00 Intro
2:30 Why learn React?
3:01 Prerequisites
6:56 Setup React with Vite
8:00 Install NPM Dependencies
9:10 Project File Overview
18:58 Intro to Components
27:10 Creating a Component
38:35 createElement function
45:04 Component Props
52:30 Evaluating Props
58:28 Type Checking Props
1:10:40 Children Components
1:14:28 Fragments
1:21:00 Styling with CSS & SCSS
1:37:41 Dynamic Rendering Lists/Arrays
2:05:23 Conditional Rendering
2:25:00 Handling Events
2:29:56 Input Field onChange Event
2:43:05 Form onSubmit Event
2:51:30 Registering Window Events
2:54:38 State
2:59:18 useState Hook
3:06:25 Binding State to Input Fields
3:30:00 State with Arrays
3:52:00 Updating Element in State Array
4:01:50 Delete Element from State Array
4:09:31 Add Elements to State Array
4:20:57 useEffect Hook
4:30:10 useEffect Dependency Array
4:40:00 Fetching Data Example
5:01:12 AbortController
5:04:00 useEffect Cleanup Function
5:08:30 POST Request Example
5:24:05 Creating Custom Hooks
5:43:38 React Context
5:50:41 Creating a Context
5:53:53 Using Context Provider
5:55:29 Consuming Context
6:05:43 Using State with Context
6:12:24 Updating Values in Context
6:16:17 Custom Data Fetching Hook
6:41:16 Intro to React Router
6:43:20 createBrowserRouter
6:45:40 Setting up Routes
6:50:40 Nested/Child Routes
6:52:48 Outlet
6:56:00 Link Component
6:59:37 useNavigate Hook
7:03:08 Navigating Programmatically
7:05:16 Passing State to Route
7:14:42 Intro to Unit Testing with Vitest
7:17:00 Setting up Vitest & React Testing Library
7:17:41 Configuring vite.config.js for testing
7:19:14 Create setupTests.js file
7:22:16 Writing our First Test
7:26:40 Rendering Component Under Test
7:29:48 Snapshot Testing
7:36:18 Using Screen to Query Elements
7:37:25 getByText query
7:45:00 Understanding getBy vs queryBy queries
7:53:00 findBy queries
7:55:52 findByText example
8:04:38 More examples of Testing
8:21:00 Using getByRole to query Buttons
8:26:30 Firing User Events
8:27:23 Simulating Click Event
8:34:11 Querying for Input Elements
8:38:35 getByLabelText example
8:43:56 Testing Multiple Elements of Same Instances
8:46:22 Data Test IDs
8:49:02 getByTestId example
8:53:30 using within() to search elements inside an HTML Element
9:15:51 Simulating type event
9:21:00 Other queries
9:28:24 Testing Component with Context API
9:57:40 Using Mock Service Worker to Mock API Requests
zhlédnutí: 64 053
Video
Express JS with TypeScript - Setup, Examples, Testing
zhlédnutí 22KPřed 4 měsíci
*DISCLAIMER* This is NOT a full in depth tutorial on Express JS. It is only designed to walk you through the setup process of installing TypeScript, getting it up and running with Express, and show you examples of type annotating arguments. I have also added other examples with Unit Testing & Integration testing with Jest and ts-jest. I highly recommend you use this as a way to learn how to set...
Express JS - Integration & E2E Testing
zhlédnutí 2,1KPřed 4 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #20 - Unit Testing with Jest
zhlédnutí 6KPřed 4 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #19 - OAuth2
zhlédnutí 4,8KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #18 - Session Stores
zhlédnutí 2,4KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #17 - Hashing Passwords
zhlédnutí 1,7KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #16 - Databases with MongoDB
zhlédnutí 3,3KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #15 - Passport.js Authentication
zhlédnutí 11KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #14 - Sessions Pt. 2
zhlédnutí 3,5KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #13 - Sessions Pt. 1
zhlédnutí 8KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #12 - Cookies
zhlédnutí 4,3KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #11 - Routers
zhlédnutí 3,5KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Express JS #10 - Validation
zhlédnutí 8KPřed 5 měsíci
Watch the full tutorial here: czcams.com/video/nH9E25nkk3I/video.html Code Repository: github.com/stuyy/expressjs-full-course Support the Channel: Become a Member: czcams.com/users/ansonthedeveloperjoin Become a Patreon: patreon.com/stuyy Buy me a Coffee: ko-fi.com/anson Donate on Streamlabs: streamlabs.com/ansondevacademy/tip Donate on PayPal: paypal.me/ansonfoong Connect with me: Twitter: twi...
Nest.js Microservices with NATS, SQL, and Docker
zhlédnutí 10KPřed 7 měsíci
Nest.js Microservices with NATS, SQL, and Docker
This is amazing thank you so much.
Why didn't you add bootstrap
@@ajey4441 why would I? This is a video about react, not about css or styling.
@@ansonthedev how would i know? How to use bootstrap in reactjs
you have created an amazing tutorial. You got new subscriber.
Very Much thanks was looking up for the tutorial .... It is very detailed and clear in topics
Good video!
Good video!
what kind of keyboard are you use?
thaks bro, a wasnt understanding to much the volume of docker and a finally undestood this part of docker. And also i finally can code with docker
Hi from germany Very nice tutorial bro dont give up ❤
is there a repo somewhere? I was not able to find the final project code.
How to get channel profile icon. I am showing 5 results (title, views, thumbnail, channel name) but channel profile is missing. Any idea how to get that
Thank you bro for amazing lessons, l do like all of them and hope new lessons will be posted soon!)
I was stuck on connecting postman to my API, after a while I realized from some reason my api cant be accessed on local ip, and postman was trying to hit the local ip so never found it until I did a tunnel with ngrock
Not often I am able to sit down and finish an 8 hr tutorial. Thank you for being clear about all these topics!
@@chemson1775 you’re welcome!
I loved your content but bro almost killed me with your intro 💀
Very well explained. thanks
thank you for this tutorial, helped me understand the fundamentals of unit testing
awseme!!!!!
thank u so much, best full react course on youtube
Nice and wonder express tutorial, great explanation. I love your vscode setup theme, would love if you can share your configurations.
this is a god tier video
If anyone is facing the trouble " Error: Cannot find module '/usr/src/app/dist/main " . You can change the start:prod script in package.json to: "start:prod": "node dist/src/main", it is because the main file inside the container is inside the /usr/src/app/dist/src/main> I don't know the reason behind this. It must be something related to the tsconfig file. If you go check the files under the container the main file is in /usr/src/app/dist/src/main so, that works. Basically you need to provide the path of the main.js file of your container in your package.json file. If you try to build the application without docker ( in terminal ) after changing the path it won't work again because in dev environment the main file is inside the dist/ folder so hope you got the drill.
Great tutorial, I like that your actually explaining- so im not overwhelmed
GG <3
Only thing I want to say. thank you thank you thank you!!!
where can i get channelId? i cant get an info using forUserName as well, but i can't find where is channelId, and I'm trying to get information not from my channel
This is really a good Nest JS course that covers the basic concepts. Thanks!! 🔥
Great video!! Please add more.
Declare fakeUsers inside the class as: private fakeUsers = [{id:1...},{id:2....}] And then retrieve via find() like below: const findUser = this.fakeUsers.find(u => u.username === username);
You're a life saver. The gatewayintents are what were missing for me
i got error in this auth.controller.ts file with these line of codes : @Get('status') async getAuthStatus(@Req() req: Request) { return req.user; } the error says : src/auth/controllers/auth/auth.controller.ts:21:16 - error TS2339: Property 'user' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'. 21 return req.user; can someone give me a hand ?
thank you, thats really good
nice2 🤓 super easy to understand. Thank you.🤗.
You are awesome. Thank you.
Are there any practices/ projects or is it just a straight up tutorial
Thanks a lot! so easier and understandable thanks
I've completed this series in roughly 12 days (had to take some time to learn Mongo since I didn't know nothing). This tutorial has been super, thanks Anson.
excellent tutorial!
excellent tutorial, very thorough and concise explanation.Many, many thanks.😀
Further topics: 1.Adding different environments(ex: prod,test,dev,..) and setting db,authentication,... configs 2.Adding a logger 3.Deployment in different ways ....
excellent explaination! thanks mate!
Nice one dude. Great video and great instructions.
Just completed this series. Its been a pleasure. Thanks
theres only one thing i couldn't understand about the guards and strategies, how do the guards know exactly which strategy we're using, since inside their code we dont refer to any specific strategy?
Great work
What theme are you using in this project? Can you share the vs code setup? Thanks 😊
this is the best demonstration of one of the hard concept of next.js pre-renderings
Matur suwun bro
What Theme do you use?
Facing issues in QueryFailedError: Table 'group_message_attachments' already exists (backend) And ERROR in ./node_modules/core-js-pure/features/global-this.js 3:0-47 (frontend) Please help me. BTW Great work