React vs Vue - Template Syntax and State Management

In this video CJ shows how he built the same app with both Vue and React. He focuses on comparing the syntax of React and Vue and also how each manages state updates.

00:00 Intro
00:52 Example App Overviews
03:30 Sign Up Form Example
03:55 Zod Schema Validation
04:11 State in React
05:13 State in Vue
06:07 React Render Function
07:01 React setField State Update
07:40 v-model in Vue
08:44 Vue Template Syntax
10:18 Conditional Rendering in Vue
10:36 Conditional Rendering in React
10:46 Accessing Values inside Elements
11:03 onBlur helper in React
11:48 onBlur helper in Vue
12:01 Render Cycle Considerations in React
12:51 Vue SFC Considerations
13:30 React vs Vue - Render Cycle
13:48 Vue vs React - Summary
14:37 Next Time
14:52 Thanks!

------------------------------------------------------------------------------

Hit us up on Socials!

#javascript #react #vuejs

[TheAlexLichter]

Love to see Vue and React side by side! Maybe some Devs will be inspired to give the big V a shot 👀

[doomdarock]

Love to see CJ shine, he's great at these types of demos 🙌🏽

[ayhanfuat]

Great series. I really liked the autocomplete ui showdown from a previous video. I think that would also be a great fit for this.

[scriptedpixelsltd]

Very good comparison video. It’s made me appreciate Vue even more. The way things are done in Vue just make more sense & also feels like you can get things built done much quicker, which is what I found when building MVP’s with Vue loaded with a <script> tag

[JeremyMoore]

nice to see real-world examples. Excited to see the rest of the series. 👍

[Stoney_Eagle]

Vue vs React. Round one, FIGHT! 😂

I like React but I will choose Vue if I can, things are just less work to do the same and doesn't have a super strict ruleset giving me more freedom.

[EduardoSecondo]

Antes de escolher Vue, React e Angular, tentei os 3 e o que mais me adaptei foi o Vue, faz 1 ano que estudo e trabalho com ele, é muito bom.

[Tigregalis]

great comparison. looking forward to the next one. i have always preferred Vue's mental model (setup and template) over react's pseudo-immediate-mode rendering

[scriptedpixelsltd]

Do you have any way of sharing your vscode setup for Vue? I’m finding my vscode is slowly failing to show the autocomplete/suggest in my Vue projects, even when they’re a brand new project 🤯

[thedelanyo]

Talking about State Management, Svelte's is the best all the way - stores, context, and now runes

[DontFollowZim]

You should definitely do the most advanced app ever for comparing them: todo app!

[irlshrek]

i went with htmx, plain old html, css, and js and i couldnt be happier.

[thedelanyo]

I see, in React, you'll be able to write lots of boilerplates

[QueeeeenZ]

Write 100x less code with Vue and it looks so much nicer and cleaner than React.

[jediampm]

Hi CJ and everyone read the comments, let me be honest with all of you, from my experience.
If you create a lot and complex forms, there is only one framework that can save you from hell, ANGULAR (2+), with reactive forms or even template drive forms ( simple way to create forms) because has built-in validation, no need external lib like ZOD or even any power ranger to help you LOL.

The thing most important in the web is working with forms, if you choose a tool that dont help with it you are really f...

Good luck do it with frameworks / libs like react, vue, svelte and solidjs or even any meta framework, you really will see hell. ;)

[cristianosoleti]

There is no fight, they are on complete different leagues. Vue is above and beyond lol

[thedelanyo]

Talking about State Management, Svelte's is the best all the way - stores, context, and now runes