ReactJS 教程

ReactJS - 主页 ReactJS - 简介 ReactJS - 路线图 ReactJS - 安装 ReactJS - 功能 ReactJS - 优势和缺点 ReactJS - 架构 ReactJS - 创建 React 应用程序 ReactJS - JSX ReactJS - 组件 ReactJS - 嵌套组件 ReactJS - 使用组件 ReactJS - 集合组件 ReactJS - 样式 ReactJS - 属性 (props) ReactJS - 使用属性创建组件 ReactJS - props 验证 ReactJS - 构造函数 ReactJS - 组件生命周期 ReactJS - 事件管理 ReactJS - 创建事件感知组件 ReactJS - Expense Manager 事件 ReactJS - 状态管理 ReactJS - 状态管理 API ReactJS - 无状态组件 ReactJS - Hooks 进行状态管理 ReactJS - Hooks 的组件生命周期 ReactJS - 布局组件 ReactJS - 分页 ReactJS - Material UI ReactJS - Http 客户端编程 ReactJS - 表单编程 ReactJS - 受控组件 ReactJS - 非受控组件 ReactJS - Formik ReactJS - 条件渲染 ReactJS - 列表 ReactJS - Key 键 ReactJS - 路由 ReactJS - Redux ReactJS - 动画 ReactJS - Bootstrap ReactJS - Map ReactJS - 表格 ReactJS - 使用 Flux 管理状态 ReactJS - 测试 ReactJS - CLI 命令 ReactJS - 构建和部署 ReactJS - 示例

Hooks

ReactJS - Hooks 简介 ReactJS - 使用 useState ReactJS - 使用 useEffect ReactJS - 使用 useContext ReactJS - 使用 useRef ReactJS - 使用 useReducer ReactJS - 使用 useCallback ReactJS - 使用 useMemo ReactJS - 自定义 Hooks

ReactJS 高级

ReactJS - 可访问性 ReactJS - 代码拆分 ReactJS - 上下文 ReactJS - 错误边界 ReactJS - 转发 Refs ReactJS - 片段 ReactJS - 高阶组件 ReactJS - 与其他库集成 ReactJS - 优化性能 ReactJS - Profiler API ReactJS - Portals ReactJS - 不使用 ES6 ECMAScript ReactJS - 不使用 JSX 的 React ReactJS - Reconciliation ReactJS - Refs 和 DOM ReactJS - 渲染道具 ReactJS - 静态类型检查 ReactJS - 严格模式 ReactJS - Web 组件

其他概念

ReactJS - 日期选择器 ReactJS - Helmet ReactJS - 内联样式 ReactJS - PropTypes ReactJS - BrowserRouter ReactJS - DOM ReactJS - 轮播 ReactJS - 图标 ReactJS - 表单组件 ReactJS - 参考 API

ReactJS 有用资源

ReactJS - 快速指南 ReactJS - 备忘录 Axios - 备忘录 ReactJS - 有用资源 ReactJS - 讨论


ReactJS - CLI 命令

React 有自己的命令行界面 (CLI) 命令。但是,这些 CLI 命令目前仅用于使用命令行创建 React 应用程序的可传递版本。这将包含一个默认模板作为其设计,因此以这种方式创建的所有 React 应用程序都将具有很好的一致性,因为它们都具有相同的结构。

React 中的基本 CLI 命令

让我们在本章中学习 Create React App 命令行应用程序中可用的基本命令。

创建新应用程序

Create React App 提供多种创建 React 应用程序的方法。

使用 npx 脚本。

npx create-react-app <react-app-name>
npx create-react-app hello-react-app

使用 npm 包管理器。

npm init react-app <react-app-name>
npm init react-app hello-react-app

使用 yarn 包管理器。

yarn init react-app <react-app-name>
yarn init react-app hello-react-app

选择模板

Create React App 使用默认模板创建 React 应用程序。模板是指具有某些内置功能的初始代码。npm 包服务器中有数百个具有许多高级功能的模板。 Create React App 允许用户通过 -template 命令行开关选择模板。

create-react-app my-app --template typescript

上述命令将使用来自 npm 服务器的 cra-template-typescript 包创建 React 应用。

安装依赖项

可以使用常规 npmyarn 包命令安装 React 依赖项包,因为 React 使用 npmyarn 推荐的项目结构。

使用 npm 包管理器。

npm install --save react-router-dom

使用 yarn 包管理器。

yarn add react-router-dom

运行应用程序

可以使用 npmyarn 命令启动 React 应用程序,具体取决于项目中使用的包管理器。

使用 npm 包管理器。

npm start

使用 yarn 包管理器。

yarn start

要在安全模式 (HTTPS) 下运行应用程序,请在启动应用程序之前设置环境变量 HTTPS 并将其设置为 true。例如,在 Windows 命令提示符 (cmd.exe) 中,以下命令设置 HTTPS 并以 HTTPS 模式启动应用程序。

set HTTPS=true && npm start