Getting Started with SolidJS
HTML-код
- Опубликовано: 28 фев 2023
- SolidJS made "Signals" one of the most important frontend JS framework trends you can find right now!
Time to learn how to build web apps with SolidJS from the ground up!
Join our Academind Community on Discord: academind.com/community
Check out all our courses: academind.com/courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
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 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.
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 😅
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!
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.
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!
Great , nice to see more content about SolidJS 🤝🏽
Max we need your new course on SolidJS!
Hi MAX ! Excellent course as usual!! Looking forwards to the full course on Udemy :)
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!
Very straight forward. Thanks!
where can I find the styles you pasted?
Thanks for this intro on Solidjs, Looking forward to your course for Solidjs on Udemy !
Very nice. Thx a lot.
Great explanation, thx! If there will be a full course on Solid(or SolidStart), i will defintely by one. 👍
*buy
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.
awesome, thank you
0:24 why you use npm if dev template has pnpm? Maybe you should try pnpm? I recommend it
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?
Thanks!Great!
Cant find the starting point file link in the video ?!!!
Mind blowing
When academind publish solid js course on udemy
Max we need crash course
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.
wondering why you are not creating full course of Nestjs !
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
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?
Course Course Course
Course Course Course
Go with Svelte , and all the kit.
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
Are you guys planning a tailwind css course in the future???
where's the download link ?
👍
we need new flutter tutorial ❤
shall we talk about signal in angular ?
Can you do a course on Qwik and Qwik City please
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
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
can you do for qwik
SolidJS indeed looks like the better ReactJS
where is the css code?
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.
Please make udemy tuts for Nuxt 3/Vue3
If SolidJS has good callback and function memoization system then it's a lot better than React. 😉
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.
You need to update your css course on udemy
Why? It has everything you need
should have used pnpm install instead of npm install.
Svelte isnt it. Solid is the future
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