React is an incredible framework that can do incredible things. Not just web things. Hear me out.
PROJECTS I MENTIONED
Remotion (React for video) - www.remotion.dev/
React Email - react.email/
React PDF - react-pdf.org/
Ink (React for CLIs) - github.com/vadimdemedes/ink
React Three Fiber (3D React) - docs.pmnd.rs/react-three-fiber
React-nil (React for servers the wrong way) - github.com/pmndrs/react-nil
Reacord (React for Discord) - reacord.mapleleaf.dev/
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
S/O Ph4se0n3 for the awesome edit 🙏
babe wake up Theo posted another controversial video
babe will never get a full night's rest
React also renders my sleep paralysis demon
Does he look like me?
@@t3dotgglil bit
@@t3dotggnow I'm just picturing Theo standing in the corner of my room at 3am
He looks like Theo wearing those cartooney swim goggles :P
@@null_spacex He's just standing there... *MENANCINGLY* !
I remember when react first came out, I found a really good video from a game dev, explaining how react's rendering model is inspired by "immediate mode rendering" in graphics. Funny to see how we've come a full circle and people are now using react for graphics
React somewhat feels like immediate mode but has none of the actual benefits.
@@clickrushThat is the benefit
Running server code using the react lifcycle was the jumpscare i could have never anticipated
We wrote a React renderer for our game engine at work! Called Hiber3D HDK. Has gotten some people who never would have done game development into it.
React mail and react pdf are so dope. We (myself and one more person) wrote a big Course management webapps, we use react PDF to generate invoices and contracts and react mail for sending mails, like „he you have a course, accept it now in your panel“ or „you successfully added course change requests“. They made all our stuff very high end, especially because we where using easyinvoice before. Don’t forget: react-mail can also render Plaintext! We where handeling that ourselfs, which ended in a sync email html and plaintext (as expected)
React email has been amazing to work with. Was previously been using handlebars templates and even ejs templates. I never knew about react-pdf. That will definitely simplify my pdf creation process.
At my work we're currently using React PDF and React Three Fiber and are looking to use React Email in the future. While none of them are best in class, the huge benefit for us is that as a small company and small dev team it's so much easier for anyone to work on systems using these with no prior exposure. Remotion looks perfect for one of my personal projects. Will check it out.
Which other packes/projects would you consider best in class above these ones?
developers were so preoccupied with whether or not they could that they didn't stop to think if they should.
By the way Remotion renders standard DOM elements too, fun thing is that you can inspect your elements in the video real-time too 😅 Yea, you can render a video with ffmpeg an stuff, but you can't really use a lot of cool animation libraries (like framer-motion) because you need to interpolate the state of every element for every frame in your video.
this has been my fav theo video recently, so useful - thanks!
Theo thank you. I put your videos on while I code and it makes me feel like I’m part of the community.
I've never used React and I had no idea all these things were possible. Hugely impressed
I have spent the past year preaching this exact topic everywhere. Nice to have a video from someone who explains it in simple terms that i can now show people
Your ability to show the positive side of things is close to none! keep the positivity and productivity alive! peace
Ah yes, this is what Dante's Inferno prophesied about.
Some of these projects blew my mind. I didn't know they existed. Thanks Theo.
I want to add React Ape , there is not much activity though. React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainly a renderer focused on creating things for TV, PS5, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices.
i thought it would be something to render NFTs
why would you use js or vdom on low memory devices. And why would you use stateful UI over imgui when targeting graphics API's directly?
@@pokefreak2112 because everyone LOVES js and react and it may be faster than 99999 divs idk fuck js devs tbh
Incredible video Theo! Loved it
I make a living selling D&D books, and react-pdf is such a godsend. There's a *couple* features I wish it had, that it doesn't yet, but wow this is miles better than any other option on the market right now. I've used react-three-fiber as well and it's an absolute life-saver too.
Didn't expect to find you here
As far as I find those tools amazing, I am struggling to find a use case where you would chose them over already implemented (and more performant) non js solutions for some of the examples given. There definitely is otherwise, those tools wouldn't still exist after a while, but yeah, I am curious.
Yes please about Remotion! I've been super interested to see how it works but I just haven't really had a side project it applies to. Very interesting project
I'm absolutely blown away by what the threejs and R3F crew is doing
This is a really eyeopening video - I've just used react in wetland, and believed that it was it's only use case, but seeing these examples is really making me go wow...
React for a CLI tool is wild
There is a cool VS Code extension that converts .md files to .pdf. That one is the easiest way I found to make a .pdf but you're limited to markdown's functionality.
Somehow i watch all your videos, i litereally never skip them because they are very informative, theo you the best
Can't help but think that we've strayed too far with these levels of abstraction, but at the same time, these things are damn cool
I agree. It's getting out of hand. All this just to keep using JavaScript in ways it was never intended. I really think we need to switch to a new fixed type native language. Web Assembly? Rust? Dart? I don't know
@@ChristopherCricketWallace Web Assembly is the answer there. Since its a compile target not a language so by its very nature of existing it includes every other language in its confines (including javascript ironically enough) Basically what java was trying to do, without the disgusting language and with a much more lightweight runtime.
@@ChristopherCricketWallacedo u feel the same about React Native?
@@MrTeathyme ah yes I love downloading megabytes of runtimes everytime I visit a website, also no garbage collector and needs javascript to do pretty much anything
I love those levels of abstraction. I just don't love Javascript 😢
Very eye opening and interesting! Excited to try some of these out!
React was definitely built for the Web. That did however, change along the way.
react-pdf has issues with generating the incorrect text, BE WARNED, it will visually look right in a PDF, but when you extract the text from it, it can be wildly wrong. I used it for a resume builder. I ended up entirely rewriting it to use regular react + puppeteer to make it into a PDF. I actually ended up ditching react for 11ty.
I used the react-pdf for my thesis at university :D It is very usefull and easy use :D
Just got hired at a job and we use React to build applications for touch screen kiosks like the ones you’d see at McDonalds.
Craziest usecase I have seen is using react nested inside of java minecraft to render a minecraft hack client gui
"Your Scientists Were So Preoccupied With Whether Or Not They Could, They Didn’t Stop To Think If They Should" Loved the video, btw
Oh this is dope Theo wow. Thank you 🎉
12:32 - My first job in the Netherlands was for a company that had an app on PS4 and was built using React 😂
Raycast is a nice spotlight alternative for macos that uses react for it's plugin api.
Love this content as a React Developer, particularly its cross-compatibility feature (React Native). This would be vital to me when exploring the Web3 space in future, that's when developing smart contracts on decentralised apps.
Now imagine combining React-Three-Fiber and Remotion? Everybody is sleeping on it IMHO! Yes we want a Remotion video!
oh ThePrimeagen is gonna love this one
Is there an equivalent of react-pdf/Remotion for generating png/jpg images?
I really think that because React separates its render graph from rendering concerns, that alone makes it better than most UI systems. Efficiencies aside (yeah, diffing ain't great), having such separation just allows for so much flexibility. The React Three Fiber library especially. Unfortunately, I don't like authoring React (or any UI code), but can appreciate good design when I see it.
What’s a render graph?
@@zemaumm It's a hierarchical graph of nodes that when enumerated (or visited) can be used to render something. The HTML DOM is a render graph for example. If you do computer graphics (i.e. 3D), it's usually called a Scene Graph. By react keeping it's render graph separated, it means it can map onto the DOM as well as anything else that also uses a graph to render things (for example, ThreeJs, WinForms, or any other UI system)
Even though React pushed this rendering-agnostic approach forward in JS, it was not only library that does so. Both Solid and Vue, heck even Angular already provides ways to plug in custom renderers (Solid being directly inspired by React's renderer).
@@BinaryReader ohhh, is that abstraction why like mentioned in the video the react is output structure agnostic ( it could be email html, pdf, webgl nodes ), but it’s input structure needs more improvement as people suggest ? ( diffing , no reactivity, JSX… etc ). I didn’t even know the word render graph but I think it makes sense now
Wow! I rarely comment on videos, but at least two of the things you showed were precisely what I was looking for in the last six months. I am surprised by how I encountered this video. Thank you very much!
+10000 to Jotai! Daishi is worth his weight in gold.
Def do a video on Remotion! That would be dope.
That's crazy and I love it!
It's a very cool video. Highly appreciate it ❤
React is spreading to other flatforms likes zombies do in movies, And I am loving it. Legend has it zombies use react to control their spaceship.
I’m gonna use Remotion! Cool stuff!
Surprised you didn’t mention Raycast. I guess it’s kinda like react native, but they have a great react developer API for writing custom commands in their native swift app
My final project from college was made using react three fiber. It was a simulation of trading platform using 3D candles 🤣… fun stuff
I think Vue also can implement these libs you mentioned.
5:38 on React Ink... you mentioned it might not be the best solution for long running programs? Why's that? What would you suggest otherwise for interactive TUIs? I'm working on one at at moment, and have been considering using React Ink for some parts of it, so keen to hear any pros/cons on it + suggested alternatives for TUIs in Node/TypeScript.
Historical question: was react more coupled earlier to the web renderer? Or was it always modular? Trying to figure out when it became intentional; pre or post open source.
React provides *three* official renderers in the very first place. react-dom, react-test-renderer, and react-art.
I love such videos, I had faced issues while working with React Native for web, from basic stuff like responsiveness (I am not good at it) to some libraries not being compatible on web, I felt it was not worth it in the long run, if the web and mobile app will change independently. I feel React Native for web is a easy way to use common components for web and mobile, but seems to be creating more problems then it solves (for now). If anybody has a different experience or advice, I'd appreciate it, Thanks
This has actually helped me appreciate what React is as a technology a lot more. In the browser space, I was always put off by it as it felt like it was recreating too many things that were already built in to the HTML/CSS/JS stack. So Svelte and "less is more" frameworks always seemed objectively better. But I didn't realize that React was in a different ballpark from the outset by being more than a web framework, and *actively* pursuing that course of development. That definitely changes the value proposition.
glad I watched this to learn about react email
this was a banger, thanks theo
I just wish we could have a language fundamentaly based arround those concepts, declarativity & reactivity. It makes so many problems trivial to solve... Every new language people create is just another syntax for imperative functions with someones vision of the perfect type system.. I wonder why no one explored that path yet, maybe because everyone is too busy hating on react for being JS and "for the web", so they avoid studying its core concepts like the plague...
Reactivity predates react by a lot. Also, elm and svelte are technically their own languages that compile to JS. Even CSS is reactive (you can look at "corset" which builds on this idea). There are a ton of esoteric languages and DSLs that people have created to incorporate reactivity as a first-class citizen, but few have really taken off. At the end of the day, reactivity can introduce overhead and may not be the most performant way to program, so language developers may not want to be prescriptive about it.
We really need a decent and actively maintained react renderer for linux
Ad. React pdf. I will definitely look at it as I worked my butt of to generate a clean invoice in math lab :P
Yeah, they are made for Vercel now and Vercel needs to sell hosting. React is made for webhosts.
Now I want to know how to build my own rendering engine.
Someone else already said it, Remotion IS rendering to the web and doing screen capture. Ffmpeg is just to stitch the images together into an mp4 and probably to add the audio. EDIT: it uses puppeter. Headless chrome but you can also open any browser to preview.
holy shit that's stupid but kinda works
Last year, I used React to build a sub-app that would capture the image at the right inclination on top of the react-webcam using JS sensor APIs. React is pretty versatile.
Funnily enough, first 3 major version of MJML were in React too. We gave up on it as it was too limited to ensure compatibility for non modern client (invalid HTML properties, non closed tags, external templating compatibility, outlook comments...)
I'm definitely going to be using Ink
Really well timed video for me personally. I got into web development about two months ago. Had been working with html css vanilla ever since. Started learning React 2 days ago and finally saw its beauty while making the tutorial tic-tac-toe game. Absolutely fascinated with how cool its structure is and how easy JSX is over html, i love it!
That's probably the only reason why I want to come back to React sometimes. It just have everything around.
Would love a Remotion video with Johnny
React was in fact built for the web. It just allows for more things to be built with it, but that doesn't change the fact that it is a library for JavaScript, the programming language of the web. If it really hadn't been made for the web, they wouldn't have made it in JavaScript and they wouldn't have put so much effort into making everything work perfectly to improve the web development.
can't wait to play with react three. their other work, jotai, is beautifully simple.
I'm writing my first video game in React with the DOM & TailwindCSS. I'll eventually add redux for refactoring, but right now, it's working just fine.
I bet that if a VR revolution happens in the future and we all ditch our current devices for VR headsets, that the first VR UI component framework would be based on React.
Holy shit React PDF?! I have been fighting Pandoc to manage our templated .pdf documents as code and FINALLY there is something with the flexibility I need. WTF thank you for this video!
Exactly! I was trying so hard to template LaTeX with Jinja in Python. Now, I will give a try to this.
Wish react would go towards signals like solid/svelte. Performance is the biggest major area where react is way behind other frameworks.
Preact has a signal package for React!
Awsome 🎉
@Theo, you are right. React wasn't built for the DOM (web). React can render in other environments without much hassle or perf hits but for the DOM, it becomes a real PAIN! This is why for the DOM in the browser, i will prefer SolidJS + signals over ReactJS
react pdf doesnt offer table support (at the time i used it) :(
I'm (slowly) making a top-down dungeon crawler game, and I decided to write it in ThreeJS because it's available through NPM (Better than my alternative EaselJS anyway), and I'd be able to take advantage of the lighting effects and 3D layering. I built a tech demo with a scene, a HUD, and even a film grain shader, and then I realized I'd need mouse interactions which are apparently done best in react-three-fiber, so I rewrote the whole thing. React-three-fiber is definitely janky when it comes to odd configurations like the HUD and the shader, but once you get to more typical things, it makes more sense.
2:32 I was put in charge of updating our company email signatures earlier this year…it was rough indeed
this is the kind of content I crave for! this was eye opening.. thanks!
Note that the tweet/X post date on the thumbnail is three days *after* the video was posted.
Well soon start saying: whatever can be written in react will eventually be written in react
hope we can get next-auth for react native too
Yes remotion vid please!
VueJs offers something similar called Custom Renderer API.
Theo, How can we invest in early tech?
Ah I've been playing with Remotion for almost the past year! Remotion video please!!
V8 does not render HTML it executes JS. Blink renders the HTML & CSS in Chrome.
React Email is cool, but it almost seems abandoned now. They're not putting out updates or updating their changelog.
An open source game I contribute to, SS13, uses React for its UI. It works pretty nicely, and is easy to contribute to even as an amateur.
Top notch video. Well done.
I use React to web (NextJS or Laravel InertiaJS + ReactJS) and to mobile (React Native) and to desktop (electron-vite + ReactJS)
Typically for PDFs, I use markdown + Pandoc + css. React PDF is interesting though, I'll have to add it to my toolkit.
How about Markdown -> HTML -> Export in Browser as PDF
Can i use react for backend
it works very well I'm actually hoping to try this soon wat xD
Every goddamn thing is a SAAS nowadays
it's time to create a Serverside Framework with React-nil :3