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.
See the full Vue vs React series here: • Vue vs React
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!
React Docs | react.dev/
Vue Docs | vuejs.org/
View the code here: github.com/w3cj/vue-vs-react
------------------------------------------------------------------------------
Hit us up on Socials!
www.syntax.fm/links
Brought to you by Sentry - Use code "tastytreats" to get 2 months free - sentry.io/syntax
#javascript #react #vuejs
Пікірлер: 29
Love to see Vue and React side by side! Maybe some Devs will be inspired to give the big V a shot 👀
Love to see CJ shine, he's great at these types of demos 🙌🏽
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 tag
Great series. I really liked the autocomplete ui showdown from a previous video. I think that would also be a great fit for this.
nice to see real-world examples. Excited to see the rest of the series. 👍
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.
I'll love to see Svelte vs Vue
This is gooood
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
@Tigregalis
22 күн бұрын
also why i like solidjs... the spreading of props to update state absolutely kills me though.
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 🤯
Talking about State Management, Svelte's is the best all the way - stores, context, and now runes
You should definitely do the most advanced app ever for comparing them: todo app!
i went with htmx, plain old html, css, and js and i couldnt be happier.
Please what's your vscode them
@CodingGarden
22 күн бұрын
You can find my theme and all my settings here: github.com/CodingGarden/vscode-settings
I came to say Svelte!
I see, in React, you'll be able to write lots of boilerplates
Write 100x less code with Vue and it looks so much nicer and cleaner than React.
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. ;)
Make some Vuejs projects
There is no fight, they are on complete different leagues. Vue is above and beyond lol
vue over react anytime
@sanampakuwal
22 күн бұрын
except mobile
@Tigregalis
22 күн бұрын
@@sanampakuwalbecause of react native?
@sanampakuwal
22 күн бұрын
@@Tigregalis yes
@sanampakuwal
22 күн бұрын
@@danko95bgd the story is not far different for flutter, and you need to learn whole new framework and it's ecosystem.
@sanampakuwal
21 күн бұрын
@@danko95bgd true
Talking about State Management, Svelte's is the best all the way - stores, context, and now runes