React vs Vue - I Built the Same App in Both Frameworks

Sdílet
Vložit
  • čas přidán 8. 05. 2024
  • In this video I'm going to build the exact same application in two Frameworks React and Vue.js. We're going to cover the following topics: 1) setup router and create multiple routes 2) generate router links 3) get Road parameters 4) making API calls 5) pass props from parent to child components 6) emit events from child to parent 7) hooks 8) event handlers 9) two-way data binding 10) form submission 11) dynamically bound properties 12) conditionals 13) loops and 14) finally we're going to also have a look at the State Management. That's going to be the perfect project if you want to compare how these two Frameworks work in multiple aspects.
    Repository URL
    github.com/thecodeholic/react...
    Support me by subscribing - bit.ly/2xTQOI0
    If you really love my content and want to support the channel:
    🔥 Check my full course "Build and Deploy Laravel E-commerce Website with Vue.js Admin Panel" at thecodeholic.com
    👉 My Patreon
    / thecodeholic
    Table of Contents
    ----------------------------
    00:00:00 - Intro
    00:00:38 - Generate projects
    00:02:03 - Project Structure and Cleanup
    00:04:37 - Output Object in Template
    00:06:15 - Setup Router and Routes
    00:10:16 - Make request and get posts
    00:13:15 - Render posts
    00:18:00 - Post Delete
    00:23:26 - Render Post Form
    00:34:07 - Post Create
    00:43:22 - React PropTypes
    00:44:57 - State Management
    🖱️Follow me on social media:🖱️
    / thecodeholic
    / thecodeholic
    / thecodeholic
    Check my Github:
    github.com/thecodeholic

Komentáře • 68

  • @TheMoralescl
    @TheMoralescl Před rokem +8

    This video is great for making decisions about which framework to use. I personally prefer Vue, maybe because I've used it more, but the comparison is great and easy to follow. I agree with others about using Pinia instead of vuex, which makes it even simpler. Thanks for your time. An excellent job 👍

  • @dickson710
    @dickson710 Před 11 měsíci +2

    dude, it's super clear, definitely good for beginners who are confused. It will be great to compare some more complicated / real life example later, like, implementing google map or simple firebase authentication and google login, etc. Anw, nice video, no BS.

  • @kwasiezor1630
    @kwasiezor1630 Před rokem +3

    Amazing... I love such a video. It provides usefull informations that help easily to get the difference. Thanks Bro. Keep it up

  • @siddiqahmed3274
    @siddiqahmed3274 Před rokem +8

    This is actually a great video sir comparing two frameworks side by side.

  • @intimater
    @intimater Před 8 měsíci

    AWSOME JOB!

  • @megumikato2328
    @megumikato2328 Před rokem +1

    Thank you for making such a great video!

  • @aatifbangash
    @aatifbangash Před rokem +1

    Waiting for many other videos like this one.

  • @drfcozapata
    @drfcozapata Před rokem +4

    GREAT JOB!!! Cool way to compare both. Thanks for sharing it! Only a question: Why do you use Vuex instead Pinia???
    Blessings from Venezuela and happy new year
    PS: I'm still prefer Vue over React 😁

    • @TheCodeholic
      @TheCodeholic  Před rokem +2

      Thank you. I use mostly vuex, simply because I have not tried Pinia yet.

    • @drfcozapata
      @drfcozapata Před rokem

      @@TheCodeholic Hahahaha Ok. Try it... Is really better.

  • @Neutraltsvart
    @Neutraltsvart Před 11 měsíci

    Great comparison video! I think Vuex and ReduxToolkit would have been an even more similar comparison regarding state management :) But i guess context api might be more widely used.

  • @taiwoadebola5617
    @taiwoadebola5617 Před rokem +7

    Awesome. Pls could you make a video about project planning, the steps one should consider and the steps to take

    • @TheCodeholic
      @TheCodeholic  Před rokem +3

      Great suggestion!

    • @aimanmouilhi6130
      @aimanmouilhi6130 Před rokem

      @@TheCodeholic Please keep this in mind because there is not a lot of content in this thread

  • @Samuel.Mwangi
    @Samuel.Mwangi Před rokem +3

    Fantastic, Vue still remains my favourite framework though I like React because of NextJs

    • @justchris5598
      @justchris5598 Před rokem +2

      You can use nuxt Js ... It the next Js of vue

    • @Samuel.Mwangi
      @Samuel.Mwangi Před rokem +1

      @Just Chris😌 NextJs has a more vibrant community than Nuxt plus the backing by Vercel. Remember, Vue is my favourite any day, but for projects at work, it's hard to make the argument for Nuxt.

  • @md.sabbirhossain8491
    @md.sabbirhossain8491 Před rokem

    Great Vide...
    If possible please create a Tutorial about "Role and Permission" with React js and Laravel

  • @AliHassan-wc6nb
    @AliHassan-wc6nb Před rokem

    Happy new year champ! What about htmx?

  • @dragonyusuf
    @dragonyusuf Před rokem +4

    Awesome video, could you do a video where you make the same project in laravel and yii2 (or any other popular php framework) and compare the two like you did in this video?

  • @murobakuridze950
    @murobakuridze950 Před rokem +1

    Great video to compare!!! I was wondering, does Vue really have any advantages when working with Laravel, or is it just a matter of taste? Thank you

    • @TheCodeholic
      @TheCodeholic  Před rokem +1

      Vue has similar syntaxt to Laravel but I think it's just a matter of taste

  • @kenan5886
    @kenan5886 Před rokem +1

    Great comparison! Which Color Theme do you use in VS Code?

  • @muhammadusmanali3718
    @muhammadusmanali3718 Před rokem +1

    Great video sir.... and my choise is vue😊

  • @riyad-appscode
    @riyad-appscode Před rokem

    Awesome video. Vue's composition api is awesome

  • @vouneo
    @vouneo Před rokem +3

    My favourite framework is Svelte but I pretty much like Vue for work.

  • @hiroroong693
    @hiroroong693 Před rokem

    very useful video, i really learn a lot.
    How do you paste so fast? are you using some kind of clipboard manager?

    • @TheCodeholic
      @TheCodeholic  Před rokem

      I am not pasting. I am undoing changes with ctrl+z.

  • @mphat10
    @mphat10 Před rokem

    please make more of this, something like student management system. student have an array subjects. subjects has name and score

  • @easycodes1586
    @easycodes1586 Před rokem +2

    good work bro

  • @mexantos
    @mexantos Před 11 měsíci

    hi Zura do you have a courses about slim how to build REST API but with more adv features such as with auth and limit request from some users or categorise users who access what?

  • @Mustafa-uj5vf
    @Mustafa-uj5vf Před rokem

    Great job, please carry on with real app both react and vue even could be Nuxt 3

  • @yusha790
    @yusha790 Před rokem +1

    awesome video !

  • @hermanspx
    @hermanspx Před rokem

    Fantastic....

  • @sinitquenapach5497
    @sinitquenapach5497 Před rokem +1

    Awesome 👍💯 video but vue is the Best my opinion I feel flexibility in vue

  • @justchris5598
    @justchris5598 Před rokem +1

    @TheCodeholic Why don't you use pinia ?

    • @TheCodeholic
      @TheCodeholic  Před rokem

      I have not used it before. Maybe I can use it next time.

    • @justchris5598
      @justchris5598 Před rokem

      @@TheCodeholic ok check it.. it very simple

  • @nandordudas
    @nandordudas Před rokem +1

    Hello, on the vue side you install vuex, but on react side why didn't use redux toolkit (or something else), why?
    Note:
    Vue doesn't need vuex to make a simple store like in react you made - provide/inject (if needed), reactive and composables.

    • @nandordudas
      @nandordudas Před rokem

      I added an issue to the repository and an example, have a nice day

    • @tyaho83
      @tyaho83 Před 8 měsíci

      Bonjour, avez vous un exemple de ce composable ?

  • @RiadDZz
    @RiadDZz Před rokem +2

    Great video, but for Vue you should've used Pinia 🍍

  • @easycodes1586
    @easycodes1586 Před rokem +30

    Vue is clean and easier than react

  • @sanderluis3652
    @sanderluis3652 Před rokem +2

    Now compare Nuxt vs Next (13)

  • @LeonelLopezBorbon
    @LeonelLopezBorbon Před rokem +1

    the closed caption now is off (before it was activated) , so I need to read this text on video (I am deaf)

  • @thishowls3216
    @thishowls3216 Před rokem

    repository URL dosen't work

    • @TheCodeholic
      @TheCodeholic  Před rokem +1

      Fixed. It was private and forgot to make it public

  • @followtariq
    @followtariq Před rokem

    Vue is organized for super fast development.

  • @ayoubyzem1084
    @ayoubyzem1084 Před rokem

    We want to make for us landing page using laravel 🙂🙂

  • @tonyvito5062
    @tonyvito5062 Před rokem +2

    I think Vue is cleaner than React, bro there are a lot of tech I'm really lost on what to learn

    • @TheCodeholic
      @TheCodeholic  Před rokem +1

      Start with whichever you find easier. Don't overthink!

    • @tonyvito5062
      @tonyvito5062 Před rokem

      @@TheCodeholic Thanks man I'm more comfortable with React cuz I've been using it for a while now I hope u make some more React/Laravel tutorial I really love this channel

  • @Igor-vk8fl
    @Igor-vk8fl Před rokem

    Me as JS student seeing all this go and coma back tabs, crying so hard!!! So fucking confusing. Can i get a job with only vanilla JS please? lol

  • @fromillia
    @fromillia Před rokem

    Зачем же нам в таком случае фреймворки на РНР ?

    • @sanusihassan7125
      @sanusihassan7125 Před rokem

      if you want your client side app to handle routes use these front end libraries/frameworks, otherwise use PHP

  • @justchris5598
    @justchris5598 Před rokem +1

    Vue still very simple

    • @TheCodeholic
      @TheCodeholic  Před rokem

      Vue is definitelly simpler than Laravel.

    • @thecoolnewsguy
      @thecoolnewsguy Před 11 měsíci

      ​@@TheCodeholicbut vue is a front-end framework lol

  • @asiacuisine4869
    @asiacuisine4869 Před 10 měsíci +1

    Vuex is outdated. Why are u still using it?!?

  • @xxXAsuraXxx
    @xxXAsuraXxx Před 5 měsíci

    whoever uses React in 2024 needs to be fired immediately!

  • @abdrahim9307
    @abdrahim9307 Před rokem +1

    great work