Fresh: Blazingly Fast React

Learn how to make super fast pages using the React skills you have already, but building out your application using the Fresh framework and the Islands architecture.

👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono

0:00 Introduction
1:08 The Example Application
2:32 Getting Fresh
5:50 Building The Home And Detail Pages
6:30 Introducing Directus
10:34 Requesting Data On The Server
15:24 What Is React Reconciling
17:35 Supporting Filtering
19:31 Adding A Detail Page
24:14 Deployment With Deno Deploy
26:51 Adding Interactivity
32:36 What Are Islands?
36:48 Adding The List Page
39:50 Crazy Fast Deploys
40:46 Supporting API Endpoints
45:24 Lighthouse Score
45:56 Outroduction

#fresh #softwarearchitecture

[rohitjha]

I would like to know more about Bun from your perspective, Especially about React with Bun.

[sprioleau]

Amazing. What a great intro to Fresh. I’m excited to give it a try. The island concept is nice. It’s crazy how fast the deploys are. Wow!

[Chavezd]

not that it matters, I am sure you are extremely busy... but you can cut 1:54:22-2:00:24 before the word cool and before the retake... more importantly thank you for such awesome content!!!

[ju]

by far the best quality videos on anything react related, keep it up! awesome stuff

[fernandobaroni]

I want to work with Fresh now!!!

Real good introduction, your explanations are excellent!

[terrytas]

Jack, great tutorial on Fresh. Been trying to learn this framework with other tutorials. This is by far the most informative and helpful. Thank you!

[MrNishantparashar]

Omg, this is super crazy.
You are helping us to be a better engineer day by day.

[RYeah]

Great intro! I Also like Jake fresh look of his hair

[hugodsa]

hey Jack how were you getting hints on your terminal instance in vscode 🤯

[victorsunday]

I'm in love with this architecture

[kevvvinnn]

As a backend engineer, this makes me incredibly excited to learn more frontend! This was awesome.

[samuelgunter]

21:40 I've been told that React uses className instead of just class because it could conflict with the class keyword, but Preact seems to work with it just fine 🤔 Does anyone know if it's a different preprocessor or if "h" can just handle it properly?

[katokorkmaz]

Lovely video as always Jack, was looking into Deno right now myself, and this came as a nice surprise :D

[tioignon]

Very impressive & modern way to teach new crazy frontend stuff. Thanks to you!

[turokII]

This was a great Deno/Fresh intro! I was curious to know what tool you use to draw on your screen. Very effective teaching 🙌

[danielkirsch]

Hi Jack, thanks for the video - I am looking to learning more about deno and TS, and web dev through some of the frameworks running on top of those two - fresh looks great. This video comes in at the right time - great intro. - Thanks!
I wanted to ask how you are doing the sketching on screen - looks like a drawing tablet (in the traditional graphic design sense) - it really helps SEE things as you go along.. Thanks again!

[TheJenningsFamily]

Great, helpful video! Just a note - it's officially pronounced "dee-no", not "den-o" 😄

[eddited]

The quality of your explaination and videos is so great, really enjpy it! Thanks so much!

[joshyoerger]

Nice Space Battleship Yamato 2199 poster ⚓️

[aminedaimallah]

thank you for making this tutorial, this is very exciting, i will try fresh very soon, but i have a question, is it required to use preact or i can use any front end framework?