一、React 是什么

React 是一个用来构建用户界面的 JavaScript 库，由 Facebook 开发。它特别适合用来开发单页应用（SPA），也就是那种页面不需要重新加载就能更新内容的应用。React 的核心思想是把复杂的用户界面拆分成一个个小的、可复用的组件，就像搭积木一样，方便开发和维护。

二、搭建开发环境

1. 安装 Node.js

   • 首先得安装 Node.js，因为它提供了运行 JavaScript 的环境。去 Node.js 官网下载安装包，安装过程很简单，一路下一步就行。

2. 创建 React 项目

   • 安装好 Node.js 后，打开命令行工具，输入以下命令来创建一个 React 项目：

     npx create-react-app my-react-app

     这里的 my-react-app 是你项目的名称，你可以按自己的喜好改。创建完成后，进入项目文件夹：

     cd my-react-app

3. 启动开发服务器

   • 在项目文件夹内，运行以下命令启动开发服务器：

     npm start

     这时浏览器会自动打开一个页面，显示默认的 React 欢迎界面。

三、编写第一个 React 组件

1. 修改默认组件

   • 找到项目中的 src/App.js 文件，这是默认的组件文件。把里面的内容改成这样：

     jsx复制

     function App() {
       return (
         <div className="App">
           <h1>Hello, React!</h1>
           <p>这是我的第一个 React 组件。</p>
         </div>
       );
     }
     export default App;

   • 保存文件后，浏览器页面会自动刷新，你就能看到自己写的文字了。

2. 理解 JSX

   • 刚才代码中的 <h1>Hello, React!</h1> 这种看起来像 HTML 的东西其实是 JSX。JSX 是 JavaScript 的一种语法扩展，它让代码看起来更像 HTML，方便我们描述 UI 结构，但最终会被转换成 JavaScript 对象。

四、状态管理（useState）

1. 添加计数器功能

   • 在 App.js 中，我们来做一个简单的计数器。修改代码如下：

     jsx复制

     import React, { useState } from 'react';
     
     function App() {
       const [count, setCount] = useState(0);
     
       return (
         <div className="App">
           <h1>计数器</h1>
           <p>当前计数：{count}</p>
           <button onClick={() => setCount(count + 1)}>加一</button>
         </div>
       );
     }
     export default App;

   • 这里的 useState 是 React 提供的一个 Hook，用来在函数组件中添加状态。count 是状态变量，setCount 是用来更新状态的函数。每次点击按钮，count 的值就会加一，页面也会自动更新。

2. 理解状态的作用

   • 状态就像是组件的“记忆”，它可以存储一些数据，并且当状态改变时，组件会重新渲染，把最新的状态显示出来。

五、组件间通信（props）

1. 创建子组件

   • 在 src 文件夹下新建一个 components 文件夹，再在里面新建一个 CounterButton.js 文件。写入以下代码：

     jsx复制

     import React from 'react';
     
     function CounterButton({ count, onClick }) {
       return (
         <button onClick={onClick}>
           点了 {count} 次
         </button>
       );
     }
     export default CounterButton;

   • 这是一个子组件，它接收 count 和 onClick 这两个 props。

2. 在父组件中使用子组件

   • 修改 App.js 文件，把 CounterButton 组件引入并使用：

     jsx复制

     import React, { useState } from 'react';
     import CounterButton from './components/CounterButton';
     
     function App() {
       const [count, setCount] = useState(0);
     
       return (
         <div className="App">
           <h1>计数器</h1>
           <CounterButton count={count} onClick={() => setCount(count + 1)} />
         </div>
       );
     }
     export default App;

   • 这样，父组件 App 把 count 和点击事件处理函数通过 props 传递给了子组件 CounterButton。

六、下一步学习方向

1. 深入学习 Hooks

   • 除了 useState，React 还有很多其他有用的 Hooks，比如 useEffect 用于处理副作用（如 API 请求），useContext 用于访问上下文。

2. 学习路由管理

   • 如果你的应用有多个页面，就需要用到 React Router 来管理路由。

3. 状态管理进阶

   • 对于复杂的应用，可以学习 Redux 或 Context API 这样的状态管理工具。

公众号：周盛欢AI