首页 > 其他分享 >创建React项目全过程

创建React项目全过程

时间:2022-08-30 10:56:42浏览次数:73  
标签:npm node react -- 创建 app React 全过程 打开

首先创建react项目可以先下载脚手架create-react-app(类似于vue的脚手架vue-cli)。

1、打开****cmd,执行:npm install -g create-react-app ; 全局安装。

如果执行失败,可能是node版本问题, react文档中要求Node >= 8.10 和 npm >= 5.6,查看版本:node -v;npm -v;如果node版本低,可以去node官网下载Download | Node.js;(下载完成后,记得编辑环境变量和配置全局路径和缓存路径)

具体安装步骤参考博文:node安装详解_樊小樊的博客-CSDN博客_node安装

安装完node,如果cache报错,可以试一下清除缓存

以管理员身份打开cmd, 执行:npm cache verify;或者npm cache clean

②第一步成功后,cd进到你想要创建项目的文件夹,执行:**create-react-app my-app **新建并对react项目进行命名(注:项目名称不能有大写,my-app是自定义的项目名)

③第二步成功后,cd进入my-app项目,执行:npm start

运行成功后浏览器会自动打开,默认端口为3000;如果没有自动打开,手动:http://localhost:3000

④想在编辑器上开发,以vscode为例,打开vscode,点击文件-->打开文件夹位置-->打开项目(刚刚用cmd创建的my-app项目),点击查看-->终端-->执行:npm start。
如果报这个错误:

解决办法:(3种都可以试一下)

1,关闭所有vscode窗口,再以管理员身份打开。

或者可以右键打开属性,设置兼容性

2,查看系统变量中node和npm路径配置;控制面板-->系统和安全-->系统-->高级系统设置-->环境变量;如图


3,搜索powershell,以管理员方式运行powershell; 使用命令更改计算机的执行策略

执行: set-ExecutionPolicy RemoteSigned 回车;

再输入A回车;

若再出现运行不出来的情况:若运行项目npm start又报错,解决办法是,vscode以管理员身份运行,然后打开一个新的终端,再运行npm start

转自:zhy郑小鱼

标签:npm,node,react,--,创建,app,React,全过程,打开
From: https://www.cnblogs.com/axingya/p/16638535.html

相关文章

  • idea新建Maven项目,新建的module无法创建package
    idea新建Maven项目,新建的module无法创建package问题描述图解决问题方法原因:java文件并不是SourcesRoot,需设置成SourcesRoot步骤(图更详细):右键java文件——>点击Mar......
  • 如何在springBoot中进行ReactiveFeignClient超时配置
    最近项目中用到了ReactiveFeign请求第三方的http接口,需要自定义一个请求超时时间,但在网上查了很多资料都没有一个比较准确的配置方法。pom依赖<dependency><groupId>......
  • linux创建用户、设置密码、修改用户、删除用户
    linux创建用户、设置密码、修改用户、删除用户_sunxx1986的博客-CSDN博客_linux创建用户 https://blog.csdn.net/sunxx1986/article/details/6854307创建用户、设置密码......
  • React报错之Property 'value' does not exist on type EventTarget
    正文从这开始~总览当event参数的类型不正确时,会产生"Property'value'doesnotexistontypeEventTarget"错误。为了解决该错误,将event的类型声明为React.ChangeEvent......
  • 将 Mapbox GL 与 React 101 一起使用
    将MapboxGL与React101一起使用LombardSokağı,SanFrancisco如果我们想做一个处理地图数据的项目,Mapbox会在这里帮助我们,而不是重新发明轮子并从头开始编写一......
  • 在 React 中使用过滤器可扩展地管理表的状态
    在React中使用过滤器可扩展地管理表的状态不久前,我正在使用一个高度复杂的仪表板,该仪表板经常有很多表(典型的分页表),并且这些表有自己的过滤器,应用后,数据将被过滤和查看......
  • 创建者模式--工厂模式
    概述需求:设计一个咖啡店点餐系统设计一个咖啡类(Coffee),并定义两个子类(美式咖啡[AmericanCoffee]和拿铁咖啡[LatteCoffee]);再设计一个咖啡店(CoffeeStore),咖啡店具......
  • c++ 在项目中创建DLL,并调用
    创建DLL分为两种方法,先介绍第一种一、创建DLL(1)//dll.h#pragmaonce//dll.h#ifndefDLL_H_#defineDLL_H_voidprinthello();voidcallPython();extern"C"_de......
  • C++【多线程编程】之【初识线程创建】
    1.线程创建函数调用pthread_create(句柄、参数、函数入口,函数入口的实参)intpthread_create(....)cppthread类:thread类的创建方法比较简便。但也有很多问题需要考虑......
  • CentOS 7下安装docker和FreeSWITCH-全过程
    具体步骤如下:准备工作:提前将安装包放在CentOS系统下(提前创建好文件夹,这里为:/home/freeswitch(后转移至/home/soft-fs),所需文件如下: 复制第1、3、4、5到本地计算机(这里路......