你可能不知道的 Create React App 的一些技巧

Souleigh ✨ 等级 1215 0 0

在本文中,我们将探讨create-react-app提供的鲜为人知但非常有用的功能。

让我们开始吧!

在 HTTPS 而不是 HTTP 上提供应用程序

有时我们需要在 HTTPS 上测试我们的应用程序,以在部署到生产之前检查所有 API 是否正常工作。

Create-react-app 提供了一种简单的方法来做到这一点。

.env在您的项目文件夹中创建一个(dot env) 文件并HTTPS=true在其中添加如下内容:

HTTPS=true 

并通过运行yarn startnpm start命令重新启动您的应用程序,现在您的整个应用程序将在 HTTPS 上提供服务。

使用绝对路径导入

在每个应用程序中,我们都有导入语句,我们必须从当前文件夹中出来才能到达另一个文件,如下所示:

import { login } from '../actions/login';
import profileReducer from '../reducers/profile'; 

所以我们必须检查我们在哪个文件夹中,然后添加这些双点数以导入另一个文件。Create-react-app 可以轻松处理。

jsconfig.json在您的项目文件夹中创建一个新文件并在其中添加以下代码:

{
 "compilerOptions": {
   "baseUrl": "./src"
 }
} 

在这里,我们指定了所有文件所在的基本文件夹。(主要是 React 应用程序中的 src 文件夹)。

所以现在我们可以简化上面的导入,如下所示:

import { login } from 'actions/login';
import profileReducer from 'reducers/profile'; 

使用此配置,它现在将src作为基本 URL,因此我们只需要指定从文件夹内开始的src文件夹路径,就像我们在上面的代码中所做的那样。

这将避免为深度嵌套的路径添加额外的点。

在 React 中轻松访问环境变量

环境变量很重要,因为它们使我们能够保护私人信息的安全。它可以是用户名或密码或 API 密钥。

它们还允许我们根据环境(开发、暂存、生产等)为我们的应用程序提供不同的数据值。

Create-react-app 允许我们在不使用任何外部库的情况下读取环境变量。

要在 React 中创建环境变量,请创建一个新的.env(dot env) 文件并在其中声明环境变量,如下所示:

REACT_APP_API_BASE_URL=environment_variable_value
REACT_APP_PASSWORD=your_password 

使用环境变量名称开头很重要,REACT_APP_这样 create-react-app 将能够读取它。

一旦您.env使用变量创建了一个文件,它将在您的 React 应用程序中的process.env对象中可用。

process.env.REACT_APP_API_BASE_URL
process.env.REACT_APP_PASSWORD 

注意:.env出于隐私原因,您不应将文件推送到您的 git 存储库,因此请确保.env在您的.gitignore文件中添加该条目。

谢谢阅读!

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
基于create-react-app打包编译自己的第三方UI组件库并发布到npm
前言 这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件,并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm,供他人使用,就比如elementUI或者Ant Design。 如果想学习如何发布一个js库或者框架,那么使用rollup更为适合,可以参考如下文章: 前端组
2020年值得你去试试的10个React开发工具
2020年值得你去试试的10个React开发工具 2020年值得你去试试的10个React开发工具 本文由葡萄城技术团队翻译并首发 转载请注明出处:葡萄城官网(https://www.
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
使用 State Hook – React
使用 State Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。中使用下面的例子介绍了 Hook:import React, { useState } from 'react';function Example() { //
使用 Effect Hook – React
使用 Effect Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。_Effect Hook_ 可以让你在函数组件中执行副作用操作import React, { useState, useEffect } from 'reac
Hook API 索引 – React
Hook API 索引_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本页面主要描述 React 中内置的 Hook API。如果你刚开始接触 Hook,那么可能需要先查阅 。你也可以在 章节中获取有用的信息。 基础 Hook
Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较
说明 Native、Hybrid、React、Web App方案的分析比较 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app、web app与native app工具的初步比较与分析
React之集成测试 –测试环境
本章节介绍了可能会影响你测试环境的因素,并包含某些场景下的建议。 测试运行器使用 ,, 等测试运行器能像编写 JavaScript 一样编写测试套件,并将其作为开发过程的环节运行。此外,测试套件也将作为持续集成的环节运行。 Jest 与 React 项目广泛兼容,支持诸如模拟 、 和 等特性。如果你使用 Create React App,且
React 灵魂 23 问,你能答对几个?
1、setState 是异步还是同步? 1. 合成事件中是异步 2. 钩子函数中的是异步 3. 原生事件中是同步 4. setTimeout中是同步 相关链接:你真的理解setState吗?: 2、聊聊 react@16.4 的生命周期相关连接:React 生命周期 我对 React v16.4 生命周期的
React Hook丨用好这9个钩子,所向披靡
React Hook 指南 什么是 Hook ? Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数,它简洁了组件,有自己的状态管理,生命周期管理,状态共享。 useState useEffect useContext us
你可能不知道的 Create React App 的一些技巧
在本文中,我们将探讨提供的鲜为人知但非常有用的功能。让我们开始吧!在 HTTPS 而不是 HTTP 上提供应用程序有时我们需要在 HTTPS 上测试我们的应用程序,以在部署到生产之前检查所有 API 是否正常工作。Createreactapp 提供了一种简单的方法来做到这一点。.env在您的项目文件夹中创建一个(dot env) 文件并HTTPStrue在其