简单搭建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 构建的单页面应用中,要 ...
随机推荐
- vcenter异常死机无法重启
esxi主机异常掉电重启后,vcenter启动失败 查阅相关资料发现,一般是由于时间同步异常造成, 推荐方法是先确认bios硬件时间已同步,再删除旧的本地服务json文件,重启vcenter的服务. ...
- 第2-3-8章 分片上传和分片合并的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 5.10 接口开发-分片上传 5.10.1 分片上传介绍 5.10.2 前端分片上传插件webuploader 5.10.3 后端代码实现 5.10.3.1 接口文档 5.10.3.2 代码开发 ...
- 一文讲透CabloyJS全栈框架的来龙去脉
本文受众 咱们做软件开发,就好比是建造一幢幢房屋,一座座桥梁,既可以是北方宫殿的巍峨,也可以有南方庭院的雅致,更可以是横跨群山的峻险与孤悬.那么,不同的语言.不同的框架也都由其内在的秉质吸引着一批粉丝 ...
- Jmeter中用户定义的变量跟用户参数的区别
用户定义的变量: 全局变量,可以跨线程组被调用,但是,在启动运行时,获取一次值,在运行过程中,不会再动态获取值.用户参数: 局部变量,只能在自己的线程组中被调用,不能直接跨线程组被调用:但是,它在启动 ...
- JavaEE Day08 HTML&CSS
今日内容 HTML标签:表单标签 CSS:页面样式控制,美化页面,完成页面布局 一.表单标签 1.概述 用于采集用户输入数据的,如输入的用户名和密码,用于与服务器进行交互 使用from标签 form ...
- Python数据类型+运算符
Python基础数据类型 上期练习讲解 # 练习一.想办法打印出jason l1 = [11, 22, 'kevin', ['tony', 'jerry', [123, 456, 'jason'] ] ...
- 脚本运行正常,但抛出警告ResourceWarning: unclosed <socket.socket fd=688, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=0, laddr=('127.0.0.1', 61803)
脚本运行正常,但抛出警告,如下图,此时可导入warnings,忽略警告.
- ob_DES_艺恩
网站 aHR0cHM6Ly93d3cuZW5kYXRhLmNvbS5jbi9Cb3hPZmZpY2UvQk8vWWVhci9pbmRleC5odG1s 抓包返回密文 点到initator,PostA ...
- STL vector常用API
1.容器:序列容器(时间决定).关联式容器(容器中的数据有一定规则) 2.迭代器:通过迭代器寻找.遍历容器中的数据 vetor的使用:数据遍历与输出 #define _CRT_SECURE_NO_WA ...
- “喜提”一个P2级故障—CMSGC太频繁,你知道这是什么鬼?
大家好,我是陶朱公Boy. 背景 今天跟大家分享一个前几天在线上碰到的一个GC故障- "CMSGC太频繁". 不知道大家看到这条告警内容后,是什么感触?我当时是一脸懵逼的,一万个为 ...