009 从零重构main.jsx文件：构建第一个箭头函数组件

为了深入理解 React组件的构建逻辑，我们可以删除 main.jsx 文件中的所有内容以及 src 和public文件夹中的所有文件，只保留main.js文，从零开始编写项目核心代码。你可以直接删除，也可以使用rm -rf递归命令删除，如下所示：

# 删除冗余文件
rm -rf src/index.css src/App.css assets/*
# 递归删除assets文件夹
rm -rf assets
# 清空public目录
rm -rf public/*

# 删除冗余文件
rm -rf src/index.css src/App.css assets/*
# 递归删除assets文件夹
rm -rf assets
# 清空public目录
rm -rf public/*

定义基础箭头函数组件

函数式组件是 React 19 中最主流的组件定义方式，核心采用箭头函数结构。首先在 main.jsx 中使用箭头函数定义最基础的App组件。在这个 App 组件的 return 语句中渲染一个简单的标题:

const App =()=>{
  return(
    <div>    
      <h1>React is fun</h1>
    </div>
    )
}

const App =()=>{
  return(
    <div>    
      <h1>React is fun</h1>
    </div>
    )
}

在上面这段代码中，return 语句只返回一个简单 JSX 元素，而且只占一行，因此不需要使用括号包括输出内容。但是如果 return 语句返回多行内容或者多个同级元素，则需要使用括号包裹返回的内容。

在 React 中，组件返回的内容不是HTML元素，而是形似 HTML 的 JavaScript 语法扩展，简称JSX。其本身并非是合法的 JavaScript 代码，是一种语法糖，需要通过 Babel 等转译工具转换成标准的 JavaScript 代码。因此上面示例中的 JSX 代码，最终会被编译为下面的JavaScript函数 React.createElement 调用：

import React from 'react';

const App = () => {
  return React.createElement('h1', null, 'Hello React 19!')
}

import React from 'react';

const App = () => {
  return React.createElement('h1', null, 'Hello React 19!')
}

React.createElement 函数包含三个参数，第一个参数是元素类型，示例中的 HTML 的 h1 标签；第二个参数是元素属性，null 表示无 id、className 等HTML属性）；第三个参数是元素的子节点,即 h1 标签的文本内容。React.createElement函数会创建一个描述 DOM 结构的普通 JavaScript 对象，即 React 元素，这个对象大致如下：

const react_element = {
  types: "h1",
  props: {
    children: "Hello World"
  },
  key: null,
  ref: null,
}

const react_element = {
  types: "h1",
  props: {
    children: "Hello World"
  },
  key: null,
  ref: null,
}

React 运行时会将这个对象渲染到页面真实的 DOM 元素中，页面显示就是 props 属性对象的 children 属性的值。