Anson the Developer
Anson the Developer
  • 695
  • 6 074 525
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
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...
Express JS #9 - Middleware
zhlédnutí 5KPřed 5 měsíci
Express JS #9 - Middleware
Express JS #8 - DELETE Requests
zhlédnutí 2,2KPřed 5 měsíci
Express JS #8 - DELETE Requests
Express JS #7 - PATCH Requests
zhlédnutí 2,7KPřed 5 měsíci
Express JS #7 - PATCH Requests
Express JS #6 - PUT Requests
zhlédnutí 3,7KPřed 5 měsíci
Express JS #6 - PUT Requests
Express JS #5 - Post Requests
zhlédnutí 4,7KPřed 5 měsíci
Express JS #5 - Post Requests
Express JS #4 - Query Parameters
zhlédnutí 6KPřed 5 měsíci
Express JS #4 - Query Parameters
Express JS #3 - Route Parameters
zhlédnutí 7KPřed 5 měsíci
Express JS #3 - Route Parameters
Express JS #2 - Get Requests
zhlédnutí 9KPřed 5 měsíci
Express JS #2 - Get Requests
Express JS #1 - Introduction & Setup
zhlédnutí 23KPřed 5 měsíci
Express JS #1 - Introduction & Setup
NestJS & Prisma Tutorial
zhlédnutí 8KPřed 6 měsíci
NestJS & Prisma Tutorial
How to Dockerize NestJS with MySQL
zhlédnutí 10KPřed 6 měsíci
How to Dockerize NestJS with MySQL
NestJS JWT Authentication Tutorial
zhlédnutí 25KPřed 6 měsíci
NestJS JWT Authentication Tutorial
Express JS Full Course
zhlédnutí 184KPřed 6 měsíci
Express JS Full Course
NestJS Guards
zhlédnutí 4,1KPřed 6 měsíci
NestJS Guards
NestJS Interceptors
zhlédnutí 4,5KPřed 7 měsíci
NestJS Interceptors
Nest.js Microservices with NATS, SQL, and Docker
zhlédnutí 10KPřed 7 měsíci
Nest.js Microservices with NATS, SQL, and Docker

Komentáře

  • @fola_azeez
    @fola_azeez Před hodinou

    This is amazing thank you so much.

  • @ajey4441
    @ajey4441 Před 17 hodinami

    Why didn't you add bootstrap

    • @ansonthedev
      @ansonthedev Před 16 hodinami

      @@ajey4441 why would I? This is a video about react, not about css or styling.

    • @ajey4441
      @ajey4441 Před 16 hodinami

      @@ansonthedev how would i know? How to use bootstrap in reactjs

  • @mohitsirohi99
    @mohitsirohi99 Před dnem

    you have created an amazing tutorial. You got new subscriber.

  • @Saleemkujur
    @Saleemkujur Před dnem

    Very Much thanks was looking up for the tutorial .... It is very detailed and clear in topics

  • @jinghuang7596
    @jinghuang7596 Před dnem

    Good video!

  • @jinghuang7596
    @jinghuang7596 Před dnem

    Good video!

  • @frankshi648
    @frankshi648 Před dnem

    what kind of keyboard are you use?

  • @_kenJ
    @_kenJ Před dnem

    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

  • @crismosquera5656
    @crismosquera5656 Před 2 dny

    Hi from germany Very nice tutorial bro dont give up ❤

  • @YouGenom
    @YouGenom Před 2 dny

    is there a repo somewhere? I was not able to find the final project code.

  • @PulkitMalhotra
    @PulkitMalhotra Před 2 dny

    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

  • @Khamidovsn
    @Khamidovsn Před 3 dny

    Thank you bro for amazing lessons, l do like all of them and hope new lessons will be posted soon!)

  • @dira4734
    @dira4734 Před 3 dny

    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

  • @chemson1775
    @chemson1775 Před 3 dny

    Not often I am able to sit down and finish an 8 hr tutorial. Thank you for being clear about all these topics!

  • @Bcostamartins96
    @Bcostamartins96 Před 4 dny

    I loved your content but bro almost killed me with your intro 💀

  • @AhmedHassan-sd1ty
    @AhmedHassan-sd1ty Před 4 dny

    Very well explained. thanks

  • @UdayKiranK-t9q
    @UdayKiranK-t9q Před 5 dny

    thank you for this tutorial, helped me understand the fundamentals of unit testing

  • @Penitent85
    @Penitent85 Před 5 dny

    awseme!!!!!

  • @amorr228
    @amorr228 Před 5 dny

    thank u so much, best full react course on youtube

  • @rowlandoka
    @rowlandoka Před 6 dny

    Nice and wonder express tutorial, great explanation. I love your vscode setup theme, would love if you can share your configurations.

  • @wensa7041
    @wensa7041 Před 6 dny

    this is a god tier video

  • @amritniure465
    @amritniure465 Před 6 dny

    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.

  • @Bl1tzs
    @Bl1tzs Před 7 dny

    Great tutorial, I like that your actually explaining- so im not overwhelmed

  • @tsoabelouh5674
    @tsoabelouh5674 Před 7 dny

    GG <3

  • @jaiiinaaam
    @jaiiinaaam Před 7 dny

    Only thing I want to say. thank you thank you thank you!!!

  • @hephenstawking2176
    @hephenstawking2176 Před 7 dny

    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

  • @siddharths1949
    @siddharths1949 Před 8 dny

    This is really a good Nest JS course that covers the basic concepts. Thanks!! 🔥

  • @chagantisubhash
    @chagantisubhash Před 8 dny

    Great video!! Please add more.

  • @elviric
    @elviric Před 8 dny

    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);

  • @thatonespirit8358
    @thatonespirit8358 Před 9 dny

    You're a life saver. The gatewayintents are what were missing for me

  • @watonngetik3097
    @watonngetik3097 Před 9 dny

    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 ?

  • @isaacgraper
    @isaacgraper Před 9 dny

    thank you, thats really good

  • @AmarjargalB
    @AmarjargalB Před 9 dny

    nice2 🤓 super easy to understand. Thank you.🤗.

  • @frankameh257
    @frankameh257 Před 9 dny

    You are awesome. Thank you.

  • @ishay777777777
    @ishay777777777 Před 9 dny

    Are there any practices/ projects or is it just a straight up tutorial

  • @abirkolin4702
    @abirkolin4702 Před 9 dny

    Thanks a lot! so easier and understandable thanks

  • @marvinotieno2194
    @marvinotieno2194 Před 10 dny

    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.

  • @mansoor5413
    @mansoor5413 Před 10 dny

    excellent tutorial!

  • @andreassklizovic
    @andreassklizovic Před 11 dny

    excellent tutorial, very thorough and concise explanation.Many, many thanks.😀

  • @iam-arshadB
    @iam-arshadB Před 12 dny

    Further topics: 1.Adding different environments(ex: prod,test,dev,..) and setting db,authentication,... configs 2.Adding a logger 3.Deployment in different ways ....

  • @leroysaldanha3849
    @leroysaldanha3849 Před 13 dny

    excellent explaination! thanks mate!

  • @dailydose7772
    @dailydose7772 Před 13 dny

    Nice one dude. Great video and great instructions.

  • @jeremiahesite7430
    @jeremiahesite7430 Před 14 dny

    Just completed this series. Its been a pleasure. Thanks

  • @bjorn4533
    @bjorn4533 Před 14 dny

    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?

  • @michaeljonathan120
    @michaeljonathan120 Před 14 dny

    Great work

  • @JamesJames-nv6ps
    @JamesJames-nv6ps Před 15 dny

    What theme are you using in this project? Can you share the vs code setup? Thanks 😊

  • @mjylove2
    @mjylove2 Před 16 dny

    this is the best demonstration of one of the hard concept of next.js pre-renderings

  • @PSKI1
    @PSKI1 Před 16 dny

    Matur suwun bro

  • @sushiizockt1793
    @sushiizockt1793 Před 16 dny

    What Theme do you use?

  • @mrabhishek296
    @mrabhishek296 Před 16 dny

    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