React 组件和 JSX 语法

React 组件

React 组件和 Vue 组件没啥区别，都是将局部的代码封装到一个新的文件中，这样可以使代码易于维护。

下载 React 扩展可以在 vscode 中快速生成一个新的 React 组件：

常用快捷键：

• imr：自动导入 React
• imrc：自动导入 React 和 Component
• cc：生成无 constructor 的组件类，并导出
• ccc：生成包含 constructor 的组件类，并导出。

更多快捷键：https://blog.csdn.net/qq_39721418/article/details/104093921

定义 React 组件

一个 react 组件实际上就是一个 js 文件，如下代码定义了一个 test 组件：

import React, {
    Component } from 'react';

class Test extends Component {
   
  render() {
    
    return (
      <div>
        这里是 test 组件
      </div>
    );
  }
}
 
export default Test;

在 index.js 中引入刚刚定义的 test 组件，并和 app 组件一起渲染：

import Test from "./test";
ReactDOM.render(
    <React.StrictMode>
        {
   /* 这里使用了 jsx 语法需要引入 React 来解析 */}
        <div>
            <App />
            {
   /* 和 vue 一样，只能渲染一个组件，可以将两个组件放到同一个 div 中 */}
            <Test />
        </div>
    </React.StrictMode>,
    document.getElementById("root")
);

浏览器渲染结果：

注意事项

需要注意的是，如果想要在 index.js 中或者其他文件中使用组件，组件名需要使用大驼峰命名法。例如官网给出的 hello world 示例：

组件文件&