Weibenfalk
Weibenfalk
  • 145
  • 694 893
React Compiler / React Forget - with Vite
Learn how to use and setup React Compiler with a React Vite Project. Use React Devtools to check if the code has been transpiled with React Compiler
Code: github.com/weibenfalk/react-compiler
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀
Check out my premium courses at www.weibenfalk.com
-
Find me somewhere below:
Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/
Twitter: weibenfalk
Github: github.com/weibenfalk
FreeCodeCamp: www.freecodecamp.org/news/author/thomas-weibenfalk/
Dev.to: dev.to/weibenfalk
zhlédnutí: 917

Video

How I created a movie application with Astro 3 .x
zhlédnutí 1,1KPřed 9 měsíci
I'll show how I created a movie application with infinity scroll and search functionality with Astro 3.x ... I'm also using the transition API and web components. Everything is built without any external libraries or frameworks. It's plain vanilla JS/TS and CSS. The data is from the movie DB. This is a refactor from a previous React course that you can find here: czcams.com/video/Tdp_S_72mSI/vi...
Learn Next-Auth Login Authentication - with Next.js App Router
zhlédnutí 1,4KPřed 10 měsíci
Learn how to protect your routes with next auth and the NextJS App router. You'll be using a complete React Movie application with tailwind, react-query and Typescript. Movies is fetched from The Movied DB. The Oauth provider that is used is Github. Code: github.com/weibenfalk/next-auth-tutorial/ Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.linkedin.com/...
NextJS App router API Data Fetching in Server & Client Components!
zhlédnutí 9KPřed 11 měsíci
Unlock the Power of Data Fetching with Next.js and App Router! Learn how to seamlessly retrieve data in your Next.js apps. Both natively inside React Server Components and with React-Query (Tanstack Query) With Tailwind CSS and Typescript Code: github.com/weibenfalk/nextjs-app-router-data-fetching/tree/main Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.li...
Build a React Memory Game with Panda CSS and TypeScript
zhlédnutí 542Před 11 měsíci
Code: github.com/weibenfalk/react-memory-2023 Hey there, fellow developers! Welcome back to my channel. Today, I have an exciting project in store for you. We'll be diving into the process of creating a captivating memory game using React, enhancing the UI with the visually appealing Panda CSS library, and ensuring type safety with TypeScript. So, if you're ready to combine fun, style, and robu...
Learn Panda CSS - Refactor from Tailwind to Panda CSS.
zhlédnutí 1,2KPřed rokem
Welcome to the world of Panda CSS, where creativity meets simplicity! 🐼🎨 Panda CSS is a powerful and user-friendly styling framework designed to transform your web development experience. Whether you're a seasoned developer or just starting your coding journey, Panda CSS has something incredible to offer! In this video I'm going to show you how to refactor a NextJS React Typescript App from Tai...
React Quiz App with NextJS, Typescript and Tailwind (2023)
zhlédnutí 3,8KPřed rokem
Build a mobile first Quiz App with ReactJS ( javascript ), Typescript and TailwindCSS. This is an updated version (2023) from the older version here on my channel. Use the App folder / App router in NextJS with client components and server components to fetch data on the server, SSR. Then feed the client component with the server fetched data. Tailwind is used for styling. Finished project and ...
NextJS 13 - Refactor a complete App to use the App folder and React-Query on the client
zhlédnutí 9KPřed rokem
I'll show how to refactor a complete NextJS 12 Application into NextJS version 13. I'll use the new App folder, server components and client components. On the client I'll also show how to setup React-Query (Tanstack Query) to work in NextJS v13. I'll also use Typescript. Here's the finished project: github.com/weibenfalk/nextjs-13-refactor/ This is the App that is refactored, it's from my Reac...
Advanced React Context Typescript | useContext and createContext
zhlédnutí 5KPřed rokem
Time to talk about context again! This time it's more advanced and I'll talk about using ReactJS Context with Typescript. I'll also show how to create a custom hook and a component to use the context. Finally I'll show how to memoize the context. Files: github.com/weibenfalk/Advanced-React-Context/ 00:42 - Part 1 - Create a context 11:21 - Part 2 - Customize stuff 21:49 - Part 3 - Memoizing Sup...
React Router v6.4 ( v6.4.1 ) - Fetch data with loaders
zhlédnutí 12KPřed rokem
Learn how to use loaders in React-Router version 6.4 ( 6.4.1 ). A new way to fetch data before your component renders. Implemented with Typescript and Vite. Code: github.com/weibenfalk/react-router-6-4/ Article by Dominik about using React-Router in combination with React-Query: tkdodo.eu/blog/react-query-meets-react-router Support me by subscribing to this channel ❤️ Do you want to master #rea...
How I built my website with Astro - A short introduction to astro.build
zhlédnutí 3,3KPřed rokem
In this video I'll briefly show how I built my own personal website with Astro.build ... It's an exciting new framework for creating websites. You can build both SSG (Static site generated) pages or MPA (Multi Page Applications). Check out my website here: www.weibenfalk.com Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀 Check out my...
Intro to Fresh - a new Deno framework that is faster than NextJS?!
zhlédnutí 1,4KPřed 2 lety
This is an introduction to Fresh that also uses Tailwind and Typescript. Build a mini App that uses the Owen Wilson WOW Api for the data. Fresh uses Deno and Preact (Javascript / Typescript) and file routing just as Next JS. Github repo: github.com/weibenfalk/fresh Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/ T...
Intermediate React.js FULL COURSE 2022 with NextJS - Tailwind CSS - Typescript - react-query
zhlédnutí 10KPřed 2 lety
#nextjs #tailwind #react Build a Movie App! Starter files and finished project: github.com/weibenfalk/react-rmdb-2022-v4 Here is a new video on how to refactor this App to use NextJS 13 instead: czcams.com/video/6lIur1E1jAQ/video.html This is a special 2022 version of one of my most popular courses. As this is more fast paced than the earlier versions it’s more of an intermediate to advanced Re...
How to install Tailwind CSS in NextJS
zhlédnutí 3,2KPřed 2 lety
OBS! This is just a part from the upcoming React course This is the part where I setup Tailwind with NextJS from my upcoming React course. The course will teach how to build a movie application in NextJS with Tailwind CSS, Typescript and react-query (Tanstack Query) Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/ ...
Vanilla Javascript Pacman
zhlédnutí 1,7KPřed 2 lety
Vanilla Javascript Pacman
Beginner Redux with Typescript - Redux Toolkit with RTK Query - Bitcoin ticker
zhlédnutí 8KPřed 2 lety
Beginner Redux with Typescript - Redux Toolkit with RTK Query - Bitcoin ticker
Passwordless authentication with Stytch and magic email links
zhlédnutí 1,3KPřed 2 lety
Passwordless authentication with Stytch and magic email links
NextJS and React-Query - Server Side fetching of data - SSR
zhlédnutí 20KPřed 2 lety
NextJS and React-Query - Server Side fetching of data - SSR
React Advent Calendar - With Typescript
zhlédnutí 1,6KPřed 2 lety
React Advent Calendar - With Typescript
React Router v6 beginner tutorial
zhlédnutí 2KPřed 2 lety
React Router v6 beginner tutorial
React Tetris with Typescript - Build Tetris with typescript - Typescript Tetris
zhlédnutí 7KPřed 3 lety
React Tetris with Typescript - Build Tetris with typescript - Typescript Tetris
React Controlled Radio Buttons Explained | React Radio Buttons | with Typescript
zhlédnutí 20KPřed 3 lety
React Controlled Radio Buttons Explained | React Radio Buttons | with Typescript
Star Wars React Memory Game with Typescript - Javascript Memory Game
zhlédnutí 2,8KPřed 3 lety
Star Wars React Memory Game with Typescript - Javascript Memory Game
Javascript Modulo Operator Explained | Understanding modulo rest value
zhlédnutí 3,7KPřed 3 lety
Javascript Modulo Operator Explained | Understanding modulo rest value
Trying GitHub Copilot | First impressions | Are our jobs in danger?
zhlédnutí 1,2KPřed 3 lety
Trying GitHub Copilot | First impressions | Are our jobs in danger?
Sveltekit Crash Course - Svelte Typescript - Getting started with Sveltekit Endpoints
zhlédnutí 13KPřed 3 lety
Sveltekit Crash Course - Svelte Typescript - Getting started with Sveltekit Endpoints
React Typescript Tutorial - Generic Components - React TS Crash course - Day#7
zhlédnutí 1,5KPřed 3 lety
React Typescript Tutorial - Generic Components - React TS Crash course - Day#7
React Typescript Tutorial - ClickHandlers and useRef - React TS Crash course - Day#6
zhlédnutí 2KPřed 3 lety
React Typescript Tutorial - ClickHandlers and useRef - React TS Crash course - Day#6
React Typescript Tutorial - React Context - React TS Crash course - Day#5
zhlédnutí 3,6KPřed 3 lety
React Typescript Tutorial - React Context - React TS Crash course - Day#5
React Typescript Tutorial - Styled Components - React TS Crash course - Day#4
zhlédnutí 14KPřed 3 lety
React Typescript Tutorial - Styled Components - React TS Crash course - Day#4

Komentáře

  • @usamanaeem8737
    @usamanaeem8737 Před 2 dny

    Thanks Man. It was a big help

  • @karankhaira8497
    @karankhaira8497 Před 2 měsíci

    Thanks sir.

  • @chibuikeukandu5419
    @chibuikeukandu5419 Před 2 měsíci

    Great tutorial👌

  • @rash0228
    @rash0228 Před 2 měsíci

    i have aslo using first method like React.FC

  • @SagarBhanushali-sw2mr
    @SagarBhanushali-sw2mr Před 2 měsíci

    I can still see the api call in network tab in the browser? Would you mind sharing/ displaying how your browser's network tab looks like, so that it can help me debug further?

  • @st.deykun
    @st.deykun Před 3 měsíci

    Isn't using Babel in Vite when we didn't have it before causing a slight delay in reloading?

  • @zangitv
    @zangitv Před 3 měsíci

    Finally! Someone knows what to upload actually😮‍💨

  • @eleah2665
    @eleah2665 Před 3 měsíci

    Thanks.

  • @AindriuMacGiollaEoin
    @AindriuMacGiollaEoin Před 3 měsíci

    Nice feature

  • @kamaboko1
    @kamaboko1 Před 3 měsíci

    Welcome back. It has been a while. Thanks for the new content.

  • @LTRuns
    @LTRuns Před 3 měsíci

    Great explanation especially about the 24 vs 12 hour clock! Thank you!

  • @user-nk9qo3fc2x
    @user-nk9qo3fc2x Před 3 měsíci

    Very good explanation and thank you for that :) I wonder if you really needed to put ”monkeys" in the dependency array of useCallback. Since that function creates a random number every time it is called, it won’t return the same number in every call. So it should be enough to create it once on the first render (using an empty dependency array)... or i am missing something ?

  • @prashlovessamosa
    @prashlovessamosa Před 3 měsíci

    great thanks for sharing

  • @sanketshende2792
    @sanketshende2792 Před 4 měsíci

    how can we make custom winner?

  • @JB2519
    @JB2519 Před 4 měsíci

    In the example if you want to send the quiz results back to the server, how to make that server call from the client component in a secure way?

  • @ultragal91
    @ultragal91 Před 4 měsíci

    Im confused, i fetched data in my server component and i have added a few console logs in the server component. When i run npm run dev, the console log is displayed in my terminal but when i run npm run build followed with npm run start, the console logs will not appear. I am wondering if my server component equals fo server side rendering? Im also using app router. Can anyone help me?

  • @semenderoranak2603
    @semenderoranak2603 Před 5 měsíci

    But, what I don't understand here, it takes some time for the data to be fetched, so all the components wait for the data to be fetched before rendering (under the code await getData()). How can we handle the data that has not fetched yet so we can still render components without the data

    • @IbrahimSowunmi
      @IbrahimSowunmi Před 3 měsíci

      I am not sure but looking up the suspense component might be a valuable route

  • @KatDog-jl3fs
    @KatDog-jl3fs Před 5 měsíci

    can you update the context from another component?

  • @sergeynazarenko2316
    @sergeynazarenko2316 Před 5 měsíci

    Incredible course, thank you very much

  • @fomawest7016
    @fomawest7016 Před 5 měsíci

    This is the most informative video i've ever watched on CZcams regarding JWT Auth. I appreciate your efforts. I have a question, how do we guard against CSRF attacks using this workflow? You've stored the access token in memory(a variable) which is effective against XSS attacks, what about CSRF attacks? I would deeply appreciate an enlightenment on that, thank you so much sir.

  • @learner8084
    @learner8084 Před 6 měsíci

    Thanks very much for the video...

  • @johnday2631
    @johnday2631 Před 6 měsíci

    how to deploy to netlify?

  • @frajdst
    @frajdst Před 7 měsíci

    math.ceil doesn't work for me, i'm using bootstrap. Maybe for that ?

  • @frajdst
    @frajdst Před 7 měsíci

    thank you for this great video!!! I'm trying to improve this wheel putting an alert at the end of the transition with a random message of success. Do you think I can recall it inside the function in wheel.addeventListener(transitioned)?

  • @noxein
    @noxein Před 7 měsíci

    That was big help thank you

  • @fatinfuyad2816
    @fatinfuyad2816 Před 7 měsíci

    Very important video. I was looking for context with tsx

  • @shineLouisShine
    @shineLouisShine Před 7 měsíci

    what? you have a tsconfig file now, but didn't say a single word of how? doesn't it worth mentioning or guidance? that is quite disappointing. thanks anyway

  • @hansschenker
    @hansschenker Před 7 měsíci

    100 lines of code with a little bit of cheating! But very concise and clear explanation and implementation of the snake game!

  • @deathdefier45
    @deathdefier45 Před 8 měsíci

    Clean to the point explanation, thank you for helping me visualise the data changes so clearly, great tutorial!

  • @elsuperhard
    @elsuperhard Před 8 měsíci

    Excellent video! it helps me a lot!

  • @user-mu1zk4dd5b
    @user-mu1zk4dd5b Před 8 měsíci

    great job sir, could not understand the moziilla doc explanation and you made it all clear to me

  • @rabahgag
    @rabahgag Před 8 měsíci

    Thanks, after 4 hours, I found the solution in this video at 2:40, it's about type.😀😀😀

  • @dananjayachathuranga7113
    @dananjayachathuranga7113 Před 8 měsíci

    finally found a clear video

  • @franck34
    @franck34 Před 9 měsíci

    Hi @weibenfalk ! thank you for this video. I failed to setup this with latest version of all. Suggestions : make a github repo for this, add stuffs for production in webpack, add lit elements (web component) :)

  • @konstantin.artifex
    @konstantin.artifex Před 9 měsíci

    Could you please elaborate on how to call the modal window get opened every time when each hatch card is being clicked. And bring the specific for this card the text?

  • @finkyfreak8515
    @finkyfreak8515 Před 9 měsíci

    Great stuff! Keep em coming 🔥

  • @JamesQQuick
    @JamesQQuick Před 9 měsíci

    This is awesome! Thank you 🎉

  • @evalarumbe
    @evalarumbe Před 9 měsíci

    Thanks for the video! Are there different use cases where it would make sense to use this proxy route approach, vs an alternative approach where a server component passes data as props to a client component? I'm struggling with using a fetched image blob as a src for <Image />

    • @Weibenfalk
      @Weibenfalk Před 9 měsíci

      If you don't need to reload the data or fetch more it's probably a good idea to fetch it on the server, as you say. But in cases where you need to reload the data or if you have, for example, an infinity scroll that fetches data on the client on scroll react-query is great. You also get caching "for free" on the client when using react-query So I wouldn't call it a proxy route approach. It is very common and completely legit to fetch on the client. Server fetching is, for example, great when you fetch data one time and the data doesn't change on that page during the time the user is on the page. That is exactly what happens on the individual movie page here; the data is fetched one time and never changes.

  • @hassaan-dev
    @hassaan-dev Před 9 měsíci

    Amazing❤

  • @kalokng3572
    @kalokng3572 Před 9 měsíci

    When I replace the images in img folder with my own, the updates are not shown when I refresh or run npm start. Do you have any idea why this could happen?

  • @musem6006
    @musem6006 Před 9 měsíci

    How do you rerun JavaScript on different page and avoid execute multiple JavaScript from previous page?

    • @musem6006
      @musem6006 Před 9 měsíci

      In View Transition.

    • @Weibenfalk
      @Weibenfalk Před 9 měsíci

      If you use the component several times the script will only be included once. Read more about the script handling in Astro here: docs.astro.build/en/guides/client-side-scripts/

    • @musem6006
      @musem6006 Před 9 měsíci

      @@Weibenfalk I use vanilla JS

    • @musem6006
      @musem6006 Před 9 měsíci

      @@Weibenfalk I have been building entire business platform in Astro except for the view transition which is a bit half baked so will need to know how JavaScript works across the pages that execute JavaScript if you know the limitation.

    • @Weibenfalk
      @Weibenfalk Před 9 měsíci

      @@musem6006 I haven't used it that much yet as I'm just starting to use Astro ... but I noticed that I had to import the script for the infinity scroll in the homepage (index) component and not globally in the head or something, when using the transition api. If I didn't do that and instead load it in the head from the layout component, the script wouldn't re-run and the infinity scroll would break when going back to the homepage after a transition.

  • @starlodroid2778
    @starlodroid2778 Před 9 měsíci

    Man you helped me very much!Thanks

  • @raki0125
    @raki0125 Před 9 měsíci

    CodeDaddy❤

  • @rachitm9557
    @rachitm9557 Před 10 měsíci

    Woah you actually explained in just 6 minutes , thank you sir 👍

  • @volodymyrstefanyshyn1713
    @volodymyrstefanyshyn1713 Před 10 měsíci

    Oh my god. This example with clock killed me! I am on different course and didn't understood well how to interact with modulo - but you did it clearly. Thank you so much.

  • @user-im6jp8tf5k
    @user-im6jp8tf5k Před 10 měsíci

    Thanks. I found the answer to my question in your video.

  • @Pareshbpatel
    @Pareshbpatel Před 10 měsíci

    {2023-10-24}

  • @richfamily8275
    @richfamily8275 Před 10 měsíci

    Awesome, all thanks for hordwork

  • @tiagoagm
    @tiagoagm Před 10 měsíci

    Hi, can we preselect a winner in the beginning?