目录

前言

一、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. hwlog---huawei.com/npu-exporter/utils---utils.go

    // Copyright(C) 2021. Huawei Technologies Co.,Ltd. All rights reserved.// Package utils offer the so ...

  2. HTTPS详解二

    前言 在上篇文章中,我已经为大家介绍了 HTTPS 的详细原理和通信流程,但总感觉少了点什么,应该是少了对安全层的针对性介绍,那么这篇文章就算是对HTTPS 详解一的补充吧.还记得这张图吧. HTTP ...

  3. 【iOS逆向】某茅台App算法分析还原

    1.目标 某茅台软件的actParam算法分析还原. 2.使用工具 mac系统 frida-ios-dump:砸壳 已越狱iOS设备:脱壳及frida调试 IDA Pro:静态分析 Charles:抓 ...

  4. Linux中如何开启一个定时任务

    Linux的定时任务是基于cron驱动做到的 安装 Ubantu系统下安装crontab 正常情况下需要先执行:apt-get upgrade 进行升级 安装:apt-get install cron ...

  5. AR手势识别交互,让应用更加“得心应手”

    现如今, AR技术不断发展,人们不再满足于运用键盘.鼠标等简单器械来实现传统的人机交互模式.随着用户接触机器的多样化,繁琐的操作不但对一些用户有门槛,而且还增加其学习成本:如果能用自然且符合日常生活习 ...

  6. 关于python导包问题(新手向)

    包和模块 首先要弄清这两个概念, 在python 中 一个文件夹中包含__init__.py 文件(这个文件是包的初始化文件,在你导入包或包下面的模块的时候,这个文件会最开始运行),就会被python ...

  7. freemarker if 回填CheckBox思路

    开发场景中遇到这样的一个问题,在网上也找了一些结局方法,但不成功,于是自己写了一个笨一点的方法,算是一种方法,希望对遇到该开发场景的朋友有所帮助. freemarker html代码: <tab ...

  8. JavaScript入门③-函数(2)原理{深入}执行上下文

    00.头痛的JS闭包.词法作用域? 被JavaScript的闭包.上下文.嵌套函数.this搞得很头痛,这语言设计的,感觉比较混乱,先勉强理解总结一下. 为什么有闭包这么个东西?闭包包的是什么? 什么 ...

  9. Day29 Linux相关命令的使用

    今日内容 基本概念 安装 基本命令 在linux上安装软件 jdk mysql jdk Nginx的安装 一.概述 1.Unix linux基于Unix,Unix由贝尔实验室在1969年开发 一开始由 ...

  10. 【Java SE进阶】Day10 缓冲流、转换流、序列化流 、打印流

    一.缓冲流 1.概述 比普通流更强大的IO流,可以增加读写的效率 组成 缓冲输入流:BufferedInputStream.BufferedReader 缓冲输出流:BufferedOutputStr ...