- 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 APP中引入事件
- ReactJS - 状态管理
- ReactJS - 状态管理 API
- ReactJS - 无状态组件
- ReactJS - 使用 React Hooks 进行状态管理
- ReactJS - 使用 React 钩子的组件生命周期
- ReactJS - 组件的布局
- ReactJS - 分页
- ReactJS - Material 用户界面
- ReactJS - Http 客户端编程
- ReactJS - 表单编程
- ReactJS - 受控组件
- ReactJS - 不受控制的组件
- ReactJS - Formik
- ReactJS - 条件渲染
- ReactJS - 列表
- ReactJS - 键
- ReactJS - 路由
- ReactJS - 冗余
- ReactJS - 动画
- ReactJS - 引导程序
- ReactJS - 地图
- ReactJS - 表格
- ReactJS - 使用 Flux 管理状态
- ReactJS - 测试
- ReactJS - CLI 命令
- ReactJS - 构建和部署
- ReactJS - 示例
- ReactJS - 钩子简介
- ReactJS - 使用 useState
- ReactJS - 使用 useEffect
- ReactJS - 使用 useContext
- ReactJS - 使用 useRef
- ReactJS - 使用 useReducer
- ReactJS - 使用 useCallback
- ReactJS - 使用 useMemo
- ReactJS - 自定义钩子
- ReactJS - 可访问性
- ReactJS - 代码拆分
- ReactJS - 上下文
- ReactJS - 错误边界
- ReactJS - 转发引用
- ReactJS - 片段
- ReactJS - 高阶组件
- ReactJS - 与其他库集成
- ReactJS - 优化性能
- ReactJS - 分析器 API
- ReactJS - 门户
- ReactJS - 没有 ES6 ECMAScript 的 React
- ReactJS - 没有 JSX 的 React
- ReactJS - 协调
- ReactJS - 引用和 DOM
- ReactJS - 渲染属性
- ReactJS - 静态类型检查
- ReactJS - 严格模式
- ReactJS - Web 组件
- ReactJS - 日期选择器
- ReactJS - Helmet
- ReactJS - 内联样式
- ReactJS - 属性类型
- ReactJS - 浏览器路由器
- ReactJS - DOM
- ReactJS - 旋转木马
- ReactJS - 图标
- ReactJS - 表单组件
- ReactJS - 参考 API
ReactJS - CLI 命令
React 有自己的命令行界面 (CLI) 命令。但是,这些 CLI 命令目前仅用于使用命令行创建 react 应用程序的合格版本。这将包含一个默认模板作为其设计,因此以这种方式创建的所有 react 应用程序都将具有很大的一致性,因为它们都具有相同的结构。
React 中的基本 CLI 命令
在本章中,让我们学习 Create React App 命令行应用程序中可用的基本命令。
创建新应用程序
创建 React App 提供了多种创建 React 应用程序的方法。
使用 npx 脚本。
npx create-react-app <react-app-name>
npx create-react-app hello-react-app
npx create-react-app hello-react-app
使用 npm 包管理器。
npm init react-app <react-app-name>
npm init react-app hello-react-app
npm init react-app hello-react-app
使用 yarn 包管理器。
yarn init react-app <react-app-name>
yarn init react-app hello-react-app
yarn init react-app hello-react-app
选择模板
创建 React 应用程序使用默认模板创建 React 应用程序。模板是指具有某些内置功能的初始代码。npm 包服务器中有数百个具有许多高级功能的模板。Create React App 允许用户通过 -template 命令行开关来选择模板。
create-react-app my-app --template typescript
上述命令将从 npm 服务器使用 cra-template-typescript 包创建 react 应用程序。
安装依赖项
React 依赖包可以使用普通的 npm 或 yarn package 命令进行安装,因为 React 使用 npm 和 yarn 推荐的项目结构。
使用 npm 包管理器。
npm install --save react-router-dom
使用 yarn 包管理器。
yarn add react-router-dom
运行应用程序
React 应用程序可以使用 npm 或 yarn 命令启动,具体取决于项目中使用的包管理器。
使用 npm 包管理器。
npm start
使用 yarn 包管理器。
yarn start
要在安全模式 (HTTPS) 下运行应用程序,请设置环境变量 HTTPS 并将其设置为 true,然后再启动应用程序。例如,在Windows命令提示符(cmd.exe)中,以下命令设置HTTPS并启动应用程序为HTTPS模式。
set HTTPS=true && npm start