首页html页面引用react和element UI

html页面引用react和element UI

时间: 2023-10-26 11:16:00 浏览: 97

要在HTML页面中使用React和Element UI，需要先在HTML页面中引入React和Element UI的相关文件，然后再编写React组件并使用Element UI组件。下面是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React and Element UI Example</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="root"></div>  <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> // 编写React组件 function App() { return ( <div> <el-button type="primary">Click me!</el-button> </div> ); } // 渲染React组件到HTML页面 ReactDOM.render(<App />, document.getElementById('root')); </script> </body> </html> ``` 在上面的例子中，我们先引入了Element UI的CSS文件，然后在body中定义了一个id为root的div元素用于渲染React组件。接着，我们引入了React和Element UI的JS文件，并编写了一个名为App的React组件，其中使用了一个名为el-button的Element UI组件。最后，我们通过ReactDOM.render()方法将App组件渲染到HTML页面中的root元素中。

阅读全文