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: https://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 https://www.weibenfalk.com — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://youtu.be/Tdp_S_72mSI The finished code for the Astro project is here: https://github.com/weibenfalk/astro-movie-db Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://github.com/weibenfalk/next-auth-tutorial/ Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://github.com/weibenfalk/nextjs-app-router-data-fetching/tree/main Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

Code: https://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 robust code, let's get started! Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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 Tailwind CSS to Panda CSS. Also done with the App router / folder If you want to build the Quiz App yourself, You can find the Youtube tutorial here: https://youtu.be/kYAp1XsFTes The finished files for the App Quiz is here: https://github.com/weibenfalk/react-quiz-2023 And the finished App for this tutorial with Panda CSS is here: https://github.com/weibenfalk/React-Quiz-Panda-CSS Don't forget to like, subscribe, and hit the notification bell to stay updated with the latest Frontend tips and tricks. Happy coding! 🐼💻 #PandaCSS #WebDesign #CSSFramework #WebDevelopment Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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 starter files: https://github.com/weibenfalk/react-quiz-2023 00:00 - Introduction and starter files 03:32 - Font, layout component and home page 23:59 - Server fetch data for the quiz page 37:09 - Quiz page 52:17 - Question card component Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://github.com/weibenfalk/nextjs-13-refactor/ This is the App that is refactored, it's from my React Course where I build a Movie App: https://github.com/weibenfalk/react-rmdb-2022-v4 Please note that You'll need an API key from The Movie DB API. That key should be placed in an .env.local file in the root folder of the project and be named API_KEY 00:00 - 1. Installation and images 10:02 - 2. React-Query setup 23:09 - 3. Fetch on the server & App folder This is the original tutorial on how to build the App with NextJS 12: https://youtu.be/Tdp_S_72mSI Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀 Check out my premium courses at https://www.weibenfalk.com — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://github.com/weibenfalk/Advanced-React-Context/ 00:42 - Part 1 - Create a context 11:21 - Part 2 - Customize stuff 21:49 - Part 3 - Memoizing Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀 Check out my premium courses at https://www.weibenfalk.com — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://github.com/weibenfalk/react-router-6-4/ Article by Dominik about using React-Router in combination with React-Query: https://tkdodo.eu/blog/react-query-meets-react-router Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀 Check out my premium courses at https://www.weibenfalk.com — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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 premium courses at https://www.weibenfalk.com — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://github.com/weibenfalk/fresh Support me by subscribing to this channel ❤️ — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀 Check out my premium courses at https://www.weibenfalk.com — Find me somewhere below: Website: https://www.weibenfalk.com Udemy: https://www.udemy.com/user/thomas-928/ Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

#nextjs #tailwind #react Build a Movie App! Starter files and finished project: https://github.com/weibenfalk/react-rmdb-2022-v4 Here is a new video on how to refactor this App to use NextJS 13 instead: https://youtu.be/6lIur1E1jAQ 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 ReactJS course. It’s not as thorough on the basics of Javascript and React JS. That’s why it’s more suitable for people that Already know a bit React and want to get started with Next JS. The earlier versions use Styled Components and regular CSS but this version uses Tailwind CSS.It also fetches data client side with react-query and server side with getStaticProps and getStaticPaths. The data is fetched from The Movie DB Api. The tech stack is: - NextJS - Typescript - React-Query - Tailwind CSS - The movie DB Chapters: - 00:00:00 - Introduction - 00:01:04 - What we’re building - 00:02:22 - The Movie DB - API Key and more - 00:03:57 - Setup NextJS - 00:10:49 - Setup TailwindCSS - 00:22:32 - Setup react-query (tanstack-query) - 00:25:43 - Header Component - 00:39:03 - Scaffold Home Page - 00:43:09 - Basic fetch function - 00:47:56 - API Route for movies - 00:57:13 - Client side fetch with react-query - 01:08:29 - SearchInput Component - 01:27:01 - Hero Component - 01:39:04 - Grid Component - 01:47:35 - Thumb and Card Components01:57:30 - Spinner Component - 01:59:35 - Infinite scroll - 02:04:27 - Scaffold Movie Page - 02:16:25 - getStaticProps and getStaticPaths02:27:11 - Breadcrumb Component - 02:31:34 - MovieInfo and Pill Components02:56:14 - Grid Component for Movie Page02:59:27 - Error and 404 - 03:03:54 - Deploy to Vercel Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀 Check out my premium courses at https://www.weibenfalk.com — Find me somewhere below: Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk

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: https://www.linkedin.com/in/thomas-weibenfalk-76356611/ Twitter: https://twitter.com/weibenfalk Github: https://github.com/weibenfalk FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/ Dev.to: https://dev.to/weibenfalk