目录
搞清楚前端工程从 javascript 到 react 的演变
本文将概述使用传统javascript渲染到使用react渲染页面的过程和差别，旨在了解react工作原理。
1. 普通的页面
一个简单的页面，使用dom的方式创建文本节点，显示”Hello World”，并显示在页面中，这样写：
<html lang="en">
<head>
<title>Javascript to React</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
// 根据id查找容器元素
const app = document.getElementById('app');
// 动态创建h3和文本元素并追加
const header = document.createElement('h3');
const txt = document.createTextNode('Hello World');
header.appendChild(txt);
// 将h3元素追加到页面容器节点中
app.appendChild(header);
</script>
</body>
</html>
传统的方式，在那个前段技术匮乏的年代，大部份场景都是这样编写。
2. 使用 React 改造
引入 React 依赖，使用 ReactDOM 实现上述功能
<html lang="en">
<head>
<title>Javascript to React</title>
<!-- React Library -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
ReactDOM.render(<h3>Hello World</h3>, app);
</script>
</body>
</html>
上面代码尝试在浏览器中运行，浏览器控制台将会出现以下错误：
这是因为在script中的 <h3></h3>并不是一个有效的javascript，它是一段 jsx 的语法，jsx 是 JavaScript 的语法扩展，允许以熟悉的类似 HTML 的语法描述您的 UI。
现在，浏览器无法立即理解 JSX，因此您需要一个 JavaScript 编译器（例如 Babel）来将 JSX 代码转换为常规 JavaScript。使用下面步骤改造：
- 新增 Babel 库，如上面所说，Babel是一个 JavaScript 编译器，将 jsx 编译成浏览器可以识别的 javascript 语法。
- text/javascript 改成text/jsx，告诉 Babel 哪部分代码需要编译
改完代码如下：
<html lang="en">
<head>
<title>Javascript to React</title>
<!-- React Library -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- ⚠️ Babel Library -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- ⚠️ chang script segment text/jsx -->
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h3>Hello World</h3>, app);
</script>
</body>
</html>
再次运行，达到预期，至此基本的 React 工程改造完成。
3. 组件与值传递
改造上面代码，完成一个基本组件与值传递的例子，这里将 <h3></h3>定义成组件，同时传递变量name进行展示
<html lang="en">
<head>
<title>Javascript to React</title>
<!-- React Library -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Babel Library -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
// function is component
function HelloFun(props) {
return <h3>{ `Hello ${props.name}` }</h3>;
}
const app = document.getElementById('app');
ReactDOM.render(<HelloFun name="Aaron"/>, app);
</script>
</body>
</html>
4. 使用事件与useState
使用上面代码，增加点击 <h3>标签事件
<html lang="en">
<head>
<title>Javascript to React</title>
<!-- React Library -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Babel Library -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
// a simple component
function HelloFun(props) {
const [counter, setCounter] = React.useState(0);
// click event
function clickHandler() {
setCounter(counter + 1);
}
return (
<h3 onClick={clickHandler}>
{ `Hello ${props.name}` }, counter is { counter }
</h3>
);
}
// use component
const app = document.getElementById('app');
ReactDOM.render(<HelloFun name="Aaron"/>, app);
</script>
</body>
</html>
最终版效果
Reference
- React Quick Start
- NextJS 13 from-javascript-to-react
- Mdn web docs, Array, Template strings, Function, Arrow function expressions