Getting Started with SolidJS

Подписаться 911 тыс.

Просмотров 37 тыс.

50% 1

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!

Опубликовано:

28 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@KDMaz Год назад

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!

@MichaelCampbell01 6 месяцев назад

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.

@mattd5419 Год назад

Solid is everything react should have been

@victorlongon 11 месяцев назад

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.

@amhatedla Год назад

Thanks for the basic SolidJS explanations. I hope you will make a full course soon. I'll definitely buy it.

@shinebayar Год назад

Another critical point: Your state doesn't have to be inside your component function. You can put it anywhere.

@nero1375 Год назад

That is a game change, not needing a third-party state management is always a win. Less dependencies === better sleep 😅

@tonymerkclelive1023 Год назад

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!

@ISKLEMMI Год назад

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! :)

@ZynthProductions Год назад

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!

@blankslate6393 Год назад

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.

@azreow Год назад

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; }

@Test-zv9ty 10 месяцев назад

Thank you!

@pablozuta2402 Год назад

Great , nice to see more content about SolidJS 🤝🏽

@meka4996 Год назад

Max we need your new course on SolidJS!

@shlomominkowicz65 Год назад

Hi MAX ! Excellent course as usual!! Looking forwards to the full course on Udemy :)

@alibahrami6810 11 месяцев назад

Very straight forward. Thanks!

@RadekAnarchy Год назад

Great explanation, thx! If there will be a full course on Solid(or SolidStart), i will defintely by one. 👍

@Deliverant Год назад

*buy

@samareshdas767 Год назад

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?

@NeverCodeAlone Год назад

Very nice. Thx a lot.

@haliszekeriyaozkok4851 Год назад

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.

@baileysli6235 Год назад

0:24 why you use npm if dev template has pnpm? Maybe you should try pnpm? I recommend it

@paritoshnichat4218 Год назад

Thanks for this intro on Solidjs, Looking forward to your course for Solidjs on Udemy !

@naranyala_dev Год назад

awesome, thank you

@AnthonyCandaele Год назад

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?

@paulh6933 Год назад

i looked for it also, couldn't find it.

@azreow Год назад

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

@jediampm Год назад

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?

@hiroyukinumaguchi1984 Год назад

Thanks!Great!

@someshharshvardhan2419 Год назад

Cant find the starting point file link in the video ?!!!

@bsl3399 Год назад

Are you guys planning a tailwind css course in the future???

@virendrapatel775 Год назад

Mind blowing

@jfkongphop549 Год назад

When academind publish solid js course on udemy

@michabednarski5555 Год назад

where can I find the styles you pasted?

@user-gu5ts5nx8r Год назад

wondering why you are not creating full course of Nestjs !

@mohammadrezabehzadfar8122 Год назад

thank you max but please take care of backend too : nestjs, and microservices (rabbitmq, kafka ) etc. these are most top trend right now

@abdel-rahmanmostafa5786 Год назад

I hope

@ronaldobicca7101 Год назад

Go with Svelte , and all the kit.

@dhawalparmar7117 Год назад

Max we need crash course

@Kanexxable Год назад

Course Course Course Course Course Course

@raymeeks593 Год назад

Can you do a course on Qwik and Qwik City please

@shock7258 Год назад

where's the download link ?

@veerakumar1279 Год назад

shall we talk about signal in angular ?

@oliveiraphc Год назад

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 Год назад

Yeah, for that reason many people won't choose Svelte.

@aquaductape Год назад

@@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

@IainSimmons Год назад

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

@prasanthmohan9911 Год назад

👍

@xrr-1 Год назад

SolidJS indeed looks like the better ReactJS

@AbdulrahmanJ Год назад

we need new flutter tutorial ❤

@priyanshu4016 Год назад

can you do for qwik

@xdmarcitos Год назад

where is the css code?

@ronssijei Год назад

So SolidJS in short is a react syntax with VueJS DOM lifecycle.

@IainSimmons Год назад

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.

@victorlongon 11 месяцев назад

@@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.

@_the_one_1 Год назад

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.

@alexdypas3894 Год назад

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…

@IainSimmons Год назад

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!

@nero1375 Год назад

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

@Nobodylihshdheuhdhd 9 месяцев назад

Solid > Vue

@mayankchauhan6680 Год назад

If SolidJS has good callback and function memoization system then it's a lot better than React. 😉

@DanielEg95 Год назад

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?

@champechilufya1458 Год назад

Not different it's better

@mattc4567 Год назад

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 😂

@IainSimmons Год назад

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.

@theLowestPointInMyLife Год назад

What useful things could we do if idiots didn't stick to inferior tech because it's convenient.

@SachinYadav-eh7vg Год назад

You need to update your css course on udemy

@kevyyar Год назад

Why? It has everything you need

@edrivenstudioslevar Год назад

should have used pnpm install instead of npm install.

@ravindra2784 Год назад

Please make udemy tuts for Nuxt 3/Vue3

@theLowestPointInMyLife Год назад

Svelte isnt it. Solid is the future

@renstillmann Год назад

Oh, and you really thought I'd care about yet another JS framework? 😅 Like this comment if you are a Vanilla JS rockstar? 🤘

@nothingtoseehere5760 11 месяцев назад

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...

@Frank2tek Год назад

Hope React will die soon. React is a mess stupid framework. Solid JS is very promising ....

@maskman4821 Год назад

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 😎

@AveN7ers Год назад

What do the dollar signs mean

@maskman4821 Год назад

@@AveN7ers it means whenever variable value changes, run this function 😎

@nero1375 Год назад

Vue always wins! ahhaha

@BenjaminLeeds Год назад

You forgot react: const [count, setCount] = useState(0); console.log(count); const doubleCount = count * 2;

@BenjaminLeeds Год назад

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