首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过Yarn 2使用Create React App?

Yarn 2 是一个流行的 JavaScript 包管理器,它可以用来管理和构建项目的依赖项。Create React App(CRA)是一个由 Facebook 创建的官方脚手架工具,用于快速创建 React 应用程序。

要通过 Yarn 2 使用 Create React App,您可以按照以下步骤进行操作:

  1. 确保已经安装了 Node.js 和 Yarn 2:首先,确保您已经安装了最新版本的 Node.js 和 Yarn 2。您可以在官方网站上下载和安装它们。
  2. 创建新的 React 应用程序:在命令行中,进入您想要创建项目的目录,然后运行以下命令来使用 Create React App 创建新的 React 应用程序:
  3. 创建新的 React 应用程序:在命令行中,进入您想要创建项目的目录,然后运行以下命令来使用 Create React App 创建新的 React 应用程序:
  4. 这将在当前目录下创建一个名为 "my-app" 的新文件夹,并在其中初始化一个新的 React 应用程序。
  5. 切换到 Yarn 2 的 PnP 模式(可选):Yarn 2 引入了一种新的工作方式,称为 Plug'n'Play(PnP)。如果您想要启用 PnP 模式,可以运行以下命令:
  6. 切换到 Yarn 2 的 PnP 模式(可选):Yarn 2 引入了一种新的工作方式,称为 Plug'n'Play(PnP)。如果您想要启用 PnP 模式,可以运行以下命令:
  7. 这将使 Yarn 2 切换到 PnP 模式,并生成一个名为 ".yarnrc.yml" 的配置文件。
  8. 启动开发服务器:进入新创建的应用程序文件夹("my-app"),然后运行以下命令以启动开发服务器:
  9. 启动开发服务器:进入新创建的应用程序文件夹("my-app"),然后运行以下命令以启动开发服务器:
  10. 这将启动一个开发服务器,自动打开浏览器,并在 http://localhost:3000 上展示您的 React 应用程序。

通过以上步骤,您可以使用 Yarn 2 成功地创建和运行一个基于 Create React App 的 React 应用程序。Yarn 2 提供了更好的性能和更丰富的功能,帮助您更高效地管理和构建项目依赖。如果您想了解更多关于 Yarn 2 和 Create React App 的详细信息,可以参考以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 使用 Proxy 代理(create-react-app

create-react-app 中配置proxy代理 proxy,默认为NULL,类型为URL,一个为了发送http请求的代理 在平时开发时,尤其前后端分离时,需要假数据来进行模拟请求,这个时候就需要...proxy代理来处理 create-react-app < 2.0 package.json 中配置 "proxy":{ "/api/**":{ "target":"https://easymock.spiritling.pub.../", "changeOrigin": true } } create-react-app > 2.0 package.json 中配置(不推荐) "proxy": "https:/.../easymock.spiritling.pub/", 配置文件 /src/setupProxy.js (推荐) 将 create-react-app 解包后,可以在 config 文件夹下找到配置 在...); }; 游览器中请求为 https://example.com/api/v1/login 则经过代理后可以转为 https://easymock.spiritling.pub/login create-react-app

12.2K42

create-react-app使用sass

而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。...不管你是刚使用Reactjs或者是Reactjs的老司机,你们一定都听说过create-react-app这个脚手架,而从create-react-app的官方文档中,我们可以看到他们暂时还不支持直接导入...但是通过一些配置,我们还是可以从官方脚手架中使用sass/scss/less的。...$ npm install npm-run-all --save-dev # or $ yarn add npm-run-all --dev 最后,在不使用ejec命令的情况下,更改create-react-app...的webpack配置,我们使用react-app-rewired来处理,安装方式如下: $ npm install react-app-rewired --save-dev 在完成这些步骤之后,我们修改

2.9K20
  • 从零开始使用create-react-app + react + typescript 完成一个网站

    我花了三天时间,用 create-react-app + react + typescript 重构这个网站,与网站效果不同的是,我没有加入任何的动画,并且我添加了中英文切换以及回到顶部的效果。.../g 那么以上的正则表达式应该如何理解呢?...h1 标签来显示问题,四个选项都使用的按钮标签,我们将按钮标签选中的是哪一项,通过暴露一个事件 onSelect 给传递出去。...通过使用该组件的时候传递 question 数据就可以确定一组问题以及选项答案。...首先是第一个组件 TopButtonComponent ,我们主要做了2个工作,第一个工作就是使用 React.forwardRef API 来将 ref 属性进行转发,或者说是将 ref 属性用于通信

    1.6K20

    2020-6-5-如何指定create-react-app默认启动的浏览器

    今天和大家聊一聊create-react-app设置默认启动浏览器的方式。 ---- 问题来源 对于create-react-app默认会在npm start执行之后在默认浏览器打开页面。...解决方案 在npm脚本中,我们可以使用create-react-app提供的配置参数BROWSER指定启动的浏览器。...所以在windows电脑上可以使用下面的脚本执行 "start": "set BROWSER=chrome&& react-scripts start", 注意:这里的&&之前不能有空格,否则会出现异常弹窗...这里是环境变量中将空格也设置在了BROWSER字段中,但是create-react-app没有做trim处理导致的。...---- 参考文档: Advanced Configuration start without opening url in browser · Issue #3070 · facebook/create-react-app

    1.4K20

    如何使用以太坊的 CREATE2 操作码

    使用CREATE2当然比最初的CREATE更复杂。不再仅仅写new Token()就行了,而必须要编写汇编代码。...译者注:现在可以不用编写汇编, solidity 0.8 之后, 可以通过指定 slat 来使用 create2 ,例如:new Token{salt: bytes32}() 但是create2有一个重要的属性...由于网上相关的案例很少,我想写一篇简单的博客来解释一下: CREATECREATE2都是怎么工作的 怎样在智能合约中使用CREATE2 我怎样用它来完成一个Capture The Ether[2]挑战...第二步就是挑战的地方,要完成它,我们需要用到以太坊如何计算合约地址的知识——前面刚刚讨论过! 用 CREATE 来解决?...解决方案 要用CREATE2找到包含badc0de的地址,我们需要: 要部署的合约的字节码 部署合约的地址 (用CREATE2的合约) salt —  我们将通过计算得出.

    82720

    一、环境搭建、以及聊聊更重要的...

    我想要说的是,大多数困难,可能并不是React本身带给你的。而是当前那个问题带来的。我们不知道如何React来解决这个问题,所以我们认为React很难。...create-react-app 作为最易上手的react脚手架,create-react-app并不需要花费太多时间就能够掌握,大家只需要按照我接下来的步骤安装需要的环境即可。...2. 安装一个好用的命令行工具 对于windows系统来说,我们可以直接使用系统自带的cmd。但是cmd比较难用。因此我个人比较推荐大家安装git,并通过git中的git.bash工具进行指令操作。...安装 create-react-app 如果刚才我们的包管理工具(npm/yarn)已经安装好,那么安装create-react-app就比较简单。...> yarn add create-react-app -g 添加-g表示全局安装 接下来我们就可以使用create-react-app来创建项目啦。 4.

    76410

    【原创】不想eject,还咋修改create-react-app的配置?

    一、先抛问题 许多刚开始接触create-react-app框架的同学,不免都会有个疑问:如何在不执行eject操作的同时,修改create-react-app的配置。...create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中, 执行yarn eject后,会将webpack、babel等配置暴露在config目录下...所以我们一般不太建议使用yarn eject的方式暴露create-react-app框架的配置。...yarn add sass -D 接下来我们来less的是如何支持的 安装依赖: yarn add less less-loader@7.3.0 -D 注意这里less-loader的版本 less-loader...@7.3.0,如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题,所以使用了低版本的。

    2.9K40
    领券