React 概述
什么是 React？
- React 是由 Facebook 研发的、用于 解决 UI 复杂度 的开源 JavaScript 库，目前由 React 联合社区维护；
- 它不是框架，只是为了解决 UI 复杂度而诞生的一个 库；
React 的特点
轻量：React 的开发版所有源码 （包含注释） 仅 3000 多行；
原生：所有的 React 的代码都是用原生 JS 书写而成的，不依赖其他任何库；
易扩展：React 对代码的封装程度较低，也没有过多的使用魔法，所以 React 中的很多功能都可以扩展；
不依赖宿主环境：React 只依赖原生 JS 语言，不依赖任何其他东西，包括运行环境；因此，它可以被轻松的移植到浏览器、桌面应用、移动端；
渐近式：React 并非框架，对整个工程没有强制约束力；这对与那些已存在的工程，可以逐步的将其改造为 React 而不需要全盘重写；
单向数据流：所有的数据自顶而下的流动；
用 JS 代码声明界面；
组件化；
React 对比 Vue
| 对比项 | Vue | React |
|---|---|---|
| 全球使用量 | ✅ | |
| 国内使用量 | ✅ | |
| 性能 | ✅ | ✅ |
| 易上手 | ✅ | |
| 灵活度 | ✅ | |
| 大型企业 | ✅ | |
| 中小型企业 | ✅ | |
| 生态 | ✅ |
hello world
使用 React.createElement
创建一个 React 元素，称作虚拟 DOM，本质上是一个对象；
- 参数 1：元素类型，如果是字符串，一个普通的 HTML 元素；
- 参数 2：元素的属性，一个对象；
- 后续参数：元素的子节点；
<div id="root"></div>
<!-- React 的核心库，与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 依赖核心库，将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
//创建一个 span 元素
var span = React.createElement("span", {}, "一个span元素");
//创建一个 H1 元素
var h1 = React.createElement("h1", { title: "第一个React元素" }, "Hello", "World", span);
ReactDOM.render(h1, document.getElementById("root"));
</script>
使用 JSX（推荐）
JSX 是 JS 的扩展语法，需要使用 babel 进行转义；
<div id="root"></div>
<!-- React 的核心库，与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 依赖核心库，将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(<h1 title="第一个React元素">Hello World <span>一个span元素</span></h1>, document.getElementById("root"));
</script>
使用脚手架
凡是使用 JSX 的文件，必须导入 React；
- 官方：create-react-app；
- 第三方：next.js、umijs；
创建 React 项目
-
通过脚手架来创建 React 项目，项目名称不能包含大写字母；
create-react-app test-react -
目录结构分析：
test-react ├─ README.md // readme说明文档 ├─ package.json // 对整个应用程序的描述：包括应用名称、版本号、一些依赖包、以及项目的启动、打包等等 ├─ public │ ├─ favicon.ico // 应用程序顶部的icon图标 │ ├─ index.html // 应用的index.html入口文件 │ ├─ logo192.png // 被在manifest.json中使用 │ ├─ logo512.png // 被在manifest.json中使用 │ ├─ manifest.json // 和Web app配置相关 │ └─ robots.txt // 指定搜索引擎可以或者无法爬取哪些文件 ├─ src │ ├─ App.css // App组件相关的样式 │ ├─ App.js // App组件的代码文件 │ ├─ App.test.js // App组件的测试代码文件 │ ├─ index.css // 全局的样式文件 │ ├─ index.js // 整个应用程序的入口文件 │ ├─ logo.svg // 刚才启动项目，所看到的React图标 │ ├─ serviceWorker.js // 默认帮助我们写好的注册PWA相关的代码 │ └─ setupTests.js // 测试初始化文件 └─ yarn.lock
开发环境
-
VSCode 的 emmet 配置：
"javascript": "javascriptreact" -
VSCode 插件安装：
- ESLint 代码风格检查；
- ES7 React/Redux/GraphQL/React-Native snippets 快速代码编写；
-
Chrome 插件 React Developer Tools 安装；
打赏作者
您的打赏是我前进的动力
微信
支付宝
leetcode🧑💻 968. 监控二叉树
上一篇
评论
