React 教程
React 是一个用于构建用户界面的 JavaScript 库,它由 Facebook 开发并维护。React 的核心理念是组件化,通过将界面拆分成独立的组件,可以更方便地管理和维护界面代码。
在本章节中,我们将介绍 React 的基本概念和用法,让你快速上手 React 开发。
什么是 React
React 是一个基于组件化的前端框架,它使用 JSX 语法来描述界面,将界面拆分成多个独立的组件,并通过组件间的数据传递来构建复杂的用户界面。
创建 React 应用
要开始使用 React,首先需要安装 Node.js 和 npm(Node 包管理工具)。然后通过 npm 安装 create-react-app 工具来创建一个新的 React 应用:
--- ---------------- ------ -- ------ --- -----
以上命令将创建一个名为 my-app 的新 React 应用,并启动开发服务器,你可以在浏览器中访问 http://localhost:3000 来查看应用。
编写第一个 React 组件
在 src 目录下创建一个名为 App.js 的文件,编写一个简单的 React 组件:
------ ----- ---- -------- -------- ----- - ------ - ----- ---------- ----------- ------ -- - ------ ------- ----
在 src 目录下创建一个名为 index.js 的文件,渲染上面创建的组件到页面上:
------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- -------------------- --- ---------------------------------
以上代码将在页面上显示一个包含 "Hello, React!" 文字的标题。
组件间的数据传递
在 React 中,组件间通过 props 来传递数据。例如,我们可以向组件传递一个名为 name 的属性:
-------- --------------- - ------ ---------- ------------------- - -------- ----- - ------ --------- ------------ --- -
以上代码将在页面上显示 "Hello, React!"。
结语
本章节介绍了 React 的基本概念和用法,包括创建 React 应用、编写组件以及组件间的数据传递。希望通过本章节的学习,你能够对 React 有一个初步的了解,为进一步学习 React 打下基础。