- 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 - 使用 React Hooks 进行状态管理
- ReactJS - 使用 React Hooks 进行组件生命周期管理
- ReactJS - 布局组件
- ReactJS - 分页
- ReactJS - Material UI
- ReactJS - Http 客户端编程
- ReactJS - 表单编程
- ReactJS - 受控组件
- ReactJS - 非受控组件
- ReactJS - Formik
- ReactJS - 条件渲染
- ReactJS - 列表
- ReactJS - Keys
- ReactJS - 路由
- ReactJS - Redux
- ReactJS - 动画
- ReactJS - Bootstrap
- ReactJS - 地图
- 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 - 端口
- ReactJS - 无 ES6 ECMAScript 的 React
- ReactJS - 无 JSX 的 React
- ReactJS - 调和
- ReactJS - Refs 和 DOM
- ReactJS - 渲染 Props
- ReactJS - 静态类型检查
- ReactJS - 严格模式
- ReactJS - Web Components
- 其他概念
- ReactJS - 日期选择器
- ReactJS - Helmet
- ReactJS - 内联样式
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - 走马灯
- ReactJS - 图标
- ReactJS - 表单组件
- ReactJS - 参考 API
- ReactJS 有用资源
- ReactJS - 快速指南
- 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 应用。
安装依赖项
React 依赖项包可以使用正常的npm或yarn包命令安装,因为 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
广告