Clipmaster Overview

[00:00:00]
>> So we got a second application. This one happens to be a react app. Now I am using the like version of Electron Forge. There is also a webpack version for For those of you who remember how to mess around with Webpack. I don't mean like that's most people.

[00:00:17]
For me personally, I work on a Svelte app all day. So I live in Vite. I have not touched Webpack in a few years. So I chose that one because I was looking out for me and what I need in my life. But I will show you the amount of work it took to get react installed in the Vite one, which is.

[00:00:34]
I installed vitejs/plugin-react and put it in there, and now my electron app supports react. And so that was it. That's the. You know, that's our tutorial on how to use react in an Electron Forge application. So good, good talk everyone. Does that become its own section at this point?

[00:00:55]
Or, okay. So with that, the layout of the application is shockingly similar to before, because I didn't need to reinvent the wheel here. Other than the fact that like we do the, react dom dance. Right that we have done before. Use clipping looks complicated. It's just a use reducer that I didn't wanna look at in the regular code, and that's all it's doing is then instead of knowing that I'm using use reducer, it exports an addClipping, removeClipping, and updateClipping.

[00:01:23]
I don't even think I use the update clipping, but it's simply a use reducer. That is hanging out its own hook. And yeah, there's some CSS that we'll touch in a second. Most of what we care about and need is just in application.tsx like everything else should unless I made a boo boo.

[00:01:44]
That I didn't, sometimes you start with the app and then you build it in the apply the things you know you needed later, if I missed one of those we'll have to pop in and change that but mostly everything we need to do will be in application.tsx, main looks like the default thing that we've seen and loved.

[00:02:01]
So, like not a lot new here. The biggest change from the previous one is we have react through a grand total of what I can assume is under 25 characters in my Vite setup for the renderer, which is to include the fact that we wanna parse JSX. Right, that's it.

[00:02:21]
One can imagine that Svelte, Vue what have you is exactly the same amount of work except instead of a react plug-in you put in a spell plug-in and life goes on and everything is good. So that is the kind of main change there.