React前端框架

最新推荐文章于 2025-04-27 20:22:15 发布

周盛欢

最新推荐文章于 2025-04-27 20:22:15 发布

阅读量994

点赞数 7

文章标签：前端框架

本文链接：https://blog.youkuaiyun.com/qq_33449977/article/details/145674038

版权

嘿，小伙伴们！今天咱们来聊聊 React，这是一个超火的前端框架，用来做网页开发特别方便。别担心，就算你是零基础，跟着我一步一步来，保证你也能轻松上手。React 的核心思想是用组件来搭建页面，就像搭积木一样，简单又有趣。下面，咱们就开始吧！

第一步：了解 React 是啥

React 是一个用来构建用户界面的 JavaScript 库，它是由 Facebook 开发的。为啥要用 React 呢？因为它能让你用简单的方式写出高性能的网页。React 的最大特点是“组件化”，你可以把页面拆成一个个小模块，然后像拼图一样组合起来。这样一来，代码不仅容易维护，还能重复使用。

第二步：搭建开发环境

开发 React 应用，我们需要一个开发环境。React 官方推荐用 Create React App 来快速搭建项目，它能帮你搞定所有繁琐的配置，让你直接开始写代码。

安装 Node.js
首先，你需要安装 Node.js，因为 Create React App 是基于 Node.js 的。去 Node.js 官网下载安装包，按照提示安装就好啦。
创建 React 项目
打开终端（Windows 是命令提示符，Mac 是终端），输入以下命令来安装 Create React App：

bash复制
```
npx create-react-app my-first-react-app
```
这里的 my-first-react-app 是你的项目名字，你可以随便起一个自己喜欢的名字。
进入项目并启动
安装完成后，进入项目目录：

bash复制
```
cd my-first-react-app
```
然后运行项目：

bash复制
```
npm start
```
这时候，你的浏览器会自动打开一个页面，显示 React 的欢迎信息。恭喜你，你的开发环境已经搭建好了！

第三步：创建第一个组件

React 的核心是组件，组件就像是一个个小模块，你可以用它们来搭建页面。React 的组件可以用 JavaScript 的函数或者类来定义，但我们现在先用函数来写，因为它更简单。

找到组件文件夹
在项目目录中，找到 src 文件夹，里面有一个 App.js 文件，这是 React 项目的入口组件。
修改 App.js 文件
打开 App.js 文件，把里面的内容改成这样：

jsx复制
```
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;
```
这里简单解释一下：
- import React from 'react'; 是告诉 React，我们要用它的功能。
- function App() 是一个函数组件，它的名字叫 App。
- return 里面的内容是组件的结构，用 JSX 写的，JSX 是一种看起来像 HTML 的语法，但它其实是 JavaScript 的一部分。
- export default App; 是把 App 组件暴露出去，这样其他文件就可以用它了。
查看效果
刷新浏览器，你会看到页面上显示了“Hello, React!”。恭喜你，你的第一个 React 组件已经成功运行啦！

第四步：创建更多组件

现在我们来创建一个新组件，比如一个按钮组件。React 的强大之处在于你可以把页面拆成很多小组件，然后组合起来。

创建新组件文件
在 src 文件夹里，新建一个文件，叫 Button.js。

编写按钮组件代码
打开 Button.js 文件，写上以下代码：

jsx复制

import React from 'react';

function Button() {
  return (
    <button>点击我</button>
  );
}

export default Button;

这个组件就是一个简单的按钮。

在 App.js 中使用按钮组件
打开 App.js 文件，引入刚刚创建的 Button 组件，并把它用起来：

jsx复制

import React from 'react';
import Button from './Button'; // 引入 Button 组件

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Button /> {/* 使用 Button 组件 */}
    </div>
  );
}

export default App;

查看效果
刷新浏览器，你会看到页面上多了一个按钮，上面写着“点击我”。

第五步：给组件加点交互

React 的组件不仅可以显示内容，还可以和用户交互。比如，我们给按钮加一个点击事件，点击后弹出一个提示框。

修改按钮组件代码
打开 Button.js 文件，修改代码如下：

jsx复制

import React from 'react';

function Button() {
  function handleClick() {
    alert('按钮被点击啦！');
  }

  return (
    <button onClick={handleClick}>点击我</button>
  );
}

export default Button;

这里我们给按钮加了一个 onClick 事件，当按钮被点击时，会调用 handleClick 函数，弹出一个提示框。