React 教程入门

React 是一个用于构建用户界面的 JavaScript 库，它由 Facebook 开发并维护。React 的核心理念是组件化，通过将界面拆分成独立的组件，可以更方便地管理和维护界面代码。

在本章节中，我们将介绍 React 的基本概念和用法，让你快速上手 React 开发。

什么是 React

React 是一个基于组件化的前端框架，它使用 JSX 语法来描述界面，将界面拆分成多个独立的组件，并通过组件间的数据传递来构建复杂的用户界面。

创建 React 应用

要开始使用 React，首先需要安装 Node.js 和 npm（Node 包管理工具）。然后通过 npm 安装 create-react-app 工具来创建一个新的 React 应用：

npx create-react-app my-app
cd my-app
npm start

以上命令将创建一个名为 my-app 的新 React 应用，并启动开发服务器，你可以在浏览器中访问 http://localhost:3000 来查看应用。

编写第一个 React 组件

在 src 目录下创建一个名为 App.js 的文件，编写一个简单的 React 组件：

-- -------------------- ---- -------
------ ----- ---- --------

-------- ----- -
  ------ -
    -----
      ---------- -----------
    ------
  --
-

------ ------- ----

在 src 目录下创建一个名为 index.js 的文件，渲染上面创建的组件到页面上：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

以上代码将在页面上显示一个包含 "Hello, React!" 文字的标题。

组件间的数据传递

在 React 中，组件间通过 props 来传递数据。例如，我们可以向组件传递一个名为 name 的属性：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React" />;
}

以上代码将在页面上显示 "Hello, React!"。

结语

本章节介绍了 React 的基本概念和用法，包括创建 React 应用、编写组件以及组件间的数据传递。希望通过本章节的学习，你能够对 React 有一个初步的了解，为进一步学习 React 打下基础。