React vs Vue: A Comparative Guide to Basic Syntax

1. Introduction

React and Vue.js are both highly popular libraries in frontend development. This article compares their basic syntax to help you understand their differences and choose the right tool for your project.

2. Component Creation

Definition and Characteristics

Vue.js

Components are written in a file format consisting of <template>, <script>, and <style> sections. This clear separation of concerns improves code organization and development efficiency. Vue.js components can exchange data through parent-child relationships.

React

Components are defined as functions or classes using JSX for UI description. JSX is a syntax that combines JavaScript and HTML, making UI construction more straightforward. React components exchange data through props.

Code Samples

Vue.js

<template>
  <div>Hello, Vue!</div>
</template>
<script>
export default {
  name: "MyComponent"
}
</script>
<style scoped>
/* Styles go here */
</style>

React

function MyComponent() {
  return <div>Hello, React!</div>;
}

3. State Management

Definition and Characteristics

Vue.js

Uses the data property to manage reactive data. The data property manages component state, and when it changes, the UI automatically updates. Vue.js's reactive system detects data changes and automatically updates the UI.

React

Uses the state object, and in function components, utilizes the useState hook. The useState hook simplifies state management and updates. React's state management requires explicit state updates but makes state management more transparent.

Code Samples

Vue.js

<script>
export default {
  data() {
    return { count: 0 };
  }
}
</script>

React

const [count, setCount] = useState(0);

4. Lifecycle Methods

Definition and Characteristics

Vue.js

Uses lifecycle methods like beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed. These methods execute at different stages of a component's lifecycle to handle initialization, cleanup, and updates.

React

Class components use methods like componentDidMount, componentDidUpdate, and componentWillUnmount. Function components use the useEffect hook. The useEffect hook manages side effects and executes based on component lifecycle.

Code Samples

Vue.js

<script>
export default {
  beforeCreate() {
    console.log("Vue component beforeCreate");
  },
  created() {
    console.log("Vue component created");
  },
  mounted() {
    console.log("Vue component mounted");
  }
}
</script>

React

import { useEffect, useState } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log("React component mounted");
    return () => {
      console.log("React component will unmount");
    };
  }, []);

  return <div>Component Content</div>;
}

5. Event Handling

Definition and Characteristics

Vue.js

Uses directives like @click and @input. These directives make it easy to add event listeners. Vue.js directives simplify event handling.

React

Event listeners are written in camelCase and passed directly to JSX. Event listeners are specified as JSX attributes, integrating UI construction with event handling.

Code Samples

Vue.js

<button @click="handleClick">Click Me</button>

React

<button onClick={handleClick}>Click Me</button>

6. Conditional Rendering

Definition and Characteristics

Vue.js

Uses v-if and v-else directives. These directives control UI rendering based on conditions. Vue.js's conditional rendering makes UI control easier.

React

Conditions are written directly in JSX. Conditions are evaluated as JSX expressions, allowing more flexible UI rendering control.

Code Samples

Vue.js

<div v-if="isLoggedIn">Welcome!</div>
<div v-else>Please log in.</div>

React

{isLoggedIn ? <div>Welcome!</div> : <div>Please log in.</div>}

7. List Rendering

Definition and Characteristics

Vue.js

Uses the v-for directive. The directive renders UI for each array element. Vue.js's list rendering makes it easy to render UI for array elements.

React

Uses the map method. The map method renders UI for each array element. React's list rendering is a powerful tool for rendering UI from array elements.

Code Samples

Vue.js

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

React

items.map(item => <li key={item.id}>{item.name}</li>);

8. Form Binding

Definition and Characteristics

Vue.js

Uses v-model for easy two-way binding. User input is automatically reflected in the data. Vue.js's form binding makes user interface development easier by automatically reflecting form input in data.

React

Explicitly manages values through onChange events. User input is explicitly reflected in the data. React's form binding allows finer control by explicitly reflecting form input in data.

Code Samples

Vue.js

<input v-model="name" />

React

<input value={name} onChange={e => setName(e.target.value)} />

9. Conclusion

React and Vue.js each have their own unique characteristics. Use this comparison as a reference to choose the framework that best suits your project needs.