简单搭建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 构建的单页面应用中,要 ...
随机推荐
- Linux *.service文件详解
什么是systemd service? systemd service是一种以.service 结尾的配置文件,是一个专用于Linux操作系统的系统与服务管理器.简单来说,用于后台以守护精灵(daem ...
- layui的button失效、layui绑定失效
内容呢,就一句话. 因为不会报错,所以这个坑,找了半天......淦 button失效直接提交刷新可能是没加lay-submit 属性. <button class="layui-bt ...
- devexpress中dockManager保存布局后恢复不正常
在使用dockManager保存布局后进行恢复发现不正常,与中间的gridcontorl接触的都不行.gridcontorl设置的填充是fill 所以在在界面上再添加一个PanelControl控件并 ...
- C温故补缺(十二):预编译器与头文件
预编译器 预编译器就是之前学的预编译指令的执行者 gcc -E test.c -o test.i 生成预编译文件就是翻译#指令 比如#include<stdio.h>就是把整个stdio. ...
- C温故补缺(四):GDB
gdb gdb是由GNU软件社区提供的C Debug工具 Pre 在调试前,需要先编译.c程序,且要加上-g使输出文件变得可调式 gcc test.c -g -o test 用gdb test来调试程 ...
- K8s安装乐维5.0应用部署文档
乐维产品包具体打包为4个镜像包,分别为:mysql5.7.36.tar.zabbix_server.tar.itops_v1_4_x86_64.tar.bpm0.1.tar,对应的配置文件分别为:da ...
- MAUI Blazor (Windows) App 动态设置窗口标题
接着上一篇"如何为面向 Windows 的 MAUI Blazor 应用程序设置窗口标题?" Tips: 总所周知,MAUI 除了 Windows App 其他平台窗口是没有 Ti ...
- 解决.net Core中WebApi自动Model验证导致数据格式不能统一
简言: 最近做项目用WebAPI Core时,想把返回数据的格式,统一弄成:{"errorMsg":"xxx","Data":"x ...
- last-child可能你也会踩的坑
旧文章从语雀迁移过来,原日期为2021-07-14 问题 当时写在写一个列表,列表每一项需要下面加下划线,最后一项不加下划线.第一时间,想到使用 :``last-child 这个伪类来实现. 当时的代 ...
- APICloud 入门教程窗口篇
什么是窗口,窗口可以理解为一屏幕内容的一个基本载体,里面可以放导航,图片,视频,文字等组成一屏幕内容. 不同的窗口组成一个APP, 例如购物APP有[首页],[购物车],[我的]等不同的窗口.不同的窗 ...