[前端][杂项] React版本-Toy模板网

这篇具有很好参考价值的文章主要介绍了[前端][杂项] React版本。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

前端框架版本迭代很快，所以熟悉框架的版本也很重要。
React 版本介绍。github上有更加详细的文档
React历史版本下载
因为 React 使用的是 jsx 如果要在浏览器环境中使用 jsx 那么还需要使用babel.js把jsx转换成原生js文件才能被浏览器使用。
babel官网
babel使用
这个babel更是重量级。首先从它的github 的release下载的东西根本就没有babel.js.
最好通过 https://unpkg.com/@babel/standalone@7.24.4/babel.min.js 这种通过更改url的方式配合 github的版本号进行下载。浏览器普通下载JavaScript文件的方式也是重量级。浏览器会直接把JavaScript的内容加载出来，但是别慌，直接右键另存为即可

代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React版本测试</title>
</head>
<body>
    <div id="test"></div>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
        function MyComponent(){
            return <h1>React版本问题</h1>
        }
        ReactDOM.render(<MyComponent />, document.querySelector("#test"));
    </script>
</body>
</html>

antd版本
antd版本也是重量级，首先在比较老的版本 antd 依赖一个moment.js后来这个又变成了dayjs
antd引入
最后还是要在unpkg里面下载 antd下载

最后纯浏览器下能同时antd和react的代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Antd</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.19.3/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.23.4/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.23.4/antd.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
  state = {
    date: null,
  };
  handleChange = date => {
    antd.message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    return (
      <antd.ConfigProvider>
        <div style={{ width: 400, margin: '100px auto' }}>
          <antd.DatePicker onChange={this.handleChange} />
          <div style={{ marginTop: 20 }}>
            当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
          </div>
        </div>
      </antd.ConfigProvider>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>