前提:已安装部署好nodejs环境

查看nodejs是否安装以及版本

1,win+r输入cmd打开命令行页面

2,路径换到nodejs目录

3,输入node -v查看版本

创建项目

1,win+r输入cmd打开命令行页面

2,路径换到工作空间目录下

3,输入创建命令,等待创建完成

4,创建成功

5,跳转到新建的项目路径下,并启动项目

6,项目启动成功后会自动打开浏览器页面,默认端口3000

7,项目目录结构

8,修改默认端口

修改package.json中的内容


"scripts": {
"start": "react-scripts start",
},
修改为
"scripts": {
"start": "set PORT=9000 && react-scripts start",
},

9,编辑工具使用的Visual Studio Code

在此工具中启动项目

ctrl+数字1左边的按键,出现以下页面,然后输入npm start

启动成功后依然自动打开浏览器

另有命令:npm stop / npm restart

创建第一个react项目的更多相关文章

  1. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  2. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  3. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  4. 用Kotlin创建第一个Android项目(KAD 01)

    原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...

  5. 3.创建第一个android项目

    安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 3.创建第一个android项目 1.打开Eclipse,选择File——>new——>others.. ...

  6. 创建第一个Maven项目

    -----------------------siwuxie095                                     创建第一个 Maven 项目         1.打开 Ec ...

  7. 使用IntelliJ IDEA创建第一个Mawen项目

    咳咳...首先各位在学习SSM框架的时候,单个单个学完之后,老夫掐指一算(其实,我是个小鲜肉),各位必定会去整合SSM,这个时候,老夫又掐指一算,各位必定会碰到个mawen的东西,在这里,我可以告诉各 ...

  8. 如何架构一个 React 项目?

    编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有 ...

  9. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

随机推荐

  1. Vue: 解决打包后element-ui图标字体不显示的问题

    在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: ...

  2. node.js中的fs.rename()方法

    node.js 中的fs.rename()模块 var fs=require('fs');//node.js的核心模块 原生模块.修改文件名称,可更改文件的存放路径 方法说明 : 修改文件名称,可更改 ...

  3. java 判断虚拟网卡物理网卡

    读取注册表方式,jregistrykey.jar与jregistrykey.dll.通过“characteristics”值确定虚拟网卡还是物理网卡.该值在注册表的位置HKEY_LOCAL_MACHI ...

  4. 根父类:Object 类

    一.Object类 Java中规定: 如果一个类没有显式声明它的父类(即没有写extends xx),那么默认这个类的父类就是java.lang.Object. 类 Object 是类层次结构的根类. ...

  5. Web前端面试总结(别人的)

    http://note.youdao.com/noteshare?id=0bfbe45de0de0bc4735f867e5a6c528f&sub=D52F5C079DDE49F99A5118D ...

  6. struts2启动报错:ERROR com.opensymphony.xwork2.conversion.impl.DefaultConversionPropertiesProcessor - Conversion registration error

    [framework] 2019-12-05 11:34:05,441 - org.springframework.web.context.ContextLoader -5352 [RMI TCP C ...

  7. spec开发思路以及理解

    一.spec说明 描述:编写SEPC采用创联公司自主开发的CIT语言,它是一种过程化的.类似数据库编码的语言.SPEC中除了关键字外提倡使用中文. 理解:可以理解为业务逻辑层.链接前台页面和后台数据库 ...

  8. tail: inotify cannot be used, reverting to polling: Too many open files

    tail -f catalina.out 出现警告: tail: inotify cannot be used, reverting to polling: Too many open files l ...

  9. win2003下安装python3.4 + pyspider

    昨天尝试了在win2003下安装python2.7.这个是文章地址:https://www.cnblogs.com/alpiny/p/11706606.html 但是程序跑了一晚上,发现有一点问题,是 ...

  10. IP切换小技巧

    说到这个问题很多人都有同感.公司一般使用的都是静态的IP(如图:使用下面的IP地址),而我们在外面是用的一般是动态获取的IP(如图:自动获得IP地址),因此就产生了一个问题,需要来回切换IP,也就是需 ...