Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >三分钟搭建React开发环境

三分钟搭建React开发环境

作者头像
王小婷
发布于 2025-05-19 06:38:32
发布于 2025-05-19 06:38:32
6100
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
640?wx_fmt=png
640?wx_fmt=png

其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~

老规矩,先看完官方文档:教程:https://www.runoob.com/react/react-tutorial.html文档:http://caibaojian.com/react/

简介:简介:React是Facebook开发的一款JS库,是一个声明式、组件化并且用于构建用户界面的 JavaScript 库,通俗来讲就是将界面分成可以复用的组件,在需要时引入,使界面解耦,互不影响而又相互联系,在界面更新时,只会更新需要更新的组件,使得效率和性能上大大提升。

本着学习的精神,开始了搭建react开发环境之前需要准备的工作:

1:安装node.js,查看版本号
640?wx_fmt=png
640?wx_fmt=png
2:安装cnpm替代npm,查看版本号
640?wx_fmt=png
640?wx_fmt=png
3:yarn,查看版本号
640?wx_fmt=png
640?wx_fmt=png

不会安装yarn的童鞋,可以查看官方文档。

使用安装命令:npm i -g yarn

640?wx_fmt=png
640?wx_fmt=png

以上三大步骤就不细说了,准备工作完成后

4:安装脚手架

cnpm install -g create-react-app

640?wx_fmt=png
640?wx_fmt=png
5:在d盘创建一个空目录,存放项目
640?wx_fmt=png
640?wx_fmt=png
6:进入文件夹,创建项目
640?wx_fmt=png
640?wx_fmt=png

create-react-app reactdemo

等待生成我们的项目之中(网络慢的话可能要等几分钟哦)

640?wx_fmt=png
640?wx_fmt=png

可以看到,d盘里面初始化的这个项目了

640?wx_fmt=png
640?wx_fmt=png
7:cd  到刚刚生成的项目文件里面,运行项目
代码语言:javascript
代码运行次数:0
运行
复制

弹出浏览器,显示界面,react环境安装完成了。

640?wx_fmt=png
640?wx_fmt=png
640?wx_fmt=png
640?wx_fmt=png

从零开始学习React-开发环境的搭建完成,忽然觉得,是不是和vue的操作步骤是一样一样的呐。

代码语言:javascript
代码运行次数:0
运行
复制
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-11-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从零开始学习React-开发环境的搭建(一)
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
王小婷
2025/05/19
3090
从零开始学习React-开发环境的搭建(一)
从零开始学习React-开发环境的搭建(一)
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
王小婷
2019/11/05
7940
React(一)
最近一周工作太忙了,用 C# 写了 API、建了数据库、部署了服务器(从 Docker 迁移回了 IIS,API 在 Docker 中的访问速度不稳定,出现随机访问超时问题,应该是 Windows 下,Docker 性能有问题或 SELinux 的问题?)、写了一个钉钉的 E 应用接入公司的系统。由于一直写前台,这一段时间确实认识到了对后台的了解不够深入,但路还是得一步一步走。
1ess
2021/11/01
5170
React基础(1)-create-react-app
如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词
itclanCoder
2019/09/12
1.7K0
React基础(1)-create-react-app
一、环境搭建、以及聊聊更重要的...
它给我们提供了一个开发思路以及少量的API,这些API学习起来还算轻松。不过在阅读此系列文章之前,应该有不少读者已经通过官方文档或者其他途径开始尝试学习React,并且在学习过程中遇到了困难。这些困境会给大家带来一些React难以攻克的假象。
用户6901603
2020/07/25
8030
一、环境搭建、以及聊聊更重要的...
vue2.0 + element-ui 实战项目- 搭建环境(一)
vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html element-ui官方网站:https://element.eleme.cn/#/zh-CN
王小婷
2020/10/30
6.8K0
vue2.0 + element-ui 实战项目- 搭建环境(一)
三分钟了解 yarn.lock/package-lock.json
为何有人说第三方库不需要提交 package-lock.json/yarn.lock?
山月
2021/11/29
1.3K0
vscode搭建react框架(vscode补全js方法)
点击链接查看图文教程 https://blog.csdn.net/qq_45677671/article/details/114535955
全栈程序员站长
2022/07/28
1.6K0
vscode搭建react框架(vscode补全js方法)
React开发环境准备
React.js是facebook推出的,2013年开源的,是函数式编程,使用较多,有健全的文档与完善的社区。
达达前端
2019/12/20
8660
React开发环境准备
十分钟上手-搭建vue开发环境(新手教程)
想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue开发环境,运行GitHub上的开源项目。步骤很简单,只是在搭建环境的过程中会遇到各种各样奇怪的报错,十分让人头疼。
王小婷
2025/05/18
3940
十分钟上手-搭建vue开发环境(新手教程)
React开发环境搭建、项目创建、命令使用
前言 一、Node.js下载安装 二、创建React项目 三、React项目常用npm命令使用 总结
main方法
2020/12/07
2.7K0
React开发环境搭建、项目创建、命令使用
配置React开发环境教程
这是一篇新手向文章,主要是记录一下使用过程,希望能给予别人一些帮助和提示 用 Yarn 做包管理 用 Babel 做jsx和es6语法编译器 Webpack 做模块管理和打包 教程是基于macOS的,Nodejs得提前安装好。我的Nodejs和npm的版本如下 node -v v6.9.2 npm -v 3.10.9 Yarn安装和配置 我们在 macOS 下可以通过brew去安装,如下 brew update brew install yarn Yarn 下载的包或者模块都是跟npm一个源的,因为某些原
用户1203875
2018/07/20
7500
手把手小程序开发【1-WePY的安装】
在心中,你是一棵大树,我是大树上的一片绿叶;在心中,你是一座花园,我是花园里的一朵小花;在心中,你是一幢大厦,我是大厦里的一块砖石;在心中,祖国,永远爱着你!
Lemon黄
2019/10/08
1.1K0
手把手小程序开发【1-WePY的安装】
我的第一个React应用
说起前端框架,我的第一反应就是Angular,Vue和React了,在实习的时候Vue和Angular都使用过,也写过相关的博客,包括自己毕业设计就是Angular来做的,但是毕业之后,在现在家公司就没有机会去使用这些框架(实际上我对于Java更加感兴趣),所以现在对于前端框架的了解可能只是知道一些名词了。这次由于公司产品新的版本用的是React框架,所以有了学React的想法(当然只是想简单的学一些,够用就行了)
每天学Java
2020/06/02
2.1K0
三分钟迁移 antd@4
antd@4 rc 发布已经有一段时间了(大概已经两周了),官网[1] 也已同步放出。最为一个酷爱尝鲜的人,当然要第一时间安装升级。在咨询了豆酱老师得到了api 不会修改的承诺之后,我已经在自己的项目中迁移完成。第一时间享受到了的 antd@4 各种优势。
coder_koala
2020/03/03
1.9K0
三分钟迁移 antd@4
React 基础
当翻阅很多的 React 教程时,在前言或者建议中会提醒你在想要去接触 React 之前,你应该会些啥?笼统的讲就是你应该有一定的 Web 开发基础,即你要认识什么是 HTML5 (Hyper Text Markup Language 5)、 CSS (Cascading Style Sheet)以及 JavaScript 。有了这两样东西你完全就可以写出一些网页了,比如一个简单的登录页面、一个表格展示页面又或者一个表单页面……当你具备了一定的审美和逻辑之后,这些静态的网页便可以信手捏来了(不知道这个词是不是这么用的),如果你不满足于此,想要一个既美观又炫酷的网页,那可能就需要一些 JS (JavaScript)了。而本系列的就在于解决这个问题以及怎么才能更提高效率,通过较为清晰简单的代码逻辑实现很多的功能。
Lokinli
2023/03/09
4270
React 基础
react开发环境搭建
要创建一个新的 React 项目,可以使用以下几种方法。以下是使用 create-react-app 工具的标准步骤,这是最常用的方法:
肥晨
2024/09/19
1770
react开发环境搭建
React Native在Android当中实践(二)——搭建开发环境
React Native在Android当中实践(一)——背景介绍 React Native在Android当中实践(二)——搭建开发环境 React Native在Android当中实践(三)——集成到Android项目当中 React Native在Android当中实践(四)——代码集成 React Native在Android当中实践(五)——常见问题
Demo_Yang
2018/10/15
1.3K0
React环境搭建
React是当下前端生态圈流行的框架之一,与Vue和Angular并称前端三架马车。今天,我们就一起来学习下React,今天的主要内容有。
江涛学编程
2020/07/24
1.6K0
测开技能--Web开发 React 学习(二)环境搭建
开发环境的搭建,才是学习的第一步,那么我们看看,应该怎么搭建Recat的环境。那么跟着下面的教程,一步步来吧。
雷子
2021/03/15
3230
测开技能--Web开发 React 学习(二)环境搭建
相关推荐
从零开始学习React-开发环境的搭建(一)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验