Learn React & Vue in 20 minutes

In this video, we are going through the main patterns side-by-side with React and Vue as we create a list application and a simple counter application. We are going to see how to compose applications from components, how to make them data-driven, how to handle user interaction, and finally, we are going to finish with how can you create your own project and start developing your app.

Ready for the next level?

Chapters

0:00 Intro
1:09 Components
2:02 Component code
4:27 Composition
6:17 Props
7:45 Interaction
10:57 Conditional styling
12:37 Conditional rendering
13:31 Lists
14:10 Input fields
14:48 Callbacks and custom events
16:10 Creating and running a project
17:56 Differences
19:02 Next steps

#react #vue

[HunorMartonBorbely]

To learn these libraries the fun way check out my courses on Skillshare:

[jozef]

Extremely useful video as someone looking to jump from Vue to React. Thanks 👍

[adenpandey]

I juts found this video and it's exactly what's needed - I've drifted through other react and vue videos and this is better than all of them. Idk how this only has 2k views but thank you, this was a high level overview of the main concepts of both to a newbie, rather than digging into everything from a "okay, time to set up!!! download these" perspective and starting with basic hello world shit. Thank you so much, this is incredibly useful

[Mahmudulhasan-tshm]

I'm a vue developer, thanks, this video helpes me to learn react.

[ShuklaAayushi]

I just came across your channel through FreeCodeCamp. And I have never been happier coding than I am now (in 9+ years). Loving the ThreeJS tutorials!! Please never stop teaching, the world needs more people like you. 👍🙌

[RobertWildling]

This is your first youtube video??? CONGRATULATIONS!!! It is totally on the spot! Thank you very much! Subscribed!

[davidbugatti]

Great video brother, liked & subscribed :)

[harrikauhanen]

Wow, what an excellent video! I really "understood" React in 20 minutes just by watching this (have some Vue experience already). I sort of like having callbacks (over emits), and e.g. iterating lists with v-for still feels cumbersome (compared to just using JS .map). Still feel like Vue is 👑 here at least on smallish projects...

[appurist]

First, I must say that I can hardly believe that was your first YouTube video, because it is very well organized, nicely paced, consistent voice level, and the content seemed accurate to me. You failed to observe ANY of the rookie mistakes! Haha.

I do feel though that some of the Vue points showed just one of several choices, and in some cases there were closer equivalents to the React form than shown. For example, many Vue developers never use single-file components, while great for learning, and organization (and I do use them in production in many case), they require the heavier Vue runtime. Vue apps can also be written using JSX, and a function-based component API; Vue is very flexible for the preferences of each developer, and comfort when migrating from a different framework.

Also many Vue developers use TypeScript, and the Vuetify UI library is now written in TypeScript.

And finally, the new Vue 3 provides a Composition API which effectively applies all the best ideas from other frameworks include React, React hooks, etc and applies those ideas to Vue, in some cases in a better (like 2.x) version than React has. So in many ways, Vue is like a greatest hits of the best ideas from other frameworks. It's also better documented and easier to learn. It just works, as you'd tend to expect. It starts more easily, and grows with your experience level.

[jaredbecksfort]

Thanks for the video. I have preferred Vue for a couple of years now but still try to keep up with React. This video reminds me why I like Vue better, but maybe I have just gotten used to it. React's conditional rendering bothers me for some reason.

[maskman]

This video is freaking awesome, "react and vue are basically works the same way, excpet the syntax", this sentence covers the debate / argument, we can learn both technologies at the same without hassles, it is really awesome for you to create such high quality video that answers to most of developers, you are the man !!!

[matthewbeardsley]

Hey! That was a really good overview of the two. I've only used Vue and always wondered if I'm missing out on something by not using react. I'd love to see a similar thing with Angular actually, might be a bit hard to compare 3 at once though!

[bitbeat]

Very good! The video is very well done, your voice is calm yet interesting and all in all the comparison is done in a great way. I might add that you are able to pass functions to Vue as props though (15:38), e.g. someFunction() can be passed over as a prop, moreover you can even define the default state of it and what it should return.

[SushanGhimire]

You are great brother ❤️ cant wait to learn more from you😍

[LachlanMiller]

Wow, great video. I agree with your analysis - the ideas and concepts are so close, the only real difference is the syntax (is this really a big deal)? One other thing to consider is tooling; React has far superior tooling. That said, I do expect Vue to catch up soon with the TS rewrite and the Vetur and vuedx VS Code plugins.

[SushanGhimire]

One question i wanna ask to you.
Should i stay on Vue or should I switch to react? I am still confused whether to learn react or not.