Node.js安装，React脚手架安装，npm换源，cnpm下载，使用React脚手架创建项目。

最新推荐文章于 2024-04-01 18:56:15 发布
最新推荐文章于 2024-04-01 18:56:15 发布
阅读量1.2k 收藏 12
点赞数 3
文章标签： npm react nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48837577/article/details/107901663
版权
本文介绍了如何安装Node.js，包括选择LTS版本和验证安装。接着，讨论了npm与cnpm的区别，推荐使用cnpm进行国内源切换以加速下载。然后，详细阐述了如何安装React脚手架，并验证其版本。最后，指导创建项目文件，换源以优化依赖下载，并启动项目，展示项目成功运行的页面。
摘要由CSDN通过智能技术生成

本文从Node.js安装为起点，最终是为了使用React脚手架配置一个项目。

一、第一步，安装Node.js

  • 安装Node.js环境，安装网址：

https://nodejs.org/en/download/

  • Node.js是可以选择安装在哪个目录的，而且体积也不大。所以不用担心。
    Node官网下载页面截图：
    在这里插入图片描述

    LTS：指的是稳定的版本。 可以直接安装最新的版本（最新的稳定版本）
    剩下的按照指示安装既可。
    图片所指的是window系统64位的版本，按照你的系统选择对应的版本即可。

    验证安装：
    1. 输入node -v回车查看node版本同时验证是否安装成功。
    2. 输入npm -v回车查看npm版本同时验证是否安装成功。
    在这里插入图片描述
    出现版本号，就证明已经安装成功了。
    主要用的是npm，而下载的Node.js是自带npm了

这里解释一下n

最低0.47元/天 解锁文章
pinklin磷
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React脚手架配置
m0_71276810的博客
03-02 205
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. changed 67 packages in 5s
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
同时，清理`npm`缓存（通过`npm cache clear --force`）并使用国内镜像（如`cnpm`）可以提高下载速度和稳定性。 在`package.json`中，可能需要锁定特定版本的`electron-updater`，比如将其从`^4.13.0`改为`4.13.0`...
React的环境搭建以及脚手架的安装
小茳辞
03-18 518
1.安装node.js 　　如果安装了，就请参照第二步；没有的话，去node.js官网下载：https://nodejs.org/zh-cn/download/； 　　 2.检查版本号 在命令窗口输入node -v和npm -v　 因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址 指令：npm install -g cnpm --registry=https://registry.npm.taobao.org 检查淘宝镜像是否安装成功 cnpm -v 3.全局安装react脚手架
npm创建react项目
weixin_30649859的博客
08-24 403
1：win+R 输入cmd ，打开cmd面板 2：安装cnpm 　　npm install -g cnpm --registry=https://registry.npm.taobao.org 3：安装react的构建器create-react-app 　　cnpm install -g create-react-app 4：create-react-app my-test ...
官方 React 快速上手脚手架 create-react-app
hsany330的专栏
04-24 3656
此文简单讲解了官方 React 快速上手脚手架的安装与介绍。 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。 当然，如果你需要 React Native 的脚手架项目，可以查看这里：create-reac
React 脚手架
最新发布
hsyldw2000的博客
04-01 1641
将css文件名改为index.module.css,在index.js文件中引入 import hello from './index.module.css' ，在渲染时 Hello React!3.创建component组件文件夹，这个是保存项目中使用的组件的。2.创建项目：create-react-app hello-react。---- 组件单元测试的文件(需要jest-dom库的支持)五、第一个react项目---Hello React。
Node.js包管理器Yarn的入门介绍与安装
10-21
Node.js包管理器Yarn的出现，主要是为了解决npm（Node.js包管理器）的一些常见问题，如安装速度慢和每次都需要在线重新安装等。Yarn由Facebook推出，目标是提供一个更快、更可靠、更安全的替代方案。本文将简要介绍...
npm.cnpm.webpack.nvm
05-29
`npm`（Node Package Manager）、`cnpm`（China Node Package Manager）和`webpack`是开发者在进行JavaScript项目管理时经常使用的工具，而`nvm`（Node Version Manager）则帮助管理和切换不同的Node.js版本。...
react安装
01-08
按照以下方式创建一个项目 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 ...
create-react-app安装出错问题解决方法
01-19
create-react-app慢的解决方法 ...解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app
安装React脚手架
sdhiush的博客
07-29 2295
React脚手架的搭建
react之脚手架安装
爱开车的彬哥的CSDN博客
08-24 2166
环境要求 nodejs git 脚手架选择 这里选择推荐的官方出品的脚手架,在github上有52kstar， react脚手架 create-react-app地址 在git中使用npm全局安装create-react-app脚手架 npm install -g create-react-app 查看帮助 create-react-app -h Usage...
【React npm】从零搭建react脚手架，发布组件库到npm，并实现按需加载（二）
tuzi007a的博客
02-22 1454
【React npm】从零搭建react脚手架，发布组件库到npm，并实现按需加载（二）
安装react代码行工具(脚手架)
2201_75943567的博客
06-28 119
在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令。1, 安装react代码行工具(脚手架), 基于webpack工具构建项目。3,启动react项目 (需要cd进入项目my-app根目录)2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。2,创建一个react应用程序,npm版本过高或node版本过低。4, 运行,启动vite项目。
【React npm】从零搭建react脚手架，并发布组件到npm全流程（一）
tuzi007a的博客
02-20 2348
【React npm】从零搭建react脚手架，并发布组件到npm全流程（一）
React脚手架搭建
暗武逢天的博客
05-19 835
react提供了一个用于创建 react项目的脚手架,使得我们可以完全释放自己的双手(#^.^#)
react使用脚手架搭建
weixin_47886687的博客
08-12 1088
一.创建项目并启动 1.1全局安装 npm install -g create-react-app 1.2 创建项目 create-react-app 这里写你的项目名 1.3进入项目文件夹 cd 步骤二写的项目名 1.4启动项目 npm start 二.脚手架文件介绍
React 脚手架基本安装
微风的博客
09-15 303
# 步骤 首先 全局安装 create-reate-app npm install -g create-react-app ## 创建项目 npx create-react-app 项目名 npm init react-app 项目名 yarn create react-app 项目名 ## 启动项目 cd 项目名 npm run start / npx start / yarn start ...
react环境搭建,及脚手架使用
业余前端爱好者
06-27 712
react环境搭建,及脚手架使用
react脚手架安装失败
08-15
回答: 如果在安装React脚手架时遇到失败，可以尝试以下解决办法: 1. 确保你的npm版本高于5.2，如果低于这个版本，请先升级npm。你可以在命令行中输入npm -v来查看当前的npm版本。 2. 如果npm版本低于5.2，可以尝试全局安装create-react-app。在命令行中输入npm install -g create-react-app来进行安装。 3. 如果全局安装create-react-app后仍然失败，可以尝试卸载全局安装包。在命令行中输入npm uninstall -g create-react-app来进行卸载。 4. 如果还是无法解决问题，可以尝试使用淘宝镜像的cnpm命令来导入react和react-dom，具体命令是cnpm install --save react react-dom。 希望以上解决办法能够帮助到你。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React npm i react react-dom 安装不成功，报错](https://blog.csdn.net/m0_52173534/article/details/117884614)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [安装react脚手架以及错误如何解决](https://blog.csdn.net/weixin_57156748/article/details/120025282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [react脚手架安装问题及其解决办法](https://blog.csdn.net/zw1358978796/article/details/113785653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值