初识React及React开发依赖介绍
文章目录
- 初识React
- React介绍
- React特点
- React的依赖介绍
- React的开发依赖
- Babel和React的关系
- React的依赖引入
初识React
React介绍
React是什么呢?
相信每个做开发的人对它都或多或少有一些印象;
这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库;
目前对于前端开发来说,几乎很少直接使用原生的JavaScript来开发应用程序,而是选择一个JavaScript库(框架)。
在过去的很长时间内,jQuery是被使用最多的JavaScript库;
在过去的一份调查中显示,全球前10,000个访问最高的网站中,有65%使用了jQuery,是当时最受欢迎的JavaScript库;
但是,目前甚至已经处于淘汰的边缘了;
而无论是国内外,最流行的其实是三大框架:Vue、React、Angular
。
React由Facebook来更新和维护,它是大量优秀程序员的思想结晶:
React的流行不仅仅局限于普通开发工程师对它的认可;
大量流行的其他框架借鉴React的思想;
Vue.js框架设计之初,有很多的灵感来自Angular和React。
包括Vue3很多新的特性,也是借鉴和学习了React;
比如React Hooks是开创性的新功能(也是我们课程的重点);
Vue Composition API学习了React Hooks的思想;
Flutter的很多灵感都来自React,来自官网的一段话:(SwiftUI呢)
事实上Flutter中的Widget – Element – RenderObject;
对应React的就是JSX – 虚拟DOM – 真实DOM;
所以React可以说是前端的先驱者
,它总是会引领整个前端的潮流。
React:用于构建用户界面的 JavaScript 库;
React的官网文档:https://zh-hans.reactjs.org/
React特点
声明式编程
声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI;
它允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面;
组件化开发:
组件化开发页面目前前端的流行趋势,我们会将复杂的界面拆分成一个个小的组件;
如何合理的进行组件的划分和设计也是后面我会讲到的一个重点;
多平台适配
2013年,React发布之初主要是开发Web页面;
2015年,Facebook推出了ReactNative,用于开发移动端跨平台;(虽然目前Flutter非常火爆,但是还是有很多公司在使用 ReactNative);
2017年,Facebook推出ReactVR,用于开发虚拟现实Web应用程序;(VR也会是一个火爆的应用场景);
React的依赖介绍
React的开发依赖
开发React必须依赖三个库
:
react:包含react所必须的核心代码
react-dom:react渲染在不同平台所需要的核心代码
babel:将jsx转换成React代码的工具, jsx语法浏览器是不识别的
第一次接触React会被它繁琐的依赖搞蒙,居然依赖这么多东西: (直接放弃?)
对于Vue来说,我们只是依赖一个vue.js文件即可,但是react居然要依赖三个包。
其实呢,这三个库是各司其职的,目的就是让每一个库只单纯做自己的事情;
在React的0.14版本之前是没有react-dom这个概念的,所有功能都包含在react里;
为什么要进行拆分呢?原因就是推出react-native
react包中包含了react web和react-native所共同拥有的核心代码。
react-dom针对web和native所完成的事情不同:
- web端:react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中
- native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIButton)。
Babel和React的关系
babel是什么呢?
Babel ,又名 Babel.js。
是目前前端使用非常广泛的编译器、转移器。
比如当下很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,我们开发时希望使用它。
那么编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法。
React和Babel的关系:
默认情况下开发React其实可以不使用babel。
但是前提是我们自己使用 React.createElement 来编写源代码,它编写的代码非常的繁琐和可读性差。
那么我们就可以直接编写jsx(JavaScript XML)的语法,并且让babel帮助我们转换成React.createElement。
后续文章还会详细讲到;
React的依赖引入
所以,我们在编写React代码时,这三个依赖都是必不可少的。
那么,如何添加这三个依赖:
方式一:直接CDN引入
方式二:下载后,添加本地依赖
方式三:通过npm管理(后续脚手架再使用)
暂时我们直接通过CDN引入,来演练下面的示例程序:
这里有一个crossorigin的属性,这个属性的目的是为了拿到跨域脚本的错误信息
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
初识React及React开发依赖介绍相关推荐
- 初识react(四) react中异步解决方案之 redux-saga
回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱 初识react(二) 实现一个简版的html redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 ...
- 前端每周清单第 33 期:React 16 发布与特性介绍,Expo AR 教程,ExtJS 从崛起到沉寂...
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Rekit Studio简介:用于React和Redux开发的真实IDE
by Nate Wang 内特·王 Rekit Studio简介:用于React和Redux开发的真实IDE (Introducing Rekit Studio: a real IDE for Rea ...
- 使用React和PHP开发游戏:它们的兼容性如何?
"I'd like to make a multiplayer, economy-based game. Something like Stardew Valley, but with no ...
- 使用Golang、Gin和React、esbuild开发的Blog
作者:元亮 360奇舞团工程师 本指北手册,手把手跟大家从头开始构建一个完成一个Go作为服务的Web应用程序 - Blog 完整的应用程序 可以在 github上下载 [1] Go(Golang) ...
- react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
最新文章
- python输入输出流详解_Python 初体验之 输入输出流
- unsigned int vs. size_t
- 初识OneNote 2016
- LeetCode 1490. 克隆 N 叉树(DFS/BFS)
- SLB访问日志分析:基于客户端来源和HTTP状态码的实践
- linux 历史命令快捷键,Linux历史命令及bash快捷键
- 铁乐学Python_day09_函数
- 服务器复制文件进程,服务器复制文件进程
- 关于Winform中的用户代理
- 让Windows下的驱动乖乖在Linux中安家!
- 敏感数据加密存储方案
- 救世之树服务端开服架设服务器搭建教程
- TP6-------对接腾讯云直播
- 计算机插上u盘就无法点亮,好U盘插电脑没反应怎么办?其实很简单可解决
- 1008:美元和人民币
- Excel双条件交叉查询
- 全面的网络诊断-Omnipeek
- 讯鸿喜讯丨民建广州市委科技与信息化委员会莅临讯鸿
- jupyterhub安装
- 你真的会做PPT么?