React学习之路-准备工作

news2025/1/31 11:17:03

一、3W

React是什么?

React 起源于 Facebook 的内部项目,因为该
公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设
 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

为什么要学React?

Vue 、 React、 Angular 是目前最主流的三大前端框架, React 便是其中的佼佼者。在很多的企业招聘信息中,你都会看到 React 的身影,可见,所有的前端初学者、开发者,已经到了不得不学习它的时刻。

https://npm-stat.com/

a90b3c42facb48eeb48400ecbb6afde4.jpg

React的下载量远远高于另外两个框架。

学习React可以做什么?

React在国外应用的比较多,例如Facebook、Yahoo、Raddit等都有使用到它。在国内的应用也逐渐火热,很多大厂都有尝试使用react(比如知乎,豆瓣,优酷等)。前端技术发展日新月异,截止2022年第一季度,国内前端框架使用上大多是偏向于vue的,培训机构也大多针对vue进行培训,这导致React的前端工程师相对稀缺。在学习难度上React的难度比vue稍高,这也是很多对应聘者要求较高的公司需要应聘者有react开发经历的原因。

二、官方网站

React – A JavaScript library for building user interfaces

快速入门 – React

三、开发工具

工具:

1、性能好的电脑(如mac)

2、JavaScript运行时环境 Node.js

3、编写代码工具 Visual Studio Code - Code Editing. Redefined

四、Mac快捷键

想提高开发效率,就要使用电脑快捷键

和Mac小白一起,学习下面的快捷键吧

77a038598ced4c8ebf4e8f707e81c517.jpeg

84bbf05bfd054a7ab7d0f5943596b483.jpeg

08d6c7c7836f4a3596bcee42333bc81c.jpeg

8f4815183cc540a5be1f326b0e6f156e.jpeg

cf312cc9474a4568a74096f3b1360222.jpeg

五、安装工具

1、Node.js  在官方网站下载后,傻瓜式安装就可以(LTS稳定版)

31e2da6720fb4db8b9d8cb4283fd24be.png

2、Visual Studio Code 在官网站下载后,傻瓜式安装就可以(根据电脑系统选择)

f7960c94c09846b99983a20fd33a1de8.png

b8d7ef3871a844a493f385d26271a4ec.png

遇到的问题:

在国内,Visual Studio Code下载速度如蜗牛

b5fdb07fe9e543cc8f865894256d485c.png

解决办法:

复制下载链接后,将下载地址中的 az764295.vo.msecnd.net 更换为 vscode.cdn.azure.cn 使用国内的镜像服务器加速。

六、创建React项目

最重要的一个环节,前面的都是准备工作。 

打开终端输入指令:

1、node -v (查看Node.js是否安装成功,如果显示版本号,就说明安装成功)

2、npm -v (查看npm版本)

3、cd 指定文件夹

4、安装create-react-app脚手架

根据Node.js版本,使用如下命令:

npx create-react-app myapp

npm install -g creat-react-app
create-react-app my-app

5、cd myapp

6、npm install (初始化)

7、npm start (启动)

第一个React项目就创建成功了!!! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/631703.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux 环境执行npm没有反应 (省流:卸载重装)

今天早上在执行工程 npm run dev 时,发现没有反应,也没有提示任何错误,就直接跳过了。 接着我又试了试其他命令 npm -v / npm init / npm … 都无效。 windows 下的解决方案 于是我上网查询了一番,发现的确也有其他人遇到这种…

虚函数表不一定总是在对象的起始位置

在我之前的一篇文章 “COM 对象的内存布局”中,作为举例,我将对象的虚函数表指针放置在了底层 C 对象的起始位置,但是值得注意的是,虚函数表指针指向的位置并没有一个实际的标准。即使将虚函数表放置在对象中间,甚至是…

计算机网络编程 | 并发服务器代码实现(多进程/多线程)

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和…

基于 Quivr 搭建个人知识库

目录 Quivr介绍 Quivr特性 Quivr演示 Demo with GPT3.5: Demo of the new version: Quivr实战 Quiv 使用的主要技术 Quiv 实践依赖 创建Supabase项目 部署Quiv项目 第一步:现在源码 第二步:设置环境变量 第三步:执行sql 第…

http1.0,http1.1,http2.0,http3.0 区别有哪些

20 世纪 60 年代,美国国防部高等研究计划署(ARPA)建立了 ARPA 网,这被认为是互联网的起源。70 年代,研究人员基于对 ARPA 网的实践和思考,发明出了著名的 TCP/IP 协议。该协议具有良好的分层结构和稳定的性…

Docker部署开源项目Django-CMS企业内容管理系统

Docker部署开源项目Django-CMS企业内容管理系统 一、Django-CMS介绍1.1 Django-CMS简介1.2 Django-CMS特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、下载django-cms-quic…

JS 之 事件Event对象详解(属性、方法、自定义事件)

一、Event对象 1、简介 ​ 事件event对象是指在浏览器中触发事件时,浏览器会自动创建一个event对象,其中存储了本次事件相关的信息,包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后,会自动将该对象作为参数传…

NLP——WordNet;Word Similarity; Word Sense Disambiguition

WordNet WordNet是一个广泛使用的英语词汇数据库和语义网络。它由普林斯顿大学认知科学实验室开发,旨在帮助人们理解单词之间的关系和意义。WordNet的主要目标是将英语词汇组织成一种层次结构,其中每个词都与其他相关词联系起来。WordNet中的单词按照它们…

[6]PCB设计实验|认识常用元器件|电阻器|18:30~19:00

目录 一、电阻器主要用途 1. 稳定和调节电路中的电流和电压 2. 作为分流、分压和负载使用 二、常见电阻器 1. 贴片电阻 2. 热敏电阻 3. 限流电阻 4. 可调电阻 5. 排阻(网络电阻) 三、几种常用电阻器的结构特点 四、电阻的参数 1. 额定功率 电阻器功率的表示 ​2…

自学黑客/网络安全工具软件大全100套

黑客工具软件大全100套 1 Nessus:最好的UNIX漏洞扫描工具 Nessus 是最好的免费网络漏洞扫描器,它可以运行于几乎所有的UNIX平台之上。它不止永久升级,还免费提供多达11000种插件(但需要注册并接受EULA-acceptance–终端用户授权…

【六一儿童节】回忆一下“童年的记忆”

文章目录 [TOC](文章目录) 前言一、EasyX带我们步入了童话的世界1.1绘画哆啦A梦2.2绘画出来喜羊羊 二、我的六一故事总结 前言 我们都有过童年,并且从现在看来,童年是我们最希望可以回去的那段时光,那时候的我们傻傻的,并且很天真…

电子元器件解析02之电容(一)——定义与性能参数

下篇文章:电子元器件解析02之电容(二)——电容分类与应用场景:https://blog.csdn.net/weixin_42837669/article/details/131142767 摘要 电容是最基本的电子元器件之一,本文介绍了电容的定义,并总结了电容的各个性能参数&#xff…

leetcode143. 重排链表(java)

重排链表 leetcode143. 重排链表题目要描述 解题思路代码链表专题 leetcode143. 重排链表 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/reorder-list 题目要描述 给定一个单链表 L 的头节点 head ,单链表 …

根据字节、华为、阿里、腾讯等大厂整理的2023最新面试热点问题,还不行我也救不了你了~

大厂面试热点问题 1、测试人员需要何时参加需求分析? 如果条件循序 原则上来说 是越早介入需求分析越好 因为测试人员对需求理解越深刻 对测试工作的开展越有利 可以尽早的确定测试思路 减少与开发人员的交互 减少对需求理解上的偏差 2、软件测试与调试的关系 测…

MM32F3273G8P火龙果开发板MindSDK开发教程11 -获取msa311加速器的xyz轴数据

MM32F3273G8P火龙果开发板MindSDK开发教程11 -获取msa311加速器的xyz轴数据 1、msa311简介 使用i2c总线 可以读取xyz轴的加速度 可以监测单击双击事件 可以监测运动与静止状态 可以监测自由落体事件,可用来监测摔倒或跌落。 可以监测旋转事件,类似手机…

工作中自我或者团队管理的几个有用工具

个人或者团队管理过程中,采用一些有效的管理工具或者方法,可以提升工作效率和结果。它们包括SMART原则、PDCA循环、SWOT分析、5W2H分析、鱼骨图分析、七个凡是。这几个工具或者方法之间有互通性,比如,PDCA循环中,在P这…

数学建模预备知识(1)全网最全的数学建模竞赛汇总,别再被坑了!

🌅*🔹** φ(゜▽゜*)♪ **🔹*🌅 欢迎来到馒头侠的博客,该类目主要讲数学建模的知识,大家一起学习,Qq及各类联系方式在图片上! 喜欢的朋友可以关注下,下次更新不迷路&…

【MySQL】为什么MySQL选择B+Tree来做索引?

B树和B树的区别? B树 B树 B*树 B树和B树的区别 (1)存储量大:B树叶子及非叶子节点存索引数据,B树叶子非叶子节点存索引,叶子节点存数据; (2)查找速度: 查单个值&…

细说websocket - php篇

下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket 套接字做了封装处理,开发者使用的时候只需要考虑数据的交互而不用处理连接的建立…

运营-22.内容分发

内容分发 内容分发本质要解决的问题包含两点: 1. 高效的连接人与信息; 2. 过滤出有价值的信息,让合适的人看到合适的信息 。 常见的内容分发方式: 1. 编辑分发; 2. 订阅分发; 3. 社交分发; 4. 算…