首页 > 其他分享 >使用create-react-app脚手架搭建一个react项目

使用create-react-app脚手架搭建一个react项目

时间:2024-03-13 10:33:06浏览次数:26  
标签:npm Node 项目 create react app

一、环境要求

  Node环境:一看就会使用nvm实现多个版本的node自由切换 - 始是逍遥人 - 博客园 (cnblogs.com)

  Node.js>=8.10 并且 npm>=5.6

  建议:Node.js>=10.14.2,防止报错:error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 10.14.2". Got "10.13.0"

二、安装 create-react-app

    全局安装
    npm install -g create-react-app       // Windows
    sudo npm install -g create-react-app  // Linux

  检查是否安装成功

    create-react-app -V // 注意:V 是大写的

 三、创建项目

  选择一个工作空间路径,如:E:\webproject\react,打开cmd窗口执行命令(快捷方式:直接在文件夹地址栏中敲cmd回车)

    npx create-react-app <项目名称> //注意:项目名称不要包含大写

  注:如果创建项目慢可以切换npm国内淘宝镜像:npm设置淘宝镜像 - 始是逍遥人 - 博客园 (cnblogs.com)

  

  创建成功后可以使用cd <项目名称>命令进入项目路径,执行npm start运行项目,成功后如下图:

  

  

标签:npm,Node,项目,create,react,app
From: https://www.cnblogs.com/brucewang92/p/18070076

相关文章

  • App分发平台:开发者发布与推广应用的多元选择
    App分发平台是应用程序开发者发布和推广其应用的重要渠道。这些平台提供了丰富的应用资源,使得用户可以轻松下载和安装各种类型的应用程序。以下是一些主要的App分发平台:腾讯应用宝:作为腾讯公司旗下的应用分发平台,应用宝提供了海量的应用程序资源,涵盖了游戏、社交、工具、生活等......
  • APP内测分发步骤详细解说
    APP内测分发则是指在应用程序开发过程中,开发者将应用程序的测试版或预发布版分发给一些特定用户进行测试、反馈和评估的一种方式。这种方式有助于开发者在实际环境中发现并修复潜在的问题,从而提高应用程序的质量和稳定性。APP内测分发的步骤通常如下:打包应用程序:将应用程序的源......
  • 在UniApp中实现对接PayPal支付
    基本的指南:获取PayPalAPI凭证:首先,你需要在PayPal开发者中心注册并创建一个应用。这将为你提供必要的API凭证,如ClientID和Secret,用于与PayPal的API进行通信。配置UniApp项目:在你的UniApp项目中,你需要配置PayPal的相关信息。这通常包括在manifest.json文件中设置支付相关......
  • CSAPP Bomb Lab
    frompixiv参考博客手把手教你拆解CSAPP的炸弹实验室BombLabGDB调试-从入门实践到原理Linux上分屏软件Tmux使用教程知识点gdbjump函数名/*地址名jump能够很灵活地在gdb调试汇编代码时跳转当一不小心错过了关键信息时,我们便可以使用jumprun(......
  • CF1929E. Sasha and the Happy Tree Cutting
    Problem-1929E-Codeforces无意看一眼标签是\(dp\)就一直朝树形状压\(dp\)的方向想了一年,发现不是树形\(dp\)设\(dp_S\)为完成集合\(S\)内的限制所需要的最少边数把每一对顶点的路径上每条边的值都状压,表示添加这条边可以实现的限制有哪些,记为\(b_i\)因......
  • react 判断img加载完成
     react判断img加载完成在React中,可以通过监听img元素的load事件来判断图片是否加载完成。以下是一个简单的例子:  importReact,{useState,useRef}from'react'; constImageLoader=()=>{const[imageLoaded,setImageLoaded]=useState(false)......
  • 记录报错内容以及如何修改(mapper包下面的映射文件扫描不到)
    这个错误是在使用mybatis和mapper的时候发生的,一般报这种错误都是因为配置不匹配,或者是写错了路径,或者是写的sql语句有了问题,但是我检查了很多遍都没有发现任何有关语句和路径的错误。 排除了这些低级错误的可能后,这里会报错的原因也基本就只有一个了,那就是mapper接口和mapper.......
  • 【SLAM】Soomthing And Mapping技术参考
    TectonicSAM笔记SAM(SmoothingAndMapping)是SLAM简化而提升效率的概念。SAM也是SFM(StructureFromMotion)的关键技术。TectonicSAM,采用因子图模型,优化方法估计状态(地图与位姿参数),本文将submap类比于大陆板块(Tectonic),对submap内部节点改变不明显,submap之间可大幅度调......
  • React — 请求模块(http)封装、API模块封装
    一、请求模块封装//axios封装//根域名配置//超时//请求拦截器/响应拦截器importaxiosfrom'axios'consthttp=axios.create({baseURL:"",timeout:5000})//在发送请求之前拦截插入自定义配置对于参数的处理http.interceptors.request.use(config......
  • React — react配置@路径
    通常情况下,@路径是作为一个别名来使用,用于指向项目的根目录。这样做的好处是可以简化模块导入时的路径书写,使代码更加清晰和易读。别名路径配置1.路径解析配置(webpack),把@/解析为src/(1)下载插件craconpmi-D@craco/craco(2)项目根目录下创建配置文件craco.config.js(配......