React 开始使用
hello world
下面的例子让你最快的速度知道怎么使用 React 来运行一个 hello world。
首先定义一个 index.html：
- 引用依赖的两个
react源文件 - 在界面定义一个按钮
id为like_button_container - 另外引入第三个自定义的
js文件：like_button.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- 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>
</html>
然后定义 like_button.js 的内容，它做到事情很简单：
- 定义组件
LikeButton继承自React.Component - 维护一个叫
liked的属性，默认值为false - 定义一个
render函数，liked为true的时候返回文本You liked this. - 借用
React.createElement方法，创建一个类型为button文案为Like的按钮 - 点击
button的时候，将liked设置为true
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
使用 JSX
为了在浏览器中使用 JSX，需要首先在 index.html 增加
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
同样需要修改对应 script 的 type：
<script type="text/babel" src="like_button.js"></script>
最后就可以在like_button.js中直接使用JSX了：
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
对应完整的 index.html 为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 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 type="text/babel" src="like_button.js"></script>
</body>
</html>
注：直接打开 index.html 会报跨域的错，需要起一个 Web 服务器才可以正常使用。原因暂不知。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 实用的 Git 命令分享
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论