react安装_前端大牛进阶---gt;React必会教程

一、背景介绍01

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

二、环境配置

(一)安装Node.js、npm、cnpm

当我们在官网下载并安装Node时,npm也自动安装好了,一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功(不需要自己手动配置系统环境变量)

a3107e017a2dcdae35c10b5bc81ba412.png

因为国内使用npm很慢,我们可以使用淘宝的cnpm,同时设置镜像地址npm install -g cnpm --registry=https://registry.npm.taobao.org

93141980b3165fc79a0384835a8b7d12.png

安装成功后,可以键入cnpm -v检查是否安装成功

64301ea9decfb406477d7da146ac03b1.png

(二)创建我们的第一个react程序

例如我们要在D:workSpace下创建first-react-demo这个工程,并跑通,我们依次执行如下步骤window下进入D:workSpace这个文件夹,在地址栏键入cmd enter,

829dffcf7ee0737d32a985a5ae24fda5.png

cnpm install -g create-react-app全局安装创建react-app的module(这一步不一定要在workspace目录下)

691780409e2ccf64c45fd5c35930ba65.png

create-react-app first-react-demo 在workspct这个文件夹下创建fist-react-demo这个项目

d81c32deb20e232dfb201415ca165f49.png

但是,有可能会报错 Unexpected end of JSON input while parsing near '....0","dependencies":{"' ,假如报错,需要执行npm cache clean –force

3998b9a9cbdb8eea6b0c077c8e7f9568.png

在创建成功的基础上,我们在打开first-react-demo这个文件夹,地址栏键入cmd并enter,在打开的cmd窗口中,键入npm start

5ec28d852861df7017988423dd61fa20.png

大功告成。浏览器键入localhost:3000即可访问

8b635b5a022c49eb000f84a38c9c9646.png

三、关于样式

03常用:

  • css
  • less, cra 默认不支持 less.
  • sass/scss, cra 默认支持 sass, 只需要装一下 node-sass 工具.
  • 在 rca 中支持 普通样式( 默认 ) 和 模块化样式
  • rac 中的 sass 也是支持者两种语法的
  • 如果后缀名是 .module.sass/scss 那么就会使用 模块化的方式来加载
  • 如果后缀名只有 .sass/scss 那么就会当做普通的样式来加载

四、其他设置

04

  • homepage 用来控制 buil 得到资源的路径
  • proxy 用来配置代理
  • 在解包的 配置文件中找到 一些目录的修改
  • 在不解包的情况下如何配置 webpack
  • 使用一个新包 react-app-rewired 代替 react-scripts 即可

五、福利时间

05相关知识点:

  • React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层
  • 其次React是单向的从数据到视图的渲染,非双向数据绑定
  • 不直接操作DOM对象,而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
  • 不便于直接操作DOM,大多数时间只是对 virtual DOM 进行编程

欢迎大家一起跟我讨论技术问题~如果碰见了技术问题,也可以私信我哦,最后记得点个收藏和关注哦~

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

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

相关文章

透过 3.0 Preview 看 Dubbo 的云原生变革

简介: 做过微服务开发的开发者相信对 Dubbo 都不陌生,Dubbo 是一款能帮助我们快速解决微服务开发、通信以及流量治理的框架。相比于之前只限定在 Java 语言范围内,Dubbo 的多语言版本在这两年呈现了良好的发展势头,其中&#xff0…

扩展云存储边界,阿里云推出全球首个云定义存储产品

云计算正带来一场消除线上线下存储边界的革命。 9月22日,阿里云宣布云存储服务全面升级,包括性能大幅提升300%、时延降低70%的ESSD云盘;可兼容HDFS的数据湖存储OSS,同时推出一款全新产品“云定义存储”(Cloud Defined…

Go Mysql Driver 集成 Seata-Golang 解决分布式事务问题

简介: 2020 年 4 月,我们开始尝试实现 go 语言的分布式事务框架 Seata-Golang。众所周知,Seata AT 模式以无业务代码侵入的特点,被广大开发者推崇。Java 版 Seata AT 模式通过对 DataSource 数据源进行代理,在 sql 语句…

安装redis提示[test] error 2_技术干货分享:一次flask+redis的微服务实战

先说一下需求的场景,策划部门想做一个垂直领域的社区产品,类似与知乎那种,但受益人群是金融行业的从业人员。产品中有一个搜索问题的需求,搜索的问题去题库中进行模糊匹配,终端支持H5/APP/小程序,甚至是微信…

实现阿里云容器镜像服务反向访问代理

简介: 本文会先介绍镜像推送/拉取过程的交互逻辑来梳理需要代理的所有服务,再通过搭建一个公网 HTTPS 反向代理来访问容器镜像服务来向您展示多场景代理访问模式原理。 真实业务场景可能很复杂,因安全、合规、访问限制等原因可能需要&#x…

数字基础设施开源操作系统欧拉全新发布

在华为全联接2021上,面向数字基础设施的开源操作系统欧拉(openEuler)全新发布。欧拉操作系统可广泛部署于服务器、云计算、边缘计算、嵌入式等各种形态设备,应用场景覆盖IT(Information Technology)、CT&am…

mysql 聚簇索引和非聚簇索引_MySQL 聚簇索引 二级索引 辅助索引(上两期中奖名单)...

阅读文本大概需要3分钟。MySQL中每个表都有一个聚簇索引( clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引( secondary indexes )。以InnoDB来说,每个InnoDB表具有一个特殊的索引称为聚集索引。如果表上定义有主…

共筑计算新生态 共赢数字新时代

[中国,深圳,2021年9月25日] 在华为全联接2021上,华为副总裁、计算产品线总裁邓泰华分享了六大数字生态的最新进展,并携手生态伙伴为计算产业带来一系列重磅内容:欧拉开源操作系统(openEuler)全新…

数据湖,已成为海量数据存储与分析的重要承载方式

简介: 在云计算和大数据时代,基于数据开展生产、运营、决策成为常态,根据Gartner报道,2019年数据基建方面的采购费用飙升到660亿美元,占据基础架构类软件费用的24%。数据的存储及应用体系是企业生态运转的中枢神经&…

Fluid 0.5 版本发布:开启数据集缓存在线弹性扩缩容之路

简介: 为了解决大数据、AI 等数据密集型应用在云原生场景下,面临的异构数据源访问复杂、存算分离 I/O 速度慢、场景感知弱调度低效等痛点问题,南京大学PASALab、阿里巴巴、Alluxio 在 2020 年 6 月份联合发起了开源项目 Fluid。 作者 | 顾荣 …

php生成cookie在哪,php程序中cookie的使用方法

Cookie 可以翻译为“小甜品,小饼干” ,Cookie 在网络系统中几乎无处不在,当我们浏览以前访问过的网站时,网页中可能会出现 :你好 XXX,这会让我们感觉很亲切,就好像吃了一个小甜品一样。这其实是…

c#类属性和实例属性_Visual C#类和对象的创建方式,定义类,实例化对象,实例讲解...

定义类类由class member类成员组成,包含字段、属性、方法和事件。其中字段和属性为类的数据成员,用来存储数据;方法负责数据的传递和运算。使用类之前,要进行声明,声明的语法如下:Class 类名称{访问权限 数…

面对不可避免的故障,我们造了一个“上帝视角”的控制台

简介: 混沌工程随着云原生的发展逐渐进入大家的视野,通过混沌工程可以很好地发现和解决在云原生化过程中的高可用问题。阿里巴巴在 2019 年开源了底层的混沌工程工具 - chaosblade,今年年初再次开源混沌工程控制台 chaosblade-box&#xff0c…

腾讯云鼎实验室发布云安全攻防矩阵,绘制九大攻防路径全景图

随着云计算技术和产业的蓬勃发展,企业上云已是数字化转型的必然趋势。但云上千般好,却也给企业带来了全新的安全挑战。云平台不仅要应对传统网络架构中存有的DDoS、入侵、病毒等常态问题,还要高度重视技术架构中虚拟机逃逸、资源滥用、横向穿…

Knativa 基于流量的灰度发布和自动弹性实践

简介: Knative 提供了基于流量的自动扩缩容能力,可以根据应用的请求量,在高峰时自动扩容实例数;当请求量减少以后,自动缩容实例,做到自动化地节省资源成本。此外,Knative 还提供了基于流量的灰度…

nginx 部署_部署 hexo 到 nginx

本来博客是使用 GitHub pages ,但近些日子访问贼慢,刚好手里有一台小机器,当然是要用起来(折腾就对了 )。前置条件:已购买 vps 和域名,按需备案。ssh 登录远程服务器,以 CentOS 为例…

阿里云云效技术专家:一文详解kubernetes下5种常见发布模式如何选择

简介: Kubernetes下5场场景应用发布方式的选择,每种发布模式适合什么样的场景,以及如何在阿里云云效上高效落地。 作者:郑云龙,阿里云云效技术专家 Kubernetes面向通用场景提供了非常灵活的应用管理和运维方式&#…

“西部云安全优才计划”落地西安,为云安全高质量发展夯实才智支撑

9月26日,2021首届-西部云安全峰会在西安顺利召开。聚焦西部云安全发展和人才培养需求,在本次峰会上,腾讯安全云鼎实验室、陕西省计算机学会联合西安多所高校发布了“西部云安全优才计划”,凝聚西安以及西部的安全力量,…

如何做一场高质量的分享?

简介: 最近我发现一些同学的分享越来越趋于“念稿”式。我一边看着分享的同学在上面念稿,另一边看着几十号人在下面看电脑看手机,我心里就特别着急。恨不得我自己上去讲,也恨不得没收了大家的电脑手机。但这种粗暴的方法肯定是不解…

matlab knn实现,Matlab之KNN实现

1. 算法流程1) 通过Matlab产生高斯分布产生两类数据,并标明类别2) 数据初始化:设置K某个常数(一般为奇数)3) 对于每个测试数据,计算其到两类数据的所有点的距离对于上述求得的距离,选出K个最小的,检…