![Philip Fabianek](/img/default-banner.jpg)
- 22
- 325 835
Philip Fabianek
Czechia
Приєднався 26 жов 2017
► About my channel
My channel is all about JavaScript and React. Not only will you find content useful for React beginners, but I also released a number of videos focusing on the very foundations of React (check out my React Deep Dive series). While I currently focus mostly on JavaScript and React, I am planning to release videos featuring other technologies in the future, for example videos about Node.js, Python (Django framework) or C++. One thing that you might find useful is that all of my "new" videos include subtitles.
► Social media
Twitter: philip_fabianek
LinkedIn: www.linkedin.com/in/philip-fabianek
Website: www.philipfabianek.com
GitHub: www.github.com/philipfabianek
My channel is all about JavaScript and React. Not only will you find content useful for React beginners, but I also released a number of videos focusing on the very foundations of React (check out my React Deep Dive series). While I currently focus mostly on JavaScript and React, I am planning to release videos featuring other technologies in the future, for example videos about Node.js, Python (Django framework) or C++. One thing that you might find useful is that all of my "new" videos include subtitles.
► Social media
Twitter: philip_fabianek
LinkedIn: www.linkedin.com/in/philip-fabianek
Website: www.philipfabianek.com
GitHub: www.github.com/philipfabianek
What is React Compiler?
React Compiler is a compiler that optimizes your React app by automatically memoizing your code. In this video, we explore what the React Compiler does in detail and compare it to the existing memoization features. We also go through how you can use and install the React Compiler yourself.
Timestamps:
0:00 Introduction
2:37 How does it work
4:00 React Compiler Playground
5:53 Manual memoization
7:01 Installation
8:24 ESLint plugin
8:52 Outro
Contact:
►Website: philipfabianek.com
►Twitter: philip_fabianek
►LinkedIn: www.linkedin.com/in/philip-fabianek/
►GitHub: github.com/philipfabianek
#reactjs #reactdeepdive #reactcompiler
Timestamps:
0:00 Introduction
2:37 How does it work
4:00 React Compiler Playground
5:53 Manual memoization
7:01 Installation
8:24 ESLint plugin
8:52 Outro
Contact:
►Website: philipfabianek.com
►Twitter: philip_fabianek
►LinkedIn: www.linkedin.com/in/philip-fabianek/
►GitHub: github.com/philipfabianek
#reactjs #reactdeepdive #reactcompiler
Переглядів: 1 019
Відео
Building React (TanStack) Query From Scratch
Переглядів 7 тис.Місяць тому
Have you ever wondered how React Query, currently known as TanStack Query, actually works? In this video, we're going to build the useQuery hook from scratch and by the end, you'll have a deep understanding of React Query's data fetching and state management mechanisms. So let’s get to it. Project link: github.com/philipfabianek/react-query-from-scratch Timestamps: 0:00 Setup 2:41 Overview 4:28...
Deploying Django React App on a Linux VPS in 10 minutes
Переглядів 276Місяць тому
Project link: github.com/philipfabianek/django-react-app In this video, we deploy a Django-React application on a Linux VPS server from scratch. We start by configuring a PostgreSQL database and downloading the project. We create a virtual environment and continue by installing and using uWSGI. We also use NGINX as a reverse proxy server that forwards the traffic to uWSGI. Finally, we also enab...
Why use Next.js?
Переглядів 4,9 тис.Рік тому
Next.js is one of the most popular React frameworks, but how does it actually work and should you use it? In this video, we explore the 3 strategies of pre-rendering Next.js offers and compare them with each other. They are static-site generation (SSG), incremental static regeneration (ISR) and server-side rendering (SSR). These strategies adress the fundamental problems such as large bundles a...
JavaScript is Weird
Переглядів 23 тис.2 роки тому
I still love JavaScript though. Check out my video about how React.js works: ua-cam.com/video/7YhdqIR2Yzo/v-deo.html Music: ua-cam.com/video/rSPLmZD2HKM/v-deo.html ua-cam.com/video/9f5ulgjyd4c/v-deo.html Social Media: ►Twitter: philip_fabianek ►LinkedIn: www.linkedin.com/in/philip-fabianek/ ►Website: www.philipfabianek.com ►GitHub: github.com/philipfabianek #javascript #js #programming
What is React Suspense? (including Suspense for Data Fetching)
Переглядів 19 тис.2 роки тому
In this video, we will learn what is React Suspense, how to use it with React.lazy() and how to use it for data fetching. We are also going to build a small app for fetching posts that will make use of Suspense for data fetching and we create a "skeleton screen" as a fallback. Suspense was added to React in version 16.6 and it was initially used for lazy loading with React.lazy(). However, its ...
How Does React State Actually Work? React.js Deep Dive #4
Переглядів 13 тис.3 роки тому
In this video, we will learn how React State actually works. We will first see how React communicates with the renderer, because it is the renderer that handles the update. Later, we will explore all of the lifecycle methods related to updates, specifically getDerivedStateFromProps, shouldComponentUpdate and componentDidUpdate. We will go through them one by one and we will connect them with th...
How Do React Hooks Actually Work? React.js Deep Dive #3
Переглядів 30 тис.3 роки тому
In this video, we will learn how React Hooks actually work. We will do that by answering a number of questions about React Hooks. The first and most important question is Why do hooks rely on call order? (in other words Why can't they be called inside loops or conditions?). This has a lot to do with the fact that hooks are all about arrays and indexes. We will show this by reverse-engineering t...
What Is React Fiber? React.js Deep Dive #2
Переглядів 59 тис.3 роки тому
In this video, we will learn about the current React reconciler - the Fiber reconciler. This reconciler is based on the Fiber object. React Fiber is a complete rewrite of React that fixes long-standing issues (React being synchronous) and offers incredible opportunities heading into the future. It focuses on animations and responsivness. Features like Error boundaries, Suspense and Concurrent M...
How Does React Actually Work? React.js Deep Dive #1
Переглядів 143 тис.3 роки тому
Have you ever wondered, how does React actually work? In this video, we will explore what is really happening behind the scenes. First, we will learn about React elements, components and component instances. Then, we will move to React Reconciliation along with the Diffing algorithm, which is the very core of React. Afterwards, we will move to rendering and to the renderers themselves, looking ...
useImperativeHandle | React Hooks Tutorial #12
Переглядів 6 тис.3 роки тому
In this final episode of my React Hooks Tutorial, we will learn about the useImperativeHandle hook. In order to understand the useImperativeHandle hook, we first have to understand the concept of forwarding refs using the React.forwardRef function. This allows us to pass refs to nested components, because we cannot achieve so using the ref keyword. After that, we will make use of the useImperat...
useDebugValue and useLayoutEffect | React Hooks Tutorial #11
Переглядів 3,1 тис.3 роки тому
In this episode of my React Hooks Tutorial, we will learn about the useDebugValue and useLayoutEffect hooks. The useDebugValue hook allows us to set a label for our custom hook in the React DevTools and the useLayoutEffect hooks allow us to reliably access and adjust DOM just before the browser paints it to the screen. This means that the useLayoutEffect hooks is the ideal place for adjusting s...
Custom hooks | React Hooks Tutorial #10
Переглядів 7773 роки тому
In this episode of my React Hooks Tutorial, we will learn how we can create custom React hooks. Custom hooks allow us to extract logic into reusable functions. Meaningful custom hooks can make your application very powerful. Custom hooks allow us to share logic that wasn't possible in React components and they really allow us to use our imagination. I will demonstrate this by creating a custom ...
useMemo and useCallback | React Hooks Tutorial #9
Переглядів 1,2 тис.3 роки тому
In this episode of my React Hooks Tutorial, we will learn about the useMemo and useCallback hooks. All those hooks do is improve our application performance by using memoization. While the useMemo hook is used to memoize a value, the useCallback hooks allows us to memoize a function (a callback) that we can pass as a prop to PureComponent to prevent excessive component re-rendering and therefor...
useRef | React Hooks Tutorial #8
Переглядів 9993 роки тому
In this episode of my React Hooks Tutorial, we will learn about the useRef hook. While the primary purpose of the hook is to store any mutable data without re-rendering the component, you are probably familiar with it because is is the primary way to access the DOM. Starting repository: github.com/philipfabianek/react-hooks-tutorial/tree/Episode7 Ending repository: github.com/philipfabianek/rea...
combining useContext with useReducer | React Hooks Tutorial #7
Переглядів 2 тис.3 роки тому
combining useContext with useReducer | React Hooks Tutorial #7
useReducer | React Hooks Tutorial #6
Переглядів 1,2 тис.3 роки тому
useReducer | React Hooks Tutorial #6
useContext | React Hooks Tutorial #5
Переглядів 2 тис.3 роки тому
useContext | React Hooks Tutorial #5
Basic setup | React Hooks Tutorial #2
Переглядів 1,5 тис.3 роки тому
Basic setup | React Hooks Tutorial #2
What are React Hooks? | React Hooks Tutorial #1
Переглядів 3,8 тис.3 роки тому
What are React Hooks? | React Hooks Tutorial #1
pls add part 2 with GC and batching calls
Great video! Could you perhaps create a tutorial on deploying a Django React App with AWS EC2 or direct me to a resource for that? I have found a tutorial for deploying a Django project with EC2, but I have my frontend in React separately like you.
Great content
Thank you, Philip. Your content is fantastic. It would be even better if you could make a video about the differences between incremental DOM and virtual DOM and their pros and cons
very informative video 👍
very informative video. Thanks
Thank you SOOOO MUCH! Awesome work!
Hi!! can you create one video on react server component, how it works under the hood.
It all works, thank you!
Good to see your videos back on my recommended list. Great explanation and thanks for generating more interest in the upcoming version of React.
great video Philip! Keep rocking
awsome bro you just make it so simple to understand thanku bro 🙂🙂
Great explanation, thanks!
Thank you!
clear & comprehensive video🥰
Thank you!
Great video! Very comprehensive material But at 10:40 you mentioned that two first <li> items will be unmounted because there will be new <li> inserted before the first one But neither type nor key have changed. Only children have changed. So I guess they won't be unmounted, but their props will be changed
Thanks...
Nice, can you also make a video on how to resolve react warning in a console Like memory leak warning Passive event handling took 250ms and many more
I haven't found any channel who teaches things this much deep on react... Appreciate your effors, Have a healthy life.
Thank you!
you should do a react course my friend.
I might consider that in the future but for now I am going to focus on my UA-cam channel
👏🏻
Just great as usual. Keep it up!
Thank you, more videos are on the way
Great video, brtoher! Can you please mention the VSCode theme and font you are using?
My theme is Atom One Dark and the font is Fira Code
Amazing content keep up the good work
Thank you!
Nice job dude !! 🎉
Thank you!
Wow.. please create a long content about this
Great video. A great way to show how react-query works under the hood. And obviously I'd like a second episode of this. Additionally, If I may, I think it'd be a very good idea to add TypeScript into consideration in the next video and adding proper types. Halfway through the video I was lost in all of those values and had to help myself with types. Using types and TypeScript adds a certain structure to how you look at your code. It can also help tremendously in the teaching capabilities of your next video.
Very neatly showed how everything works under the hood, great job! I'd really like a second part of this tutorial. But, if I may, I think it'll be a good idea to also take TypeScript into consideration in the next video. Halfway through the video I was lost in all of the values without types. Adding TypeScript in that kind of project adds a certain structure to your understanding of the building blocks and it improves the learning capabilities even more.
Thank you, I agree that adding TypeScript might improve the understanding of the different data types
Cool. Looing saving this for later. Thank you for this!
I hope you keep uploading videos like this, I really love the way you explain concepts 🤍🤍
Thank you, more is on the way
Where is the react deployment?
React on its own is just a JavaScript library. When you create a bundle, you end up with some JavaScript and CSS files. If you want to deploy a React application without any backend (server) code, you just need to find a place to host these static files. You can for example use Github pages. In this video, I deploy a more complicated application that includes Django backend, therefore I use a virtual private server (VPS) where I need to set up the databese, NGINX, etc.
Why are you not getting ts 7006 errors, Have you relaxed typescript rules, I am getting a lot of TS errors even for things like constructor() { this.queries = []; }
I manually disabled all the type errors so they didn't distract from the code
excellent work! thanks!
need part 2 (longer version like 1 hour)
Bro you're my hero
Thank you
@@PhilipFabianek please in depth video on observer pattern
This explanation can be understood by a 5 year old as well! Genius!!!
Thank you
This is so cool! Please continue making these type of videos
great job. very good info in a short time.
Thank you!
Great video ! Would you mind saying which programs you used to create this video? Specifically, the animations at 2:51 and the text animation as you add code in your IDE
Thank you! I created the segment starting at 2:51 by drawing the whole thing in a program and exporting several versions of the drawing with different hidden layers. I then added a simple fade-in and fade-out to make it look animated. You could also create this in almost any video editing program, since it consists only of text and simple shapes like rectangles and lines. Recently, I also came across the Remotion library, which allows you to create videos programmatically using React components. Even though I haven't used it yet, it looks very interesting. The text editor animations are created by simply by cutting the footage at particular times and adding a fade transition. Though it took quite a bit of work to make it look like this.
I always wondered about this. Thank you for the video.
Thank you for watching
@@PhilipFabianek Are you planning to make a video on Design patterns in the future? I understood the explanation of Observer pattern through your video quite clearly.
I will think about it, it is in interesting topic to consider
extreme clean and raw implementation as usual
Thank you
welcome back :)
讲的太好了,thanks
2 hours gem content in 15 minutes! Thanks a lot!
Thank you!
I'm really enjoying your React lecture! Thank you!
Thank you!
Amazing explanation for such a complex subject!!!
Thank you
The idea of this video is to show you that "raw" Linux deployment can be quite easy. When I was learning web development many years ago, I used to deploy my applications using services for everything thinking that deploying from scratch has to be very difficult. I hope that this video will convince you that it is not. As noted, this is not an in-depth guide on deployment, but I am thinking of creating a series of videos where I would go much deeper. Let me know if this is something that you would be interested in.
maybe you should look into the way you make videos. I watched the video and i could listen to the words but could not understand a thing you said
This video is quite technical and assumes some knowledge of React. Perhaps you could watch the previous video at ua-cam.com/video/7YhdqIR2Yzo/v-deo.html, which should be more accessible
Actually the best videos on React I've ever seen. As a beginner in React I find your content amazingly helpful, deep and clear-cut. Thank you a lot, man, you're GOAT
Thank you!
Great Video!