react和vue的代码

React和Vue都是流行的前端JavaScript框架，它们都采用了组件化的思想，使得构建用户界面变得更加模块化。

**React**：
React的核心是一个名为`JSX`的语法扩展，它允许开发者将HTML元素和JavaScript混杂在一起编写UI。创建React组件的基本结构如下：

import React from 'react';

// 定义一个名为`MyComponent`的React组件
function MyComponent(props) {
  return (
    <div>
      {/* 这里可以访问props并渲染内容 */}
      {props.name}
    </div>
  );
}

export default MyComponent;

在React应用中，通常会有一个主入口文件`App.js`来挂载整个应用：

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent'; // 引入刚才的组件

ReactDOM.render(<MyComponent name="Hello, World!"/>, document.getElementById('root'));

**Vue**：
Vue的代码结构通常使用`template`标签配合`<script>`标签定义组件。组件也包含`data`、`methods`等部分：

<!-- main.vue -->
<template>
  <div>
    <h1>{{ message }}</h1> <!-- 使用v-bind绑定数据到DOM属性 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
};
</script>

Vue也有类似React的单文件组件（.vue 文件），将模板、脚本和样式集成在一起：

<!-- main.vue -->
<template>
  <div>
    <h1 v-text="message"></h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
};
</style>