One cool thing with useSignal is that is doesn't have to actually be declared inside of a component. You can actually declare it outside of a component, like above a component or in a separate file, and use it as global state shared between multiple instances of the same component or in different components!
Max did kind of show that using the `counter()` value OUTSIDE the `Counter` component, and passed it in via props. But yes, this is neat and I wouldn't have expected it.
Solid is something that is built upon React. React was a game changer and a huge improvement over the current solutions at the time. Now solid develops from react and fix its pain points.
Sounds like a really solid piece of functional programming which deprecates react for good. Can not wait to see you building a complete website with auth and all using solidjs, showing all the quirks and features in a real world implementation.
You've always had a knack for explaining things in a thorough and understandable manner. Your hard work has helped me learn three separate JS frameworks I've had to use over the years and for that I am grateful. (Angular 2+, Vue, and Svelte, btw.) I've been using SolidJS for a while now and thus didn't need to watch this video, but I'm very glad to see you've maintained your usual high quality. Danke schön! :)
Love your tutorials and courses Max! I was having a hard time with React, so I bought your course on Udemy. It was awesome and I picked up your React Native course as well. Keep them coming!
Hi, make a video on your thoughts about the new react docs and the fact they recommend nextjs or others related frameworks. Is this good for beginners?
As many here have said, I can't find the CSS file you mentioned in the video. I can write my own, but I was looking forward to just focusing on the Solid stuff. LOL
thanks for the tutorial Max. You say around 2.35'' that we can find the css code in the starting project but I don't see any link to the starting project?
HeY max, I recently completed your MERN course, and there you showed the deployment but as heroku is paid now, can you please show another alternative?
I bet on Svelte because Vercel is promoting its development. But I don't like the complications of handling ".svelte" files and their Javascript-only templates. Typescript is all I need.
@@shinebayar Also Svelte despite shipping tiny runtime engine, their components are large, so like the comparison of svg vs jpeg on file size, eventually when your web app has more than 30+ components almost any other framework ships less javascript than svelte
Ryan Carniato (creator of Solid) is employed by Netlify as a Principal Open Source Software Engineer, so he effectively is supported by them to work on Solid full-time (along with trying to improve things in the OSS space in general). I don't think either Solid or Svelte are going away any time soon and the popularity of both is increasing
What useful things could the developer community create that could have a positive impact on the world, if they didn't constantly waste resources on new frameworks that basically just do old things differently?
True, is there a way it can continuously constantly and consistently better. Instead of even v2 is totally different from v1 under a same name. The framework end up a fashion of some novice developers to show off just like lady's hand bag and fashion dress 😂
Solid and other new frameworks are smaller and more efficient than their predecessors, so we could all be saving resources for our users by using them. And if we can be more productive as devs, then we do get more time to make impactful changes. Better that some passionate devs make things better for the rest of us instead of everyone struggling with reinventing the wheel for every app or site they make.
From a Vue dev's point of view, all these concepts e.g. computed, effect, reactivity system, component update is nothing new. Looks to me that Vue is just ahead of every other framework. One thing that Solid does better is the rendering mechanism by not using VDOM but soon Vue with have hybrid rendering with Vapor mode which is just an opt-in feature.
I use VueJS in multiple apps and I don’t really see why I would switch to SolidJS, feels like I would blow my brain out to do what I do with Vue on SolidJS…
Ryan Carniato (creator of Solid) often credits Vue for popularising some of the concepts in Solid, but Vue used to hide a lot of its reactivity, and made a strange choice to pair it with a VDOM. Until more recently, Vue was much slower than Solid (still faster than React of course), but it has now caught up a lot and is faster than Svelte and some others. Vue Vapor is heavily inspired by Solid and even credits it in Evan You's initial presentation of it. It's worth paying attention to Solid because aside from the JSX, a lot of the same concepts will be in Vue Vapor. Solid has now inspired other frameworks to adopt signals, like Preact, Qwik and even Angular. I'd you're using Vue, then yeah you definitely don't need to switch all your apps, but I'd definitely give it a try!
yea, same here. Vue always was ahead of React. React it is used because was launched first. Worst decision to use, even using in a small app is a overhead. Solid and Vue is a nice to have in your tool belt. I can't not Vue, but Solid for a small/medium app could be an option on this current time
Not really. Yes it uses JSX, but it compiles them down to regular DOM nodes, not createElement function calls. It has a reactivity system very similar to Vue, but Vue still uses a VDOM and "re-renders" the template function similar to React. Solid only updates individual text/DOM nodes or attributes/properties. I do think it has taken a lot of the best ideas of other frameworks but also made some of its own decisions that make it a different thing altogether.
@@IainSimmonsAND does not use any specific template logic like Vue and Svelte do. I much prefer this approach which is based on more functional paradigms.
Why would you assume everyone already knows React? And why would you not make this clear in the title (e.g. "Getting Started with SolidJS for React Developers") because it is useless for everyone else...
One cool thing with useSignal is that is doesn't have to actually be declared inside of a component. You can actually declare it outside of a component, like above a component or in a separate file, and use it as global state shared between multiple instances of the same component or in different components!
Max did kind of show that using the `counter()` value OUTSIDE the `Counter` component, and passed it in via props. But yes, this is neat and I wouldn't have expected it.
I like what I see so far in SolidJS. Very clean and deterministic!!
Thanks for the basic SolidJS explanations. I hope you will make a full course soon. I'll definitely buy it.
Another critical point: Your state doesn't have to be inside your component function. You can put it anywhere.
That is a game change, not needing a third-party state management is always a win.
Less dependencies === better sleep 😅
Solid is everything react should have been
Solid is something that is built upon React. React was a game changer and a huge improvement over the current solutions at the time. Now solid develops from react and fix its pain points.
Sounds like a really solid piece of functional programming which deprecates react for good. Can not wait to see you building a complete website with auth and all using solidjs, showing all the quirks and features in a real world implementation.
You've always had a knack for explaining things in a thorough and understandable manner. Your hard work has helped me learn three separate JS frameworks I've had to use over the years and for that I am grateful. (Angular 2+, Vue, and Svelte, btw.)
I've been using SolidJS for a while now and thus didn't need to watch this video, but I'm very glad to see you've maintained your usual high quality.
Danke schön! :)
Love your tutorials and courses Max! I was having a hard time with React, so I bought your course on Udemy. It was awesome and I picked up your React Native course as well. Keep them coming!
I attempted to create CSS based on what the video outlines. I have no idea if this is going to paste here well, but if it does, replace the index.css with the following:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #232224;
color: #ede9f0;
padding: 1rem;
}
#main-header img {
width: 5rem;
}
#counter {
font-size: 4rem;
font-weight: bold;
margin: 1rem auto;
border-bottom: 3px solid #8388ea;
color: #8388ea;
width: 4rem;
text-align: center;
}
#actions {
width: 10rem;
margin: 2rem auto;
display: flex;
justify-content: space-evenly;
}
#actions button {
color: #8388ea;
background-color: #161621;
font-weight: bold;
font-size: 2rem;
}
#actions button:hover {
background-color: #8388ea;
color: #161621
}
button {
font: inherit;
background-color: #abafe9;
color: #161621;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #8388ea;
}
Thank you!
i really hope you will go all in and create a new courses with this and solid-start if its stable enough. would definitely buy it!
Max we need your new course on SolidJS!
Hi MAX ! Excellent course as usual!! Looking forwards to the full course on Udemy :)
Course Course Course
Course Course Course
0:24 why you use npm if dev template has pnpm? Maybe you should try pnpm? I recommend it
Great , nice to see more content about SolidJS 🤝🏽
Are you guys planning a tailwind css course in the future???
Hi,
make a video on your thoughts about the new react docs and the fact they recommend nextjs or others related frameworks. Is this good for beginners?
where can I find the styles you pasted?
wondering why you are not creating full course of Nestjs !
Cant find the starting point file link in the video ?!!!
When academind publish solid js course on udemy
Very straight forward. Thanks!
As many here have said, I can't find the CSS file you mentioned in the video. I can write my own, but I was looking forward to just focusing on the Solid stuff. LOL
Great explanation, thx! If there will be a full course on Solid(or SolidStart), i will defintely by one. 👍
*buy
thank you max but please take care of backend too : nestjs, and microservices (rabbitmq, kafka ) etc. these are most top trend right now
I hope
Good crash course. It'll be very good if you can do that with solid start too. I'm really think to dive that in.
thanks for the tutorial Max. You say around 2.35'' that we can find the css code in the starting project but I don't see any link to the starting project?
i looked for it also, couldn't find it.
Thanks for this intro on Solidjs, Looking forward to your course for Solidjs on Udemy !
HeY max, I recently completed your MERN course, and there you showed the deployment but as heroku is paid now, can you please show another alternative?
Go with Svelte , and all the kit.
shall we talk about signal in angular ?
where's the download link ?
Max we need crash course
I bet on Svelte because Vercel is promoting its development. But I don't like the complications of handling ".svelte" files and their Javascript-only templates. Typescript is all I need.
Yeah, for that reason many people won't choose Svelte.
@@shinebayar Also Svelte despite shipping tiny runtime engine, their components are large, so like the comparison of svg vs jpeg on file size, eventually when your web app has more than 30+ components almost any other framework ships less javascript than svelte
Ryan Carniato (creator of Solid) is employed by Netlify as a Principal Open Source Software Engineer, so he effectively is supported by them to work on Solid full-time (along with trying to improve things in the OSS space in general).
I don't think either Solid or Svelte are going away any time soon and the popularity of both is increasing
What useful things could the developer community create that could have a positive impact on the world, if they didn't constantly waste resources on new frameworks that basically just do old things differently?
Not different it's better
True, is there a way it can continuously constantly and consistently better. Instead of even v2 is totally different from v1 under a same name. The framework end up a fashion of some novice developers to show off just like lady's hand bag and fashion dress 😂
Solid and other new frameworks are smaller and more efficient than their predecessors, so we could all be saving resources for our users by using them.
And if we can be more productive as devs, then we do get more time to make impactful changes.
Better that some passionate devs make things better for the rest of us instead of everyone struggling with reinventing the wheel for every app or site they make.
What useful things could we do if idiots didn't stick to inferior tech because it's convenient.
From a Vue dev's point of view, all these concepts e.g. computed, effect, reactivity system, component update is nothing new. Looks to me that Vue is just ahead of every other framework. One thing that Solid does better is the rendering mechanism by not using VDOM but soon Vue with have hybrid rendering with Vapor mode which is just an opt-in feature.
I use VueJS in multiple apps and I don’t really see why I would switch to SolidJS, feels like I would blow my brain out to do what I do with Vue on SolidJS…
Ryan Carniato (creator of Solid) often credits Vue for popularising some of the concepts in Solid, but Vue used to hide a lot of its reactivity, and made a strange choice to pair it with a VDOM.
Until more recently, Vue was much slower than Solid (still faster than React of course), but it has now caught up a lot and is faster than Svelte and some others.
Vue Vapor is heavily inspired by Solid and even credits it in Evan You's initial presentation of it.
It's worth paying attention to Solid because aside from the JSX, a lot of the same concepts will be in Vue Vapor.
Solid has now inspired other frameworks to adopt signals, like Preact, Qwik and even Angular.
I'd you're using Vue, then yeah you definitely don't need to switch all your apps, but I'd definitely give it a try!
yea, same here. Vue always was ahead of React. React it is used because was launched first. Worst decision to use, even using in a small app is a overhead.
Solid and Vue is a nice to have in your tool belt.
I can't not Vue, but Solid for a small/medium app could be an option on this current time
Solid > Vue
Very nice. Thx a lot.
Please make udemy tuts for Nuxt 3/Vue3
awesome, thank you
can you do for qwik
where is the css code?
Can you do a course on Qwik and Qwik City please
If SolidJS has good callback and function memoization system then it's a lot better than React. 😉
SolidJS indeed looks like the better ReactJS
Svelte isnt it. Solid is the future
Thanks!Great!
So SolidJS in short is a react syntax with VueJS DOM lifecycle.
Not really. Yes it uses JSX, but it compiles them down to regular DOM nodes, not createElement function calls.
It has a reactivity system very similar to Vue, but Vue still uses a VDOM and "re-renders" the template function similar to React.
Solid only updates individual text/DOM nodes or attributes/properties.
I do think it has taken a lot of the best ideas of other frameworks but also made some of its own decisions that make it a different thing altogether.
@@IainSimmonsAND does not use any specific template logic like Vue and Svelte do. I much prefer this approach which is based on more functional paradigms.
we need new flutter tutorial ❤
Mind blowing
should have used pnpm install instead of npm install.
👍
You need to update your css course on udemy
Why? It has everything you need
in my framework computed value is just to simple, just use let price=qty * price; 😂
Oh, and you really thought I'd care about yet another JS framework? 😅 Like this comment if you are a Vanilla JS rockstar? 🤘
Hope React will die soon. React is a mess stupid framework. Solid JS is very promising ....
Why would you assume everyone already knows React? And why would you not make this clear in the title (e.g. "Getting Started with SolidJS for React Developers") because it is useless for everyone else...
Solid:
const [ count, setCount ] = createSignal(0)
createEffect(() => console.log(count())
const doubleCount = () => count() * 2
Svelte:
let count = 0
$: console.log(count)
$: doubleCount = count * 2
Vue:
const count = ref(0)
watchEffect(() => console.log(count.value)
const doubleCount = count.value * 2
Which expression is DX friendly? You be the judge 😎
What do the dollar signs mean
@@AveN7ers it means whenever variable value changes, run this function 😎
Vue always wins! ahhaha
You forgot react:
const [count, setCount] = useState(0);
console.log(count);
const doubleCount = count * 2;
And Angular:
this._count = 0;
set count(num: number) {
this._count = num;
console.log(this._count);
}
get count() {
return this._count;
}
get doubleCount() {
return this._count * 2
}
^ oof