简单搭建react开发环境
目录
前言
安装前需要安装:node.js、vscode
一、node.js使用
运行Node.js command prompt,输入命令: npx create-react-app my-app (如下图)

安装完成截图如下:

至此,react安装完成,可以直接在npm控制台运行,我放到vscode运行了
二、vscode
1.打开文件
打开文件夹,即之前npm安装的目录
(我是这个目录)
2.运行
ctrl+`打开终端,输入yarn start运行react
yarn start
运行完成自动打开浏览器。
3. 第一个react程序,从helloworld写起
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById('root')
);
具体如下图:

运行完成,效果如下图

总结
至此,可以使用vscode开发react了,第一个react程序完成。欧耶\(^o^)/
简单搭建react开发环境的更多相关文章
- Webpack笔记(二)——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- 从零搭建react开发环境
早在六年前,前端开发已经实现了模块化.工程化开发,既然是模块化工程化开发那就少不了包管理工具,所以我们的第一步就是先从安装nodejs开始(安装nodejs携带JavaScript的包管理工具npm) ...
- 使用webpack搭建react开发环境
安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...
- react实战项目开发(1) 搭建react开发环境初始化项目(Create-react-app)
前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...
- 用webpack搭建react开发环境
安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...
- 在 NodeJs 上搭建 React 开发环境
步骤: 1. 安装 nodejs :根据你的 Windows 类型(x86或x64)下载相应的安装包进行安装.安装完成后,可以在任一目录下打开 cmd 窗口并运行 node -v 命令,如果显示 no ...
- win10下通过npm成功搭建react开发环境
1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...
- Mac下搭建react开发环境
安装node 官网下载 https://nodejs.org/en/ 双击安装,接下来都是默认选择即可,直至安装成功 测试是否安装成功,分别输入以下命令: node -v npm -v 如下图所示,说 ...
- 基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
- 搭建 webpack、react 开发环境(三)
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
随机推荐
- 面试 考察网络请求HTTP相关知识(第六天!)
01.HTTP 常⻅的状态码有哪些? 1xx 服务器收到请求 2xx 请求成功 --- 200 成功状态码 3xx 重定向 --- 301永久重定向,浏览器 ...
- Go语言书籍推荐
附录: 其他书籍的介绍:https://github.com/golang/go/wiki/Books Go程序设计语言 (圣经) 作者 艾伦 A.A.多诺万 Kernighan 下载地址 中文版PD ...
- python面试题常用语句
一.比较与交换1.比较并输出大的 print(a if a>b else b) 2.交换两个元素 a,b = b,alist1[i],list[j]=list1[j],list[i] 二.排序 ...
- 记录下批处理bat脚本获取打包发布问题
最近做了个Jenkins配合Gitlab自动部署Java项目到Windows Server服务器. Jenkins和Gitlab在Linux下,好一顿折腾,先记录下脚本,其余后续补充吧. 把Java项 ...
- git回滚操作系列
git回滚操作系列 准备工作 本地环境 线上环境 分支 master 场景1 线上环境回滚,同步线上与本地操作 线上环境当前与本地一致 先把线上回滚至早期 获取提交日志 [root@root]# gi ...
- HSSFSheet XSSFWorkbook SXSSF Java读取Excel数据
HSSF是POI工程对Excel 97(-2007)文件操作的纯Java实现 XSSF是POI工程对Excel 2007 OOXML (.xlsx)文件操作的纯Java实现 SXSSF通过一个滑动窗口 ...
- KVC原理与数据筛选
作者:宋宏帅 1 前言 在技术论坛中看到一则很有意思的KVC案例: @interface Person : NSObject @property (nonatomic, copy) NSString ...
- EASE-Grid经纬度与行列号转换公式 以 25KM的HDF数据为例
/// <summary> /// 把经纬度转换成行列号 /// </summary> /// <param name="pLng"></ ...
- 数电第11周周结_by_yc
Lab7_时序逻辑验证 一.简易电子时钟 功能描述: 设计一简易电子时钟,支持时.分.秒显示,其中HEX7-HEX6显示时,HEX5-HEX4显示分,HEX1-HEX0显示秒,假设进制为:18秒= ...
- day37-文件上传和下载
文件上传下载 1.基本介绍 在Web应用中,文件上传和下载是非常常见的功能 如果是传输大文件一般用专门的工具或者插件 文件上传和下载需要用到两个包:commons-fileupload.jar和com ...