目录

前言

一、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. ssh明文密码小工具:sshpass

    Xshell 远程时可以用如下方式进行明文密码免交互登陆: ssh 用户:密码@ip 可换到linux时,就不行了,在某些不适合使用公钥免密的情况下,到底该怎样免交互登陆? 于是我找到了sshpass ...

  2. Vue 路由跳转显示空白页面的问题

    在写一个登录界面跳转到首页时,路由如下 export default new VueRouter({ routes: [ { path: "/", name: "Logi ...

  3. Java Web中requset,session,application 的作用域及区别

    三者概述 requset概述: request是表示一个请求,只要发出一个请求就会创建一个request 用处:常用于服务器间同一请求不同页面之间的参数传递,常应用于表单的控件值传递. session ...

  4. java 定时开始执行程序

    package com.zx.ps.web.gzdb; import java.util.Calendar; import java.util.Date; import java.util.Timer ...

  5. Backbone 网络-ResNet v2 详解

    目录 目录 目录 前言 摘要 1.介绍 2.深度残差网络的分析 3.On the Importance of Identity Skip Connection 4.On the Usage of Ac ...

  6. 【HarmonyOS】ArkTS Native开发——使用 system函数创建文件

    ​ ArkTS是HamronyOS优选的主力语言,但官方文档指南中对于Native应用开发并没有详细的描述,只有一篇Codelab可以学习(简易Native C++ 示例(ArkTS) (huawei ...

  7. 解决aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:62356/Admin/' failed问题

    前言 前段时间升级了Visual Studio到v17.1.1最新版本,然后今天来运行之前的一个.net5项目一直提示:aspnetcore-browser-refresh.js:234 WebSoc ...

  8. linux系统部署微服务项目

    **:如果使用阿里云linux服务器 1.设置容器镜像服务 在阿里云平台搜索 "容器镜像服务" 选择"CentOS" 安装/升级Docker客户端 配置镜像加速 ...

  9. 通过GitHub和阿里云自定义域名实现https认证

    在GitHub中的操作 登录GitHub, 点击"Your repositories",进入个人仓库页面: 点击"new",进入新建仓库页面: 仓库名称填写&l ...

  10. 什么是Rabbitmq消息队列? (安装Rabbitmq,通过Rabbitmq实现RPC全面了解,从入门到精通)

    目录 Rabbitmq 一: 消息队列介绍 1.介绍 2.MQ解决了什么问题 1.应用的解耦 2.流量削峰 3.消息分发(发布订阅: 观察者模式) 4.异步消息(celery就是对消息队列的封装) 3 ...