LogRocket: React vs. Vue

ex-eight-toggle-template.vue

<template>
  <div class="toggle">
    <ToggleButton
      @clicked="workClicked"
      :class="{'toggle__button': true, 'active': workActive}"
      text="Work"
    />
    <ToggleButton
      @clicked="homeClicked"
      :class="{'toggle__button': true, 'active': homeActive}"
      text="Home"
    />
  </div>
</template>

ex-five-hooks.jsx

React.useEffect(() => {
  axios({
    method: "get",
    url: props.jsonUrl
  })
    .then(res => {
      const { routes } = res.data;

      // setState is part of a useState hook unseen here
      setRoute(routes[0].legs[0].departure_time.text);
    })
    .catch(err => {
      console.log(err);
    });
}, []);

ex-four-data-loading.jsx

componentDidMount() {
  axios({
    method: "get",
    url: this.props.jsonUrl
  })
    .then(res => {
      const { routes } = res.data;
      this.setState({
        departureTime: routes[0].legs[0].departure_time.text
      });
    })
    .catch(err => {
      console.log(err);
    });
}

ex-four-data-loading.vue

created: function(jsonUrl) {
  axios({
    method: "get",
    url: this.$props.jsonUrl
  })
    .then(res => {
      const { routes } = res.data;
      this.departureTime = routes[0].legs[0].departure_time.text;
    })
    .catch(err => {
      console.log(err);
    });
}

ex-nine-events.vue

methods: {
  workClicked() {
    this.workActive = true;
    this.homeActive = false;
    this.$emit("toggled", "work");
  },
  homeClicked() {
    this.workActive = false;
    this.homeActive = true;
    this.$emit("toggled", "home");
  }
}

ex-nine-react-events.jsx

function Child(props) {
  return (
    <div>
      <button onClick={() => props.toggleView("work")}>
        Work
      </button>
      <button onClick={() => props.toggleView("home")}>
        Home
      </button>
    </div>
  );
}

function Parent() {
  const [isWorkView, setWorkView] = React.useState(true);
  return <Child toggleView={setWorkView} />;
}

ex-one-conditional-rendering.jsx

<div id="App">
  <h1 className="App_header">My Cool App</h1>
  <Toggle onClick={handleToggleChange} />
  {isWorkScreen ? <Work /> : <Home />}
</div>

ex-one-conditional-rendering.vue

<div id="app">
  <h1 class="app__header">{{createHeader}}</h1>
  <Toggle @toggled="handleToggleChange"/>
  <Work v-if="isWorkScreen"/>
  <Home v-else/>
</div>

ex-seven-handle-toggle-change.vue

methods: {
  handleToggleChange(newView) {
    this.isWorkScreen = Boolean(newView === "work");
  }
}

ex-six-v-on-binding.vue

<Toggle @toggled="handleToggleChange"/>

ex-three-render-children.vue

export default {
  name: "App",
  components: {
    Home,
    Toggle,
    Work
  }
}

ex-two-render-list.jsx

const { buses } = this.state;

const busRoutes = buses.map(bus => {
  return (
    <BusRoute
      key={`BusRoute-${bus.routeNumber}`}
      routeNumber={bus.routeNumber}
      origin={bus.origin}
      destination={bus.destination}
      jsonUrl={bus.jsonUrl}
    />
  )
})

return (
  <div className="Work">
    {busRoutes}
  </div>
);

ex-two-render-list.vue

<div class="Work">
  <BusRoute
    v-for="bus in buses"
    :key="`BusRoute-${bus.routeNumber}`"
    :routeNumber="bus.routeNumber"
    :origin="bus.origin"
    :destination="bus.destination"
    :jsonUrl="bus.jsonUrl"
  />
</div>

side-by-side-react.jsx

function Accordion() {
  const [isAccordionOpen, toggleAccordion] = React.useState(false);

  return (
    <div className="Accordion">
      <h3>Accordion Header</h3>
      <button
        onClick={() => {
          toggleAccordion(!isAccordionOpen);
        }}
      >
        Toggle Accordion
      </button>
      {isAccordionOpen && <p>Accordion content lives here...</p>}
    </div>
  );
}

side-by-side-vue.vue

<template>
  <div class="accordion">
    <button @click="toggleAccordion">Toggle Accordion</button>
    <p v-if="isAccordionOpen">Accordion content lives here...</p>
  </div>
</template>

<script>
export default {
  name: "Accordion",
  data: function() {
    return {
      isAccordionOpen: false
    };
  },
  methods: {
    toggleAccordion() {
      this.isAccordionOpen = !this.isAccordionOpen;
    }
  }
};
</script>