React vs Vue - Template Syntax and State Management

Поділитися
Вставка
  • Опубліковано 28 лип 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
  • Наука та технологія

КОМЕНТАРІ • 30

  • @TheAlexLichter
    @TheAlexLichter 25 днів тому +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 22 дні тому +2

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

  • @ayhanfuat
    @ayhanfuat 25 днів тому +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 25 днів тому +2

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

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

  • @Stoney_Eagle
    @Stoney_Eagle 25 днів тому +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.

  • @Tigregalis
    @Tigregalis 25 днів тому +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 25 днів тому

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

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

    I'll love to see Svelte vs Vue

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

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

    This is gooood

  • @scriptedpixelsltd
    @scriptedpixelsltd 22 дні тому +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 25 днів тому

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

  • @DontFollowZim
    @DontFollowZim 25 днів тому

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

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

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

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

    Please what's your vscode them

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

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

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

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

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

    I came to say Svelte!

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

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

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

    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 12 днів тому

    Make some Vuejs projects

  • @cristianosoleti489
    @cristianosoleti489 23 дні тому

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

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

    vue over react anytime

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

      except mobile

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

      ​@@sanampakuwalbecause of react native?

    • @sanampakuwal
      @sanampakuwal 25 днів тому

      @@Tigregalis yes

    • @sanampakuwal
      @sanampakuwal 25 днів тому

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

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

      @@danko95bgd true

  • @thedelanyo
    @thedelanyo 25 днів тому

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