❤HTML引用React 和 Ant Design

❤HTML使用React 和 Ant Design

1、引入React 和 Ant Design

第一步:引用React
第二步:引用antd和相关依赖库
第三步:使用antd组件,antd.components

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>antd</title>
    <!-- 1 引用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>

    <!-- 2 引用babel转化React-->
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <!-- 3 引用moment React-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

    <!-- 4 引用antd-->
    <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
    <link rel="https://unpkg.com/[email protected]/dist/antd.min.css" />
</head>
 
<body>
    <script type="text/babel">
    ReactDOM.render(
      <div>
      Hello antd
      <br/>
      <antd.Button type="primary">Primary</antd.Button>
      </div>,
      document.getElementById("app")
      )
    </script>
    <div id="app">
    	<antd.Button type="primary">Primary</antd.Button>
    </div>
</body>
 
</html>

生厂环境和开发环境cdn

// 适用于开发环境:
<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 crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>


// babel  v6或稳定版
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2、使用

3、报错

报错:Uncaught TypeError: Wf(…) is not a function和Uncaught ReferenceError: antd is not defined

原因:antd有个依赖库moment.js没有被引入,所以antd对象不能生成。

解决:把moment.js引入即可,

你可能感兴趣的:(React,html,react.js,javascript)