目录

前言

一、node.js使用

二、vscode

1.打开文件

2.运行

3. 第一个react程序,从helloworld写起

总结


前言

安装前需要安装: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开发环境的更多相关文章

  1. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  2. 从零搭建react开发环境

    早在六年前,前端开发已经实现了模块化.工程化开发,既然是模块化工程化开发那就少不了包管理工具,所以我们的第一步就是先从安装nodejs开始(安装nodejs携带JavaScript的包管理工具npm) ...

  3. 使用webpack搭建react开发环境

    安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...

  4. 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 执行命令 ...

  5. 用webpack搭建react开发环境

    安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...

  6. 在 NodeJs 上搭建 React 开发环境

    步骤: 1. 安装 nodejs :根据你的 Windows 类型(x86或x64)下载相应的安装包进行安装.安装完成后,可以在任一目录下打开 cmd 窗口并运行 node -v 命令,如果显示 no ...

  7. win10下通过npm成功搭建react开发环境

    1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...

  8. Mac下搭建react开发环境

    安装node 官网下载 https://nodejs.org/en/ 双击安装,接下来都是默认选择即可,直至安装成功 测试是否安装成功,分别输入以下命令: node -v npm -v 如下图所示,说 ...

  9. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  10. 搭建 webpack、react 开发环境(三)

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

随机推荐

  1. 12 张图看懂 CPU 缓存一致性与 MESI 协议,真的一致吗?

    本文已收录到  GitHub · AndroidFamily,有 Android 进阶知识体系,欢迎 Star.技术和职场问题,请关注公众号 [彭旭锐] 进 Android 面试交流群. 前言 大家好 ...

  2. Postman使用指导

    1. 下载好Postman,不用注册账号,直接离线使用 2. 软件的配置修改: 2.1关闭SSL认证 2.2关闭系统代理 2.3上传证书填写hosthost为服务器地址和端口:crt和key可以通过国 ...

  3. vim-瞬间移动打发

    一,常用基本命令 set rnu 显示相对行号 1.ctrl+F 将屏幕向下滚动一屏 2.ctrl+u pageUp,ctrl+d pageDown 3.行内移动:W,b在单词间移动,ge向上跳,f ...

  4. MongoDB - 索引知识

    索引简介 什么是索引 索引最常用的比喻就是书籍的目录,查询索引就像查询一本书的目录. 索引支持 MongoDB 查询的高效执行.如果没有索引,MongoDB 必须扫描集合中每一个文档,以选择与查询语句 ...

  5. 【云原生 · Kubernetes】Kubernetes基础环境搭建

    1.系统镜像 安装运行环境系统要求为CentOS7.5,内核版本不低于3.10. CentOS-7.5-x86_64-DVD-1804.iso Chinaskill_Cloud_PaaS.iso Do ...

  6. 基于k8s的CI/CD的实现

    综述 首先,本篇文章所介绍的内容,已经有完整的实现,可以参考这里. 在微服务.DevOps和云平台流行的当下,使用一个高效的持续集成工具也是一个非常重要的事情.虽然市面上目前已经存在了比较成熟的自动化 ...

  7. X活手环的表盘自定义修改

    文章用到的所有工具及软件成品 前言 前几天我在某宝买了一个智能手环,无奈软件中的表盘太少,所有我想着修改一下app中的资源文件. 反编译APK 这里反编译APK用apktool工具就可以. apkto ...

  8. 关于python统计一个列表中每个元素出现的频率

    第一种写法: a = ['h','h','e','a','a'] result = {} for i in a: if i not in result: result[i] = 1 else: res ...

  9. ArcEngine要素编辑遇到的一些问题

    1.如何开启编辑 IMap myMap = this._Aplication.ActiveView.FocusMap; IWorkspace myWorkspace = (myMap25Sheet.P ...

  10. day11 枚举类enum & 单例模式 & 异常以及抛出

    day11 枚举enum 用enum关键字定义枚举类 特点 1.用enum关键字定义枚举类 2.枚举类默认继承java.lang.Enum类 3.枚举类的构造方法只能使用private修饰,省略则默认 ...