使用.jsx和.js文件书写react代码的区别

一、JSX文件

1. JSX文件允许直接在JavaScript代码中嵌入类似HTML的标记，表达UI组件的结构。
2. JSX语法使得代码更加直观和易读，类似于模板语言，方便开发人员理解和维护。
3. JSX文件在编译时会被转换为常规的JavaScript代码，React.createElement函数的调用被插入到代码中。
4. JSX文件通常使用.jsx扩展名，以便编辑器和构建工具能够识别并提供相应的语法高亮和提示。

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

二、JS文件

1. 在js文件中，不能直接使用JSX语法，需要手动调用React.createElement方法来创建React元素。
2. 编写React组件时，需要用纯JavaScript方式描述组件的结构，这种方式相对繁琐。
3. JS文件相对于JSX文件更加灵活，可以更好地控制React元素的创建和渲染过程。

function MyComponent() {
  return React.createElement('div', null, 'Hello, World!');
}