Passing Props VueJs Vs React

Today I will be comparing Vuejs and React and how each of them handles props. I'll speak on some similarities and differences since both are javascript front end tools that I enjoy using. So VueJs describes themselves as approachable due to the fact that if you already know HTML, CSS, and JavaScript its fairly simple. Versatile because of its ability to design small apps and still have the utility to develop larger ones too. React on the other hand is a little different for instance, their core targeting being describes as declarative and component-based. They state Declarative views make your code more predictable and easier to debug. with components, they strive to build encapsulated components that manage their own state, then compose them to make complex UIs. Mostly they want it to be something you learn once and can begin to use it everywhere.

The HTML part of the vue component

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

Our component we want to pass the prop too
Here were pass the props as an array item

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

Vue also lets u pass the on an object like so

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

When accessing the props in the HTML you can use two ways interpolation like shown above or you can use v-bind similar to how angular does. It looks something like this

<!-- Dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- Dynamically assign the value of a complex expression -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

I also added an example of the component looping through multiple props and render them.

Here is how we would do it in react
This is the react component where the data is stored
So as you can see below we pass the data to our currently rendered component the data with this line

<Avatar user={props.author} />

We can assign the prop a name and give it what ever data we have access to in our current component

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

The component we are passing the props to

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Now that I have shown a brief example of both Vue and React's way of handling props I want to talk a bit about some of their differences.
So a cool thing about vue is you can actually pass props both ways. Meaning you can be in the parent or child and give each other data. I personally think this is amazingly useful. On the other hand, using react hooks to better manage your state in a component makes looking at the code cleaner and helps with needing to give parent/child components access to each other's specific data.

In conclusion, I prefer to handle the passing of props the way vue does mostly for readability. Another is for the fact that I can pass props up or down. In terms of React though, I also think that even without using hooks it isn't terrible to pass props through the state when using the library. Another big part that you can take into view is that reacts community, in my opinion, is fairly larger than Vue's. Vue also tries to be very straight forward when it comes to using their framework.