SolidJS - Why Doesn't React Just Work like This

With a 90% satisfaction rating in the latest State of JS survey, I had to give SolidJS a shot. A couple of things makes SolidJS super special. Its reactive engine can be superior to React's. Plus, it compiles to JavaScript and doesn't even need a Virtual DOM.
It is close enough to React that you'll pick it up quickly, so let's build something with the framework.
Index
=====
00:00 Intro
00:34 Installing
01:14 What You Get
02:15 Cleaning Up the Install
03:03 Creating a Signal
03:55 Data Binding & Reactivity
04:07 Create Resource
04:33 For Component
05:00 Creating a Component
06:10 Sub Component
07:21 Filtering
Links
====
SolidJS: www.solidjs.com/
PicoCSS: picocss.com/
Code Demo: go.raybo.org/82oB
Follow Me
=======
Blog: raybo.org
LinkedIn: / planetoftheweb
Twitter: / planetoftheweb

[@iGhifary]

Very good video!. Need more videos like this cause I just discovered solid js recently and want to learn more.

[@MrChernicharo]

I wish there were more videos like this! Solidjs is amazing! How about a part 2 exploring more features in the library? I'd love to see more

[@planetoftheweb]

Aaaah Thanks. I do want to revisit Solid at some point, but I have a big list of things I want to cover right now. Thanks for the note.

[@licokr]

Thank you for your video. That seems to be easy to learn especially for React developers.

[@JeanDidier]

Thanks for the picocss. And you got a new sub btw

[@planetoftheweb]

Awesome. Make sure you check out more of my vids. I've done quite a few on Frameworks. You might enjoy those as well.

[@cebuanoninoy]

Nice one Ray. Good to see you in YT after seeing you a lot in LinkedIn Learning. New subscriber here by the way.

[@planetoftheweb]

Yes, I like that I can do some more cutting edge stuff here.

[@Karrnfr]

Nice video. Short and understandable Thanks

[@jediampm]

hi, the best solidjs video demo. thanks.

[@bendev6807]

Very good, thanks for the video.

[@koroner666]

Awesome video Ray, thanks. Maybe I am a weirdo but I love js!!!

[@planetoftheweb]

That makes two of us

[@JEsterCW]

I knew about solid since 1st exisitng version, but never read too much about it in the documentation, but after watching for fun alpine js video i came here to watch this one and holy moly... i didnt know u have all these components for showing elements....iterating etc...now i understand why its so loved frontend tool... it adds like the "sugar syntax" and tools to the ecosystem and u dont have to bother with trash mapping inside jsx etc, i have to try to use solid in a smaller project since ive been doing react for too long.

[@yumeyuki1944]

I mean... if that is the main selling point for you, you're missing the point. You could easily write these Show/For components in react too.

[@mitrabest9756]

Awesome keep going 👍

[@mdminhazahamedrifat3282]

May i know why are you passing the signals keywords by using props? createSignal can be outter scoped also, right?

[@adimaralimuddin96]

what fonts are you using sir? it looks clean to me

[@neyk91]

Came here to ask the same

[@SoyOscarRH]

Fira code

[@fev4]

Is this making an api call whenever the keyword changes?

[@planetoftheweb]

Yes. You could modify it so that it just calls the 'API' once and then filter each time the search is made, but in reality you'd probably want to poll a real API when making a search.

[@JeanDidier]

I were in a similar situation recently. What I did was to load a first list of 25 items. The search starts on these items as a filtering and then if there is nothing to show among these items we perform an api call... that takes at least 5 seconds whatever your internet speed.

[@uchennaofoma4624]

This video was nice

[@planetoftheweb]

Thanks...lots more in my channel, so like and subscribe. ;)

[@krisnrg]

What font are you using for your editor?

[@planetoftheweb]

I believe it’s jet brains mono. I did a video on choosing your developer front too

[@xscvm]

What theme is that?

[@planetoftheweb]

I usually use the one of the Dracula themes

[@samiral-subhi6714]

So it is a compiler that doesn’t need to stick to JavaScript rules and yet it does just for the sake of attracting react users.

[@planetoftheweb]

It's a lot more than that, you should try it. I think you'll like it.

[@abcabc371]

why do you fetch the data every time u search and not fetch it just once and save it on the client since the filtering is done on the client ?? Fetching for every search makes sense if the filtering is done on server based on a get or post parameter

[@JEsterCW]

Chill out Mr.GodOfCoding ... he just shows how Solid works and quickly shows the possibilities, not how to code "correctly". Read the fookin title next time lmao

[@csIn84]

Importing an image is not a Vite specific thing. It's a Solid thing.

[@chris.dillon]

I'm so sick of conditional rendering in React. No option I've tried is like `Show`. I hope fresh adds support or solidjs runs on Deno etc someday (and/or redwood & remix). A lot of things are coupled to React (or preact in Fresh's case) :( .

[@videos4mydad]

I have mapped the F1 key to "delete line" in my editor. Everyone I have shared that with thinks its the best Idea I have ever had. I have had MANY ideas - but they dont seem to stick except the "F1" one! Seeing this video where the gentleman is triple-clicking to select line and delete gave me PTSD.

[@planetoftheweb]

You sound like one of those TAB fellers. I'm an avid triple clickers, but wow...that's the thing you used the F1 key for? Seems hardcore. hahaha.

[@dertuman]

I use ctrl+x wherever you are in the line and just takes it all away, but that's probably even better! Triple clicking though, my index hurts just by watching hehe, awesome video though

[@Diamonddrake]

vscode its ctrl + shift + K, its my favorite keyboard shortcut (ctrl + x cuts the line the same as shift + delete, changes your clipboard, probably don't desire that.)

[@rinatvaliullov3247]

Can you hold your code at the top of the screen, please.

[@AmxCsifier]

It's not "dejit", it's de-git (as in remove-git)

[@planetoftheweb]

Yeah, I realize that now. :)

[@AmxCsifier]

@@planetoftheweb haha didn't notice the video was a few months old

[@walterlol]

You need to destructure props. It's good practice

[@gabriellavoro1495]

in SolidJS you cannot destructure props I believe.

[@walterlol]

@@gabriellavoro1495 its javascript - not a concept of react

[@dertuman]

@@gabriellavoro1495 course you can my man

[@zerefdev]

if you destructure , you lose reactivity.

[@guillaumebrunerie]

In SolidJS the props object is a proxy, so destructuring it does something different than accessing props.value inside the JSX (you lose the side effects of the getters).

[@MrEnsiferum77]

Why everybody lose their mind, like react is bad and now solidjs fix things on the web. Well u can achieve the same with rxjs. And solidjs doing pretty much the same as rxjs observables, if not the same. If u like tommorow decoupled microfrontends u can survive by just decoupling and listening on changes. Kafka is working like this, RabbitMQ, and of course every OS scalability is based on dispatching events and reacting to them, not sure how liberal web kids realised now in 2022, but previously nextjs was the thing than other framework, then next framework etc. Probably u don't starting listening music from Metallica, same goes with web development.

[@Diamonddrake]

Please turn off copilot when recording, its distracting.

[@HenkLeerssen]

Solidjs still feels contrived. Svelte does less so..

[@planetoftheweb]

I think it’s trying to do something different. If you enjoy using React, I feel it’s an improvement. If you’re coming from JS, the. Svelte feels more natural

[@HenkLeerssen]

@@planetoftheweb I agree. I come from vanilla JS 😉

[@JeanDidier]

@@planetoftheweb Did you try AlpineJS? I was in the dilemma with Svelte and and ended up picking AlpineJS and built a little thing with

[@planetoftheweb]

@@JeanDidier Yes I did. You can see my review here: kzbin.info/www/bejne/d6rbcqqkmJuthJo I wish I could use that for everything.

[@ryansolid]

​@@HenkLeerssen This argument always confuses me because something like Svelte works nothing like JS. Like it sort of looks like it but it doesn't behave as the as written semantics would suggest. It takes only a quick look at the compiled output to see that `let x = 0;` become a pile of code. I guess our definitions of contrived are very different.

[@adimardev1550]

i really hate why react is so popular even it's not the best!

[@nicholassingh138]

Yea.. i still like svelte more

[@everythingisfine9988]

Agreed. Coming from Angular, vue, etc I'd go with Svelte. But I can see React people switching to Solid. Easier transition

[@isomorphic97]

Why? Never worked with svelte

[@planetoftheweb]

Svelte is orrery awesome. But I think solid is a bit of an improvement over React. I’d like to see where its going

[@user-lp4nb4vk5r]

Template syntax is tasteless

[@dillydadally]

Ug, have you actually worked much with Svelte? It's horrible. I hardcore adopted it because the component format was so nice, but ended up spending more time trying to get my code to compile than coding because the compiler was so finicky. It would give me nondescript errors ending in the engine itself and I struggled to get breakpoints to even work with Svelte code in either Webstorm or VSCode. Worse, Svelte doesn't let you target a component OR the children of the component easily with CSS. You can't even position a Svelte component without wrapping it in an extra div. To make a button component that functions like a button you would have to manually write an export statement for every single css style a button has - and then you still couldn't target it with a CSS class.

[@altairbueno5637]

It feels as bad as react lol

[@botondvasvari5758]

react is poo so is solid