React 18.2.0 已经发布很久了,这几天抽空重新完整的过了一遍 React
的官网,并结合当时学习React 16.8
的总结,将笔记和案例记录下来,方便以后查阅
和迭代
。
总的来说react的语法不算太多,打算按照 React 官网
文档的教程顺序,从 安装 -> 核心概念 -> 高级指引 -> hook
开始。
本文档会结合一些案例(基于react18)
,方便大家阅读和实践,以备 开箱即用
。
在网站添加 React
- 直接在页面上使用React,引用下面的JS
<!-- React的核心库,与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 依赖核心库,将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
- 注意
部署时,将 development.js
替换为 production.min.js
。
一分钟用上 React
React.createElement
创建一个React元素
,称作虚拟DOM
,本质上是一个对象。
参数1
:元素类型
,如果是字符串,一个普通的HTML元素。
参数2
:元素的属性
,一个对象。
后续参数
:元素的子节点
,是React元素。
- 案例
<body>
<!-- 1. 我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它,并在其中显示一个 React 组件。 -->
<div id="app"></div>
<!-- 2. 加载 React。-->
<!-- React的核心库,与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 依赖核心库,将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 3. 加载我们的 React 组件。-->
<script>
'use strict';
//创建一个span元素
var span = React.createElement('span', {}, '一个span元素');
//创建一个H1元素
var h1 = React.createElement(
'h1',
{
title: '第一个React元素'
},
'Hello',
'World',
span
);
const domContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(domContainer);
// 把react元素(虚拟dom) 变成真实的dom对象。
root.render(h1);
</script>
</body>
- 完整案例
react-note/1.安装/1.1-在网站添加 React at master · PantherVkin/react-note (github.com)
可选:使用 React 和 JSX
JSX
JS的扩展语法,需要使用babel进行转义。
底层使用React.createElement
。
- 快速尝试
JSX
你可以在任何 <script>
标签内使用 JSX,方法是在为其添加 type="text/babel"
属性。
<body>
<!-- 1. 我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它,并在其中显示一个 React 组件。 -->
<div id="app"></div>
<!-- 2. 加载 React。-->
<!-- React的核心库,与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 依赖核心库,将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 3. babel 编译 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 4. 加载我们的 React 组件。-->
<script type="text/babel">
'use strict';
// var h1 = React.createElement("h1", {
// title: "第一个React元素"
// }, "hhhh");
const h1 = <h1 title="第一个React 元素">hhhh</h1>;
const domContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(domContainer);
// 把react元素(虚拟dom) 变成真实的dom对象。
root.render(h1);
</script>
</body>
- 完整案例
react-note/1.安装/1.2-快速尝试JSX at master · PantherVkin/react-note (github.com)
创建新的 React 应用
推荐的工具链:React 团队主要推荐这些解决方案。
-
如果你是在学习 React 或创建一个新的单页应用,请使用 Create React App。
-
如果你是在用 Node.js 构建服务端渲染的网站,试试 Next.js。
-
如果你是在构建内容主导的静态网站,试试 Gatsby。
-
如果你是在打造组件库或将 React 集成到现有代码仓库,尝试更灵活的工具链。
Create React App
Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。
你需要在你的机器上安装 Node >= 14.0.0 和 npm >= 5.6。
npx create-react-app my-app
cd my-app
npm start
Next.js
Next.js 是一个流行的、轻量级的框架,用于配合 React 打造静态化和服务端渲染应用。
它包括开箱即用的样式和路由方案,并且假定你使用 Node.js 作为服务器环境。
从 Next.js 的官方指南了解更多。
Gatsby
Gatsby 是用 React 创建静态网站的最佳方式。
它让你能使用 React 组件,但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。
CDN 链接
开发环境
可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
生产环境
上述版本仅用于开发环境,不适合用于生产环境。
压缩优化后可用于生产的 React 版本可通过如下方式引用:
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
如果需要加载指定版本的 react
和 react-dom
,可以把 18
替换成所需加载的版本号。
为什么要使用 crossorigin
属性?
如果你通过 CDN 的方式引入 React,我们建议你设置 crossorigin
属性:
<script crossorigin src="..."></script>
我们同时建议你验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: *
HTTP 请求头:
这样能在 React 16 及以上的版本中有更好的错误处理体验。