React学习之路-准备工作

news/2024/7/15 18:24:49 标签: react.js, 学习, javascript

一、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.niftyadmin.cn/n/419193.html

相关文章

1.Apollo部署-linux

一.官方文档 https://www.apolloconfig.com/#/zh/deployment/quick-start-docker 二.环境准备 1.MySql 5.6.51.单独服务器192.168.2.13 https://downloads.mysql.com/archives/installer/ 2.JDK 1.8.X https://www.oracle.com/java/technologies/downloads/ 三.Apollo部署…

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

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

EasyX实现简易贪吃蛇

📝个人主页:认真写博客的夏目浅石. 📣系列专栏:夏目的C语言宝藏 文章目录 前言一、头文件包含二、创建蛇与食物的结构体三、游戏的初始化四、游戏的绘画事件五、蛇的移动事件六、输入方向七、生成食物八、吃食物九、游戏失败的判定…

NumPy库的学习

本文主要记录的是笔者在B站自学Numpy库的学习笔记。 引入numpy库 import numpy as np矩阵的创建 创建一个二行三列的矩阵。 array np.array([[1,2,3],[2,3,4]])查看array的行数、形状、元素数量 print("number of dim:",array.ndim) print("shape:"…

文心一言 VS 讯飞星火 VS chatgpt (37)-- 算法导论5.4 1题

一、一个屋子里必须要有多少人,才能让某人和你生日相同的概率至少为1/2? 必须要有多少人,才能让至少两个人生日为 7月 4 日的概率大于 1/2? 文心一言: 一个屋子里必须要有多少人,才能让某人和你生日相同的概率至少为1/2&#…

[解决方案]springboot怎么接受encode后的参数(参数通过=拼接)

springboot怎么接受encode后的参数(拼接& springboot怎么接受encode后的参数(拼接&)问题出现原因发送encode后的值在postman里面的情况这个时候该如何接受呢(encode后的值接受)controller层的代码用到的工具类CRequest springboot怎么接受encode…

Android应用程序进程的启动过程

Android应用程序进程的启动过程 导语 到这篇文章为止,我们已经简要地了解过了Android系统的启动流程了,其中比较重要的内容有Zygote进程的启动和SystemService以及Launcher的启动,接下来我们将要学习的是Android应用程序的启动过程&#xff…

细说websocket - php篇

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