可以! 可以直接在浏览器中使用 react, 具体做法是引入相关的 reactjs 文件.
下面, 我们将展示如何将 React 组件添加到现有的 html 页面.
步骤 1: 将 DOM 容器添加到 HTML
首先, 打开要编辑的 HTML 页面. 添加一个空 < div > 标签, 以标记要在其中显示内容的位置. 例如:
<div id="like_button_container"></div>
我们给了它 < div > 一个独特的 id 属性. 我们以后可以用 JavaScript 代码找到它, 并在其中显示一个 React 组件
步骤 2: 添加脚本标签
接下来, 在 </body > 前添加三个引用代码
- <!-- Load React. -->
- <!-- Note: when deploying, replace "development.js" with "production.min.js".
- -->
- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>
- </script>
- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
- crossorigin>
- </script>
- <!-- Load our React component. -->
- <script src="like_button.js">
- </script>
- </body>
前两个标签加载 React. 第三个将加载您的组件代码.
步骤 3: 创建一个 React 组件
新建 like_button.JS 文件:
- import React from 'react';
- import ReactDOM from 'react-dom';
- class LikeButton extends React.Component {
- constructor(props) {
- super(props);
- this.state = { liked: false };
- }
- handleClick(event) {
- const nextCount = !this.state.liked;
- this.setState({ liked: nextCount });
- }
- render() {
- var text = this.state.liked ? '喜欢' : '不喜欢';
- return (
- <p onClick={this.handleClick}>
你 < b>{text}</b > 我. 点我切换状态.
- </p>
- );
- }
- }
- const domContainer = document.querySelector('#like_button_container');
- ReactDOM.render(e(LikeButton), domContainer);
这两行代码会找到我们在步骤 1 中添加到 HTML 里的 <div>, 然后在它内部显示我们的 React 组件 "Like" 按钮.
详细的用法可以参考官方文档: https://zh-hans.reactjs.org/docs/add-react-to-a-website.html
本文来自 React 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/16042.html