react 搭建开发环境

简介: react 搭建开发环境

1. 下载安装 node.js

下载安装最新版 node.js

若已安装过node.js,请检查版本是否满足需求

  • Node >= 14.0.0
  • npm >= 5.6


若版本过低,则重新安装最新版即可。

2. 创建项目

在用于创建 react 项目的文件夹中打开终端,执行命令

npx create-react-app my-app1

若提示是否安装 create-react-app,则输入 y 后按回车即可。

若出现以下报错

npm ERR! network This is a problem related to network connectivity.

则需先使用以下命令清除缓存后重试

npm cache clean --force

项目创建成功后,会得到

用 vscode 打开文件夹 my-app1,在NPM脚本中启动项目

浏览器中访问 http://localhost:3000/

至此证明项目创建成功!

3. 启动项目

在第2步中,已介绍了使用vscode快速启动项目的方法

使用命令行启动项目的方法为在项目目录中打开终端执行命令

npm start

4. 打包项目

在项目目录中打开终端执行命令

npm run build

目录
相关文章
|
11小时前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
6 0
|
2月前
|
前端开发
React快速入门
React快速入门
20 0
|
7月前
|
前端开发
react快速上手
react快速上手
35 0
react快速上手
|
9月前
|
资源调度 前端开发 JavaScript
简单搭建react开发环境
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 安装前需要安装:node.js、vscode 一、node.js使用 运行Node.js command prompt,输入命令: npx create-react-app my-app (如下图) 安装完成截图如下: 至此,react安装完成,可以直接在npom控制台运行,我放到v..
28 0
简单搭建react开发环境
|
10月前
|
存储 缓存 前端开发
react hooks 全攻略
react hooks 全攻略
|
12月前
|
前端开发 JavaScript vr&ar
【React 入门系列 01】React 入门 & 环境搭建
React是一个用于构建用户界面的JavaScript库。React是基于声明式、组件化开发方式。什么是声明式?通过使用JavaScript代码来描述UI(HTML页面)展示是什么样的,就和写HTML本质上是一样的。由React来负责UI的渲染,并在数据变化时更新UI。 React基于组件化方式进行开发。把构建页面的一部内容进行封装,在相似甚至相同的场景下进行复用,通过这样的方式进行代码的复用以及页面的构建。 React支持多端开发的场景。使用React可以开发Web端,基于React-Native可以实现移动端场景开发。使用React(React 360)开发VR应用。
|
前端开发 JavaScript
React快速入门(1)之HelloReact
React快速入门(1)之HelloReact
45 0
|
前端开发 JavaScript 定位技术
初识 react 一分钟上手
单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
初识 react 一分钟上手
|
前端开发 JavaScript
搭建一个React项目
搭建一个React项目
116 0
|
JavaScript 前端开发 算法
React 初体验
React 初体验
155 0

热门文章

最新文章

  • 1
    流量控制系统,用正则表达式提取汉字
    25
  • 2
    Redis09-----List类型,有序,元素可以重复,插入和删除快,查询速度一般,一般保存一些有顺序的数据,如朋友圈点赞列表,评论列表等,LPUSH user 1 2 3可以一个一个推
    26
  • 3
    Redis08命令-Hash类型,也叫散列,其中value是一个无序字典,类似于java的HashMap结构,Hash结构可以将对象中的每个字段独立存储,可以针对每字段做CRUD
    26
  • 4
    Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
    27
  • 5
    S外部函数可以访问函数内部的变量的闭包-闭包最简单的用不了,闭包是内层函数+外层函数的变量,简称为函数套函数,外部函数可以访问函数内部的变量,存在函数套函数
    24
  • 6
    Redis06-Redis常用的命令,模糊的搜索查询往往会对服务器产生很大的压力,MSET k1 v1 k2 v2 k3 v3 添加,DEL是删除的意思,EXISTS age 可以用来查询是否有存在1
    30
  • 7
    Redis05数据结构介绍,数据结构介绍,官方网站中看到
    22
  • 8
    JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
    20
  • 9
    JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
    20
  • 10
    定义好变量,${age}模版字符串,对象可以放null,检验数据类型console.log(typeof str)
    19