简单搭建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 构建的单页面应用中,要 ...
随机推荐
- hwlog---huawei.com/npu-exporter/utils---utils.go
// Copyright(C) 2021. Huawei Technologies Co.,Ltd. All rights reserved.// Package utils offer the so ...
- HTTPS详解二
前言 在上篇文章中,我已经为大家介绍了 HTTPS 的详细原理和通信流程,但总感觉少了点什么,应该是少了对安全层的针对性介绍,那么这篇文章就算是对HTTPS 详解一的补充吧.还记得这张图吧. HTTP ...
- 【iOS逆向】某茅台App算法分析还原
1.目标 某茅台软件的actParam算法分析还原. 2.使用工具 mac系统 frida-ios-dump:砸壳 已越狱iOS设备:脱壳及frida调试 IDA Pro:静态分析 Charles:抓 ...
- Linux中如何开启一个定时任务
Linux的定时任务是基于cron驱动做到的 安装 Ubantu系统下安装crontab 正常情况下需要先执行:apt-get upgrade 进行升级 安装:apt-get install cron ...
- AR手势识别交互,让应用更加“得心应手”
现如今, AR技术不断发展,人们不再满足于运用键盘.鼠标等简单器械来实现传统的人机交互模式.随着用户接触机器的多样化,繁琐的操作不但对一些用户有门槛,而且还增加其学习成本:如果能用自然且符合日常生活习 ...
- 关于python导包问题(新手向)
包和模块 首先要弄清这两个概念, 在python 中 一个文件夹中包含__init__.py 文件(这个文件是包的初始化文件,在你导入包或包下面的模块的时候,这个文件会最开始运行),就会被python ...
- freemarker if 回填CheckBox思路
开发场景中遇到这样的一个问题,在网上也找了一些结局方法,但不成功,于是自己写了一个笨一点的方法,算是一种方法,希望对遇到该开发场景的朋友有所帮助. freemarker html代码: <tab ...
- JavaScript入门③-函数(2)原理{深入}执行上下文
00.头痛的JS闭包.词法作用域? 被JavaScript的闭包.上下文.嵌套函数.this搞得很头痛,这语言设计的,感觉比较混乱,先勉强理解总结一下. 为什么有闭包这么个东西?闭包包的是什么? 什么 ...
- Day29 Linux相关命令的使用
今日内容 基本概念 安装 基本命令 在linux上安装软件 jdk mysql jdk Nginx的安装 一.概述 1.Unix linux基于Unix,Unix由贝尔实验室在1969年开发 一开始由 ...
- 【Java SE进阶】Day10 缓冲流、转换流、序列化流 、打印流
一.缓冲流 1.概述 比普通流更强大的IO流,可以增加读写的效率 组成 缓冲输入流:BufferedInputStream.BufferedReader 缓冲输出流:BufferedOutputStr ...