React.js 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开发。它使创建交互式 UI 变得轻而易举。React 采用组件化的方式来构建应用,每个组件都有自己的状态,当数据改变时,React 会高效地更新和渲染正确的组件。
环境准备
在开始之前,你需要有 Node.js
和 npm
(Node.js 包管理器)安装在你的计算机上。这将用于管理项目的依赖。
创建 React 应用
最简单的开始一个 React 项目的方法是使用 Create React App,这是一个由 Facebook 官方支持的命令行工具,用于创建 React 应用模板。
- 打开终端(命令行)。
- 运行以下命令来创建一个新的 React 应用:
npx create-react-app my-react-app
- 进入应用文件夹:
cd my-react-app
- 启动开发服务器:
npm start
这会启动一个本地开发服务器,通常在 http://localhost:3000
。你的默认浏览器会自动打开这个地址,并展示你的 React 应用。
理解 React 应用的结构
在你的项目文件夹中,最重要的几个文件和目录如下:
- public/index.html:这是应用的单页面 HTML 文件。
- src/index.js:这是 React 应用的 JavaScript 入口文件。
- src/App.js:这是一个 React 组件,代表了应用的主视图。
编写你的第一个组件
React 组件可以使用 ES6 的类或函数来创建。使用函数组件是最简单的开始方式。让我们修改 src/App.js
来创建一个简单的组件。
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
状态和生命周期
组件的状态是 React 应用中的重要概念。状态是一个对象,存储有关组件的信息,它可以随时间变化而变化。使用 useState
钩子(Hook),函数组件也可以有状态。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
JSX
JSX 是一种 JavaScript 的语法扩展,它看起来很像 XML。它允许我们在 JavaScript 代码中写 HTML。React 使用 JSX 来描述用户界面。
Props
Props(属性)是组件的输入,它们是从父组件传递到子组件的数据。子组件通过 props
接收来自父组件的数据。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
学习资源
- React 官方文档:这是学习 React 最好的资源。文档详细介绍了 React 的所有概念,并提供了许多示例。
- Create React App 文档:了解更多关于 Create React App 的信息。
通过以上步骤,你应该能够开始使用 React.js 了。记住,实践是最好的学习方法,不断尝试和构建项目将帮助你更好地理解 React。