React入门：从一个简单的Hello World开始

理解你的第一个React组件

javascript 复制代码

const App = () => {
  const now = new Date()
  const a = 10
  const b = 20

  return (
    <div>
      Hello world, it is {now.toString()}
      <br />
      {a} plus {b} is {a + b}
    </div>
  )
}

我们可以将这个组件拆解为几个核心部分进行详细理解：

1. 函数组件的定义

复制代码

const App = () => {
  // 组件逻辑
}

这是React函数组件的基本结构，使用箭头函数定义一个名为App的组件。这种写法是React 16.8版本之后的主流写法，简洁且直观。

代码含义解析

const App：使用ES6的const关键字声明一个常量组件
() => {}：箭头函数语法，等价于传统的函数声明方式
组件名首字母大写：这是React的约定，用于区分组件和普通HTML标签

2. 组件内部的变量声明

复制代码

const now = new Date()
const a = 10
const b = 20

在组件内部，我们可以像普通JavaScript代码一样声明变量。这里我们创建了三个变量：

now：保存当前的日期时间对象，用于展示动态时间
a和b：两个简单的数值变量，用于演示JSX中的表达式计算

3. JSX是什么？

JSX（JavaScript XML）是React特有的语法扩展，允许我们在JavaScript代码中直接编写类似HTML的结构。它不是HTML，但看起来非常像HTML，是React的核心特性之一。

JSX的核心特点

JavaScript与HTML融合：可以在JSX中直接嵌入JavaScript表达式
自动转义：JSX会自动转义用户输入，防止XSS攻击
组件化思想：每个JSX片段可以作为独立的组件复用
编译为JavaScript ：最终会被Babel编译为React.createElement()调用

代码中的JSX解析

复制代码

return (
  <div>
    Hello world, it is {now.toString()}
    <br />
    {a} plus {b} is {a + b}
  </div>
)

<div>：根元素，React组件必须有且仅有一个根元素
{now.toString()}：使用大括号嵌入JavaScript表达式，将当前时间转换为字符串显示
<br />：换行标签，注意JSX中必须闭合所有标签
{a} plus {b} is {a + b}：展示了如何在JSX中进行简单的算术运算，动态计算结果

JSX与HTML的主要区别

特性	JSX	HTML
class属性	className	class
style属性	接收对象	接收字符串
事件处理	驼峰命名（onClick）	小写（onclick）
条件渲染	支持三元表达式	不支持
列表渲染	支持map循环	不支持

如何运行这个组件

要让这个组件在浏览器中运行，你需要：

创建React项目（可以使用Create React App工具快速搭建）
复制代码
```
npx create-react-app my-first-react-app
cd my-first-react-app
```
替换代码 ：将src/App.js文件的内容替换为我们的组件代码
启动开发服务器 （通常使用npm start命令）
复制代码
```
npm start
```

运行后，你将在浏览器中看到类似以下的内容：

复制代码

Hello world, it is Sat Dec 28 2025 23:14:37 GMT+0800 (中国标准时间)
10 plus 20 is 30

代码的深层含义

1. 动态时间展示

{now.toString()}会在组件渲染时获取当前时间并显示，每次组件重新渲染时都会更新为最新时间。

2. 表达式计算

{a + b}会在组件渲染时计算10+20的结果并显示为30，这展示了React如何将JavaScript逻辑与UI展示结合。

3. 组件的可复用性

这个App组件可以在其他组件中被引用和复用，体现了React的组件化思想：

复制代码

import App from './App'

const Main = () => {
  return (
    <div>
      <h1>我的React应用</h1>
      <App />
    </div>
  )
}

进一步扩展的方向

从这个简单的示例出发，你可以继续探索React的更多核心概念：

1. 使用React Hooks管理状态

如果需要让组件的内容动态更新，可以使用useState Hook：

复制代码

import { useState } from 'react'

const App = () => {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击增加</button>
    </div>
  )
}

2. 处理用户输入

可以扩展组件，添加表单输入功能，实现数据双向绑定：

复制代码

import { useState } from 'react'

const App = () => {
  const [name, setName] = useState('')
  
  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)}
        placeholder="请输入你的名字"
      />
      <p>你好，{name || '陌生人'}！</p>
    </div>
  )
}

3. 组件的组合与复用

随着应用的增长，你可以将大组件拆分为小组件，提高代码的复用性：

复制代码

const Header = () => <h1>我的React应用</h1>

const Content = () => <p>这是应用的主要内容</p>

const App = () => {
  return (
    <div>
      <Header />
      <Content />
    </div>
  )
}

总结

这个简单的Hello World示例虽然短小，但包含了React开发的核心思想：

组件化开发：将UI拆分为独立可复用的组件
函数式编程：使用纯函数定义组件逻辑
JSX语法：将JavaScript与HTML融合的独特语法
动态内容渲染：通过表达式实现数据与UI的绑定