Using Svelte Inside A React App; It's Easy!

React is getting really complex, and simpler frameworks like Svelte and Solid-JS are looking increasingly good. Can we try out Svelte inside of our React App? Absolutely! And it's so easy that we will also cover sharing CSS, shared state, properties and more!

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

0:00 Introduction
0:49 Integrating Svelte Into React
5:13 Adding Tailwind and DaisyUI
7:06 Svelte Component Properties
8:37 Creating A Svelte Wrap
10:52 Sharing Global State With Svelte
14:00 How Svelte is Svelte?
16:09 Outroduction

#react #reactjs #svelte

[levett_]

"Your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should." - Dr. Ian Malcolm

[MrJellekeulemans]

Awesome video. I will definitely share this with some of my colleagues. It amazes me how you're able to stay so up-to-date with new technologies, and how you're able to explain everything so clearly and calmly.

[ste-fa-no]

It seems like magic ✨ but it shows there's hours of research, study, trials and errors behind this.
Amazing content! Thank you! 🙌

[codewithguillaume]

Dear Jack it’s always a pleasure to listen to you or watch your videos. Best!

[audiodrocher]

Please accept my gratitude for your content, saved me bunch of times 😊 Happy to see svelte-centric material on this channel. Cheers 😊

[nishatsayyed]

THIS IS WHY I SUBSCRIBED. This guy knows what he is doing and the content quality is what proves it. Thanks for teaching us Jack.
Would love to see if you would make something around Clean Architecture in React.

[AmenAmenzo]

This is HUGE! Progressive enhancement for codebase migration from React to Svelte will be easy like this, love it!

[walkerneo]

Thanks for this Jack! I'd be interested in seeing how to add Svelte to an existing React + Webpack project as well if that's something you've explored. Seems the options are to either use the Svelte loader for Webpack, which I'd expect to be less stable than the Vite loader, or to convert the project to Vite. I'd tried that in the past but found that the overhead from the number of requests made using Vite actually negated any of the performance benefits as compared to Webpack

[fkaspow]

We need your full course on Svelte really in depth!

[jasongallavin]

The while loop to remove the dom element seems like a really rough hack. If you want your props to change, you will need to pass those in the dependency array which will cause the component to remount every time. This sounds like a really big performance problem.

[SithLordBishop]

Svelte components in a react app works fine but if you try and do a full conversion over to full svelte you can have some performance issues when you leave and comeback to react pages etc. Iv run into this in the past when converting TO react from something else. Shared state store helps a lot for sure.

We are converting an app from angular and we looked at react but due to the above mentioned issues we decided to convert to svelete, among other reasons. Svelte works so well as components, partial pages and full pages dispersed in an app.

[Kwuala]

Hello Jack ! Thanks for sharing this. It is very good to know that both libraries can work together without a great cost.

[tanercoder]

Loved your conclusion about inter-operatability between frameworks like react + swelte, and bringing other technologies into a project by pieces

[drvortex]

The only use case (that I can think of) for this approach is to progressively migrate a React codebase to a Svelte one

[IainSimmons]

I loved this! I know many people don't understand why you would do this, but as someone who has had to maintain some large legacy React apps, it would be amazing to slowly migrate over to something a little more... svelte... component by component.

For those saying just switch over to Svelte entirely, that make not be an option if your components are tightly integrated with React-only UI frameworks, in which case, maybe something like Astro could be used to have both React and Svelte. But that depends a lot on the type of app or site being built.

[ivanc]

For the onClick you don't need to define 'export let onClick', svelte will still pick it up with only an 'on:click' on the div.

[rogerscript]

Whenever I think you can't amaze me more... you publish a new video and do it again XD

[shashikantmarskole]

I learned a lot from your content—thank you for creating it! Keep up the good work.

[mammothoff]

you makes it look sooo easy, love it ❤

[jujijiju]

This is amazing, but I'm struggling to think a usecase where it would be worth the added complexity. I get speed and compiled down almost-hand-written style code without vdom, which is awesome, but I also have to keep track of another framework and it's api.