React vs Vue - Template Syntax and State Management

Поділитися
Вставка
  • Опубліковано 26 лип 2024
  • 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

  • @TheAlexLichter
    @TheAlexLichter 22 дні тому +8

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

  • @doomdarock1
    @doomdarock1 19 днів тому +2

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

  • @scriptedpixelsltd
    @scriptedpixelsltd 19 днів тому +2

    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

  • @ayhanfuat
    @ayhanfuat 22 дні тому +3

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

  • @JeremyMoore1
    @JeremyMoore1 22 дні тому +2

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

  • @Stoney_Eagle
    @Stoney_Eagle 22 дні тому +4

    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.

  • @thedelanyo
    @thedelanyo 22 дні тому +1

    I'll love to see Svelte vs Vue

  • @eduardokiriakos6255
    @eduardokiriakos6255 22 дні тому +2

    This is gooood

  • @Tigregalis
    @Tigregalis 22 дні тому +2

    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
      @Tigregalis 22 дні тому

      also why i like solidjs...
      the spreading of props to update state absolutely kills me though.

  • @scriptedpixelsltd
    @scriptedpixelsltd 19 днів тому +1

    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
    @thedelanyo 22 дні тому

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

  • @DontFollowZim
    @DontFollowZim 22 дні тому

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

  • @irlshrek
    @irlshrek 20 днів тому +1

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

  • @thedelanyo
    @thedelanyo 22 дні тому

    Please what's your vscode them

    • @CodingGarden
      @CodingGarden 22 дні тому

      You can find my theme and all my settings here: github.com/CodingGarden/vscode-settings

  • @Linkplay9
    @Linkplay9 22 дні тому

    I came to say Svelte!

  • @thedelanyo
    @thedelanyo 22 дні тому +1

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

  • @QueeeeenZ
    @QueeeeenZ 22 дні тому +3

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

  • @jediampm
    @jediampm 22 дні тому

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

  • @iUmerFarooq
    @iUmerFarooq 9 днів тому

    Make some Vuejs projects

  • @cristianosoleti489
    @cristianosoleti489 20 днів тому

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

  • @oumardicko5593
    @oumardicko5593 22 дні тому +29

    vue over react anytime

    • @sanampakuwal
      @sanampakuwal 22 дні тому +1

      except mobile

    • @Tigregalis
      @Tigregalis 22 дні тому +2

      ​@@sanampakuwalbecause of react native?

    • @sanampakuwal
      @sanampakuwal 22 дні тому

      @@Tigregalis yes

    • @sanampakuwal
      @sanampakuwal 22 дні тому

      @@danko95bgd the story is not far different for flutter, and you need to learn whole new framework and it's ecosystem.

    • @sanampakuwal
      @sanampakuwal 21 день тому

      @@danko95bgd true

  • @thedelanyo
    @thedelanyo 22 дні тому

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