创建第一个react项目
前提:已安装部署好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项目的更多相关文章
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...
1.安装react 开发工具 1.下载 chrome react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC 下载好是 ...
- 用Kotlin创建第一个Android项目(KAD 01)
原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...
- 3.创建第一个android项目
安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 3.创建第一个android项目 1.打开Eclipse,选择File——>new——>others.. ...
- 创建第一个Maven项目
-----------------------siwuxie095 创建第一个 Maven 项目 1.打开 Ec ...
- 使用IntelliJ IDEA创建第一个Mawen项目
咳咳...首先各位在学习SSM框架的时候,单个单个学完之后,老夫掐指一算(其实,我是个小鲜肉),各位必定会去整合SSM,这个时候,老夫又掐指一算,各位必定会碰到个mawen的东西,在这里,我可以告诉各 ...
- 如何架构一个 React 项目?
编程有点像搞园艺.比起竭力去对付BUG(虫子),我们更愿意把一切弄得整洁有序,以免最后落得个身在荒野丛林中.低劣的架构会拖我们的后腿,也会使得BUG更容易钻进系统里去. 想要对你的项目进行架构,方法有 ...
- Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...
随机推荐
- Django---图书管理系统,一对多(外键设置),__str__和__repr__的区别,进阶版项目说明简介.模版语言if ... else ..endif
Django---图书管理系统,一对多(外键设置),__str__和__repr__的区别,进阶版项目说明简介.模版语言if ... else ..endif 一丶__str__ 和 __repr__ ...
- 米尔XC7Z010开发板资源
关于XC7Z010开发板 详细介绍http://www.myir-tech.com/product/myc_C7Z010_20.htm Xilinx基于28nm工艺流程的Zynq-7000 All P ...
- Java 之 LinkedList 集合
一.LinkedList 概述 java.util.LinkedList 集合数据存储的结构是链表结构. 特点:增删快,查询慢 LinkedList 是一个双向链表,如下图 注意:该集合实现不是同步 ...
- linux rwx 权限说明
Linux的文件和目录的权限,有RWX三种. r(Read,读取):对文件而言,具有读取文件内容的权限:对目录来说,具有浏览目录的权限. w(Write,写入):对文件而言,具有新增,修改,删除文件内 ...
- android.view.ViewRoot$CalledFromWrongThreadException 异常的解决方案
https://blog.csdn.net/vincent_czz/article/details/7070354 https://stackoverflow.com/questions/210141 ...
- iOS 视图调用
init-初始化程序 viewDidLoad-加载视图 viewWillAppear-UIViewController对象的视图即将加入窗口时调用: viewDidApper-UIViewContro ...
- centos7快速安装coreDns
1.下载二进制文件 wget https://github.com/coredns/coredns/releases/download/v1.5.0/coredns_1.5.0_linux_amd64 ...
- php备忘录模式(memento pattern)
晚上刷起来. <?php /* The memento pattern provides the object restore functionality. Implementation is ...
- 项目Beta冲刺(3/7)(追光的人)(2019.5.25)
所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 描述Beta冲刺每日的scrum和PM报告两部分 队员学号 队员博客 221600219 小墨 https:/ ...
- scala简单的功能实现~weektwo
1.编写⼀个BankAccount类,假如deposit和withdraw⽅法,和⼀个只读的balance属性. //存款(deposit)和取款()函数 class BankAccount exte ...