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
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.
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)
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.
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.
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 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.
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 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
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.
@@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
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.
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.
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.
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.
@@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
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!
Anyone who’s an expert in any of those areas on interest would not use react but the native tools. These react implementations just help react developers become familiar with the tech and eventually move on to native.
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'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.
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!
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
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.
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.
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.
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.
Your ring light is too strong. Thanks for the video. I'm glad people talk about the realities of React -- both good and bad. Regardless, this constant onslaught of criticism is necessary for React to survive. It'll be around for a good while still, but I think we are all looking forward to improvements.
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.
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.
...Why was I recommended this video? I'm a die hard Rust, and tentatively WASM guy, lol. Regardless, this was a well presented video, and your excitement for these solutions really came through!
All major reactive libs have separated their "reactive core" from their web rendering, it's been standard practice for nearly a decade now. Solid, Vue, and even Leptos in rust. Reactivity can be very useful outside UI, I def recommend giving them a look. (svelte might be confusing to use outside UI tho as its pretty much its own language. Most other frameworks can be treated as vanilla js)
Any framework which markets itself as a "component framework" and not a "framework for building websites" will work. So basically things like Vue, Angular, etc. can work, whereas things like HTMX and Svelte cannot.
@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
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...
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
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.
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!
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.
The email and pdf use cases confuse me cause they are static documents. There is no rerendering or reacting going on. The usefulness seems to find from bringing the components or atomic design of the web to PDF and email which can also be done with templating libraries. React at it's core just handles *reacting* to state changes with hopefully the least necessary re-rendering possible while using a component, atomic design, pattern. It can be a state management and view-updating solution for discord bots, threejs, and cli tools with a familiar interface. But I don't see how this makes them an easy entry-point into a whole new domain. There's a lot more that goes into 3d graphics than updating values based on state and react-three drops you right into that complexity with its meshes, light sources, cameras. It may even be an extra layer of confusion to translate between threejs examples and how to do it in react-three. I'm baffled by the existence of react-nil. I get that it's just experimental and Theo says we should never use it -- I agree, fine if it's just made for fun/exploration. But still. React is a view library at the end of the day, regardless of what it's rendering to: email, pdf, 3d canvas, mobile, etc. React nil doesn't use the component pattern because nothing is rendered. There's no need to re-render if everything's null and maybe there are state changes? (idk how b/c we have all the info we need from the request on server side). So we've lost both core parts of react. We're left with, what this library clings to: the react lifecycle. Shoe-horning arbitrary (non-rendering) processes so they fit into the react lifecycle which was designed for rendering views sounds like a horrible violation of the interface segregation principle. Managing the user lifecycle like the docs are suggesting? You may want a model lifecycle which gives you creation, deletion, update hooks like nestjs and sailsjs provide instead of the render function or a useEffect.
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
The truth is that frontend communities often don't know data structures, algorithms and classic programming patterns and paradigms. And when they "invent" something, it's often glorified and used everywhere. I am not saying it's bad, react is good. But please please frontend community, study Knuth, study computer science. It will give you a better perspective and sound judgement. I ask about concurrency, I ask about virtual memory, I ask ask about algorithms, zero-copy and I always hear how great react virtual DOM is without any real info. Like it's some magic hard to understand, a religion almost, when in fact it's not, it's a standard data structure so common in CS.
Wow. This is the first time I've ever seen something interesting about React. I had always thought of React like Windows or Angular -- an inferior legacy platform continuing to exist because of the momentum of a very large legacy community! But how wrong I was! This is actually impressive.
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
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.
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)
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?
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.
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.
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 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
developers were so preoccupied with whether or not they could that they didn't stop to think if they should.
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
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
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
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.
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.
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.
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 😢
I've never used React and I had no idea all these things were possible. Hugely impressed
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.
Now imagine combining React-Three-Fiber and Remotion?
Everybody is sleeping on it IMHO!
Yes we want a Remotion video!
this has been my fav theo video recently, so useful - thanks!
Very eye opening and interesting! Excited to try some of these out!
Anyone who’s an expert in any of those areas on interest would not use react but the native tools. These react implementations just help react developers become familiar with the tech and eventually move on to native.
Ah yes, this is what Dante's Inferno prophesied about.
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.
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.
Some of these projects blew my mind. I didn't know they existed. Thanks Theo.
Theo thank you. I put your videos on while I code and it makes me feel like I’m part of the community.
12:32 - My first job in the Netherlands was for a company that had an app on PS4 and was built using React 😂
I'm absolutely blown away by what the threejs and R3F crew is doing
I used the react-pdf for my thesis at university :D It is very usefull and easy use :D
"Your Scientists Were So Preoccupied With Whether Or Not They Could, They Didn’t Stop To Think If They Should"
Loved the video, btw
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.
Raycast is a nice spotlight alternative for macos that uses react for it's plugin api.
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!
React for a CLI tool is wild
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
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!
Ad. React pdf. I will definitely look at it as I worked my butt of to generate a clean invoice in math lab :P
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.
2:32 I was put in charge of updating our company email signatures earlier this year…it was rough indeed
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
Yeah, they are made for Vercel now and Vercel needs to sell hosting. React is made for webhosts.
Craziest usecase I have seen is using react nested inside of java minecraft to render a minecraft hack client gui
React was definitely built for the Web. That did however, change along the way.
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.
Incredible video Theo! Loved it
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.
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.
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.
Your ring light is too strong.
Thanks for the video. I'm glad people talk about the realities of React -- both good and bad. Regardless, this constant onslaught of criticism is necessary for React to survive. It'll be around for a good while still, but I think we are all looking forward to improvements.
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.
Somehow i watch all your videos, i litereally never skip them because they are very informative, theo you the best
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.
...Why was I recommended this video? I'm a die hard Rust, and tentatively WASM guy, lol.
Regardless, this was a well presented video, and your excitement for these solutions really came through!
Blame @theprimeagen and overlap in audiences.
Def do a video on Remotion! That would be dope.
react. the slowest way to do anything on a computer
Note that the tweet/X post date on the thumbnail is three days *after* the video was posted.
Anyone know, are any of the other well-known JS frameworks attempting to target this same degree of modularity?
All major reactive libs have separated their "reactive core" from their web rendering, it's been standard practice for nearly a decade now.
Solid, Vue, and even Leptos in rust. Reactivity can be very useful outside UI, I def recommend giving them a look.
(svelte might be confusing to use outside UI tho as its pretty much its own language. Most other frameworks can be treated as vanilla js)
@@tommycard4569 That's awesome! Thanks for replying. 🙏
Any framework which markets itself as a "component framework" and not a "framework for building websites" will work.
So basically things like Vue, Angular, etc. can work, whereas things like HTMX and Svelte cannot.
@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
Every goddamn thing is a SAAS nowadays
That Reacord looks really promising to implement auto admin and maybe make the admin account we use actually feel a little alive
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...
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
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.
oh ThePrimeagen is gonna love this one
React Email is cool, but it almost seems abandoned now. They're not putting out updates or updating their changelog.
I am ashamed of myself to have 10 years of webdev engineering experience, and getting my jaw drop, thank you for this knowledge.
That's probably the only reason why I want to come back to React sometimes. It just have everything around.
I think Vue also can implement these libs you mentioned.
this is the kind of content I crave for! this was eye opening.. thanks!
react pdf doesnt offer table support (at the time i used it) :(
How much of this is really using "React" and how much is just JSX?
It's a very cool video. Highly appreciate it ❤
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!
Liked and subbed just cause of the 'Let's dive in' part 🤣
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.
We really need a decent and actively maintained react renderer for linux
The email and pdf use cases confuse me cause they are static documents. There is no rerendering or reacting going on. The usefulness seems to find from bringing the components or atomic design of the web to PDF and email which can also be done with templating libraries.
React at it's core just handles *reacting* to state changes with hopefully the least necessary re-rendering possible while using a component, atomic design, pattern. It can be a state management and view-updating solution for discord bots, threejs, and cli tools with a familiar interface. But I don't see how this makes them an easy entry-point into a whole new domain. There's a lot more that goes into 3d graphics than updating values based on state and react-three drops you right into that complexity with its meshes, light sources, cameras. It may even be an extra layer of confusion to translate between threejs examples and how to do it in react-three.
I'm baffled by the existence of react-nil. I get that it's just experimental and Theo says we should never use it -- I agree, fine if it's just made for fun/exploration. But still. React is a view library at the end of the day, regardless of what it's rendering to: email, pdf, 3d canvas, mobile, etc. React nil doesn't use the component pattern because nothing is rendered. There's no need to re-render if everything's null and maybe there are state changes? (idk how b/c we have all the info we need from the request on server side). So we've lost both core parts of react. We're left with, what this library clings to: the react lifecycle. Shoe-horning arbitrary (non-rendering) processes so they fit into the react lifecycle which was designed for rendering views sounds like a horrible violation of the interface segregation principle. Managing the user lifecycle like the docs are suggesting? You may want a model lifecycle which gives you creation, deletion, update hooks like nestjs and sailsjs provide instead of the render function or a useEffect.
V8 does not render HTML it executes JS. Blink renders the HTML & CSS in Chrome.
Well soon start saying: whatever can be written in react will eventually be written in react
+10000 to Jotai! Daishi is worth his weight in gold.
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
Is there an equivalent of react-pdf/Remotion for generating png/jpg images?
Holy why cant i find reacord on google? Anyone know the link of their site?
Oh wow. As someone who _has_ built email templates, I really wish I'd known about React Email at the time. Email templates are truly miserable.
Hey Theo, great topic for a video! Can you please share some reading material on this topic, I'm very much interested.
I can't find that tweet. Someone please link me
The truth is that frontend communities often don't know data structures, algorithms and classic programming patterns and paradigms. And when they "invent" something, it's often glorified and used everywhere. I am not saying it's bad, react is good. But please please frontend community, study Knuth, study computer science. It will give you a better perspective and sound judgement. I ask about concurrency, I ask about virtual memory, I ask ask about algorithms, zero-copy and I always hear how great react virtual DOM is without any real info. Like it's some magic hard to understand, a religion almost, when in fact it's not, it's a standard data structure so common in CS.
How we can invest in send ?
When your only tool is hammer, everything looks like a nail. Average react developer.
I'm getting tired of that phrase. Can we switch to "When your only tool is a chainsaw, everything looks like a zombie" or something...
@@cocoscacao6102 no
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.
Would love a Remotion video with Johnny
react wasn't built only for the web. There I fixed it, stop baiting people
Wow. This is the first time I've ever seen something interesting about React. I had always thought of React like Windows or Angular -- an inferior legacy platform continuing to exist because of the momentum of a very large legacy community! But how wrong I was! This is actually impressive.
Theo, How can we invest in early tech?
VueJs offers something similar called Custom Renderer API.