简单搭建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 构建的单页面应用中,要 ...
随机推荐
- 推荐三个实用的 Go 开发工具
孙悟空在花果山称王的时候,特意去了一趟东海,在那里淘到了如意金箍棒.因为身为一个山大王,怎么能没有一件趁手的兵器呢? 作为程序员的我们也一样,除了我们的傍身武器 Ctrl C + V 之外,还要不停的 ...
- 【OpenStack云平台】搭建openstack云平台
1. 系统镜像 安装运行环境系统要求为CentOS7.5,内核版本不低于3.10. CentOS-7.5-x86_64-DVD-1804.iso Chinaskill_Cloud_iaas.iso 2 ...
- 【DL论文精读笔记】AlexNet
1.1引言 1.2数据集 就是ImageNet,当时计算机视觉最大的数据集 1.3结构 采用双GPU结构实现,并行处理图像,2-3,5-全连接部分中间还将特征图共享 最后全连接层输出的4096的语义信 ...
- MISC图片批量处理jio本
此处以ctfshow中MISC入门题目作为切入点 感兴趣的同学可以一边做题一边参照 批量修改PNG图片的宽 import zlib import struct filename = "fla ...
- day30-JQuery03
JQuery03 4.jQuery选择器03 4.4表单选择器 应用实例 <!DOCTYPE html> <html lang="en"> <head ...
- 浅谈 Java 和 Python 的反射
反射这个词我一直没搞懂,也不知道为什么需要反射,也不知道反射到底做了什么.所见所闻逐渐丰富之后,开始有点儿懂了. 先不管反射这个词是什么意思.Java 里面有反射,Python 里面也有反射,但是不太 ...
- Window系统的mysql数据库定时备份
原文:Window系统的mysql数据库定时备份 - Stars-One的杂货小窝 最近老大提到了数据库备份的功能,由于服务器是window系统的,所以研究了下备份的方案,特此记录 主要是实现每天定时 ...
- 《HTTP权威指南》– 9.识别和认证
客户端识别与Cookie机制 承载用户相关信息的HTTP首部 From Email地址 User-Agent 浏览器软件 Referer 跳转链接<来自> Author ziation 用 ...
- Django 之swagger中尝试调试post请求时返回 "detail": "JSON parse error - Expecting value: line 1 column 1 (char)
swagger已配置OK,但发送POST请求时一直显示数据格式错误,怪异.... 经过各种查找资料,才发现setting.py文件中缺少配置 配置完成后重启服务,再次尝试发送POST请求,不会再报格式 ...
- 注意看,她叫小美,在地址栏输入URL地址后发生了什么?
注意看,这个用户叫小美,他在地址栏输入了一串URL地址,然后竟然发生了不可思议的事情! 01.输入URL发生了什么? 从输入URL开始,到页面呈现出来,简单来说分为四个步骤: ① 建立连接:建立与服务 ...