Home / IOS Development / Learning Vue from React – Digital Product Development Agency

Learning Vue from React – Digital Product Development Agency



Avatar

Picking up a new framework or library can seem daunting. The good news is that React and Vue are two popular, well-supported tools for front-end development, and if you already know one, you can leverage your knowledge to be productive with the other relatively quickly.

Both are JavaScript based, use a virtual DOM, and use composable, responsive components to build applications. They both have CLIs that take care of the boiler plate required to spin up an application quickly and easily. This blog is written with React developers teaching Vue in mind, but if you̵

7;re a Vue developer teaching React, stay tuned. Many of the big, practical differences between the two come to syntax, and knowing that one of the two can be easily exploited to teach the other.

By exploring two applications, one written in React and one written in Vue, that send out identical content in the browser, compare how they achieve the same goal (both were scaffolded with their respective CLIs, Create React App and Vue CLI). Both applications request an API that returns a series of music genres to be rendered to a shortlist. You can find archives for the applications below if you want to clone them and experiment, or you can just read along with the code snippets. Both applications are admittedly cumbersome solutions to the problem presented, but should provide enough context to understand the basics of both technologies.

App

try the app screen with genres of musicThe main input for both applications is component. Comparison of React and Vue components, it may not be immediately clear that React uses JSX to create component structure, while Vue uses HTML. This will become clearer as you move forward.

What stands out is that not only does the Vue component import the child components it needs, it also registers them in the exported object in the script code. If you are a React developer and forget to do this, you will get a big, ugly mistake. Vue registration of components in this way allows sub-components that do not need updating to avoid reproduction.

// App.js
import React from "react";
import GenreList from "./GenreList";
import "./App.css";

const App = () => (
  

Genres

); export default App;
// App.vue




According to the convention, Vue also provides functionality that is identical to what style components provide for React. By adding scoped attribute of the style code in a Vue component, a unique ID is added to the component that only limits the styles of that component. Both CRA and Vue CLI allow easy setup for using SCSS instead of CSS.

GenreList

make heavy lifting of the application, by making your API call, managing the state of the application and reproducing a list of genre cards. Both applications import an identical one genreService function that provides data for the component. Each application specifies the response to their internal state administration and is then repeated across the array of genre objects to render genre maps.

In the React version, you make the API call inside a functional component with useEffect hook (this can also be achieved in a class component with componentDidMount life cycle method), and update the state with the response data using useState hook (in a class component, you will call setState on a successful response). You can then map over the genres array in state and gang but for each genre.

// GenreList.js
const GenreList = () => {
  const [genres, setGenres] = useState([]);

  useEffect(() => {
    genreService
      .getGenres()
      .then((response) => {
        setGenres(response.data);
      })
      .catch((error) => console.log("There was an error", error));
  }, []);

  return (
    
{genres.map((genre) => ( ))}
); };

Vue 2 does not have the concept of functional versus class components (although Vue 3 will). IN GenreList.vue, do you use mounted life cycle method to make your API call and you save it in data, which is analogous to React state. In your data description, you provide genres a default value for an empty array so that you have no problems when iterating across genres before the API call resolves.

// GenreList.vue




The syntax for iterating over a list in Vue is slightly different than React. Because you use HTML instead of JSX, you do not have access to JavaScript in your template, so Vue uses directives or special attributes in the selection, which serve as instructions for Vue on what to do with DOM. In this case, you use v-for directive to tell to render a component (or HTML element) for each element in a list. In addition, you can not use curly brackets to send props to child components in Vue, so you must use v-bind directives for transferring props to a child component. This can be written as:

  • or

  • Both do the same thing, the other is just a brief syntax.

    GenreCard

    The last component to review in this application is , which takes a genre object as a prop and reproduces the data from that object.

    I React, is a functional component that destroys props on the way in and reproduces a single card with a genre and a description.

    // GenreCard.js
    const GenreCard = ({ genre }) => {
      return (
        

    {genre.genre}

    {genre.description}

    ); }; export default GenreCard;

    Vue implementation of is similar, even if you are required to describe the props the component expects to receive. This is very similar to React’s prop-types, although it is not optional in Vue. Vue also uses double curly brackets, called “mustaches”, to inject data into a template, unlike Reacts’ single set of curly brackets.

    // GenreList.vue
    
    
    
    
    

    Wrapping

    If you have used React or Vue in your development, hopefully this blog has encouraged you to try something new that you are not familiar with. Differences can be expected, but these two technologies are very similar in terms of philosophy, implementation, speed and ease of use. Developers should not be discouraged from moving between the two. In fact, it should be encouraged to work on both, because it makes developers more versatile and expands the range of projects they can work on.

    Avatar




    Source link