目录

前言

一、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. 第三方模块的下载与使用、requests模块、爬取链家二手房数据、openpyxl模块、hashlib加密模块

    目录 第三方模块的下载与使用 下载第三方模块可能会出现的问题 网络爬虫模块之requests模块 网络爬虫实战之爬取链家二手房数据 自动化办公领域之openpyxl模块 第三方模块的下载与使用 第三方 ...

  2. kestrel网络编程--开发redis服务器

    1 文章目的 本文讲解基于kestrel开发实现了部分redis命令的redis伪服务器的过程,让读者了解kestrel网络编程的完整步骤,其中redis通讯协议需要读者自行查阅,文章里不做具体解析. ...

  3. Django静态文件配置(from表单-request对象方法-get请求与post请求-视图函数书写)

    目录 一:静态文件配置 1.静态文件配置 2.什么是静态文件? 3.静态文件的创建 4.解决使用django后端代码修改前端不显示(缓存问题) 5.settings.py 静态文件配置 6.静态文接口 ...

  4. python运算符与基本数据类型

    Python种类 JavaPython cPython ***** pypy 字节码 和 机器码 Python程序: 1. 终端: C:\python35\python.exe D:\1.py 解释器 ...

  5. 解决MySQL Connector/ODBC驱动无法安装Error1918

    1.问题描述 我在一台windows服务器上安装好mysql之后,再安装mysql的ODBC连接驱动时,报错如下: 2.解决方法 之所以出现安装失败是由于缺少Miscrosoft Visual C++ ...

  6. 学习ASP.NET Core Blazor编程系列十九——文件上传(下)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  7. Pytorch基础-张量基本操作

    一,张量的基本操作 二,维度变换 2.1,squeeze vs unsqueeze 维度增减 2.2,transpose vs permute 维度交换 三,索引切片 3.1,规则索引切片方式 3.2 ...

  8. python进阶之路2——解释器软件安装

    内容概要 计算机五大组成部分 计算机三大核心硬件 操作系统 编程与编程语言 编程语言发展史 编程语言的分类 python解释器下载与安装 python解释器多版本共存 pycharm安装 计算机五大组 ...

  9. [Unity]限制两个物体之间的距离

    //限制两个物体之间的距离 if (Vector3.Distance(B.position, A.position) > maxDistance) { //获得两个物体之间的单位向量 Vecto ...

  10. Java学习笔记:2022年1月8日

    Java学习笔记:2022年1月8日 摘要:这天主要学习了HTML超文本标记语言以及CSS层叠样式表的基本知识,主要就是通过这两种技术进行基本的网页渲染. 目录 Java学习笔记:2022年1月8日 ...