认识一个事物,最直接最感性的认识莫过于直截了当的拿过来看看是什么样子。
二话不说,直接看看 ReactJS DEMO 中的例子吧!
一、官网文档:
https://reactjs.org/tutorial/tutorial.html#completing-the-game
Throughout this
tutorial, we touched on React concepts including elements, components, props, and state.
Next 1:
For a more detailed explanation of each of these topics, check out the rest of the documentation.
Next 2:
To learn more about defining components, check out the React.Component API reference.
二、在线运行:
http://www.runoob.com/try/try.php?filename=try_react_component
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
box-sizing: border-box;
display: inline-block;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function Square(props) {
return (
<span>
<button className="square" onClick={props.onClick}>
{props.value}
</button>
<div className="square" onClick={props.onClick}>
{props.value}
</div>
<i className="square" onClick={props.onClick}>
{props.value}
</i>
<span className="square" onClick={props.onClick}>
{props.value}
</span>
</span>
);
}
class Board extends React.Component {
renderSquare(i) {
return (
<Square value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
return (
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{
squares: Array(9).fill(null),
}],
stepNumber: 0,
xIsNext: true,
};
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
history: history.concat([{
squares: squares,
}]),
xIsNext: !this.state.xIsNext,
stepNumber: history.length
});
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0
});
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
}
const moves = history.map((item, indexStep) => {
const desc =
indexStep ?
'Go to move #' + indexStep :
'Go to game start';
return (
<li key={indexStep}>
<button onClick={() => this.jumpTo(indexStep)}>{desc}</button>
</li>
);
});
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={(i) => this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('example')
);
function calculateWinner (squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}
return null;
}
</script>
</body>
</html>
-
- 大小: 12.2 KB
分享到:
相关推荐
reactjs-slot-layout 基于reactjs插槽的布局系统 :sparkles: 特征 易于布局管理 覆盖任何组件的布局 支持包装的组件和React Fragment 轻松处理多种布局 非常轻巧〜5KB :wrench: 安装 yarn add reactjs-slot-...
这个"ReactJs-Training"实例提供了几个基本到进阶的React应用示例,包括评论框、计数器、筛选清单和照片库,这些都是学习React开发过程中常见的应用场景。 1. **评论框(CommentApp)**: 在React中,组件是构建UI...
入门 安装依赖项并启动本地开发服务器 npm install npm start 细节 使用构建。 检查他们的页面以获取更多详细信息。 本示例使用redux.js进行应用程序状态管理,要了解更多信息,我推荐。 您可以使用直接在浏览器中...
与Flux入门套件React其中包含完成的环境设置,以使用React和Flux构建示例应用程序。” ##此入门工具包为您提供以下内容: React,React Router和Flux用于超响应UI开发Browserify捆绑带有Bootstrap的jQuery样式Gulp...
React TodoMVC 示例React 是一个用于创建用户界面的 JavaScript 库。 它的核心原则是声明式代码、效率和灵活性。 只需指定您的组件的外观,当底层数据发生变化时,React 将使其保持最新状态。学习React是一个很好的...
这个“ReactJS.NET-getting-started-tutorial-master”压缩包可能包含了完整的示例项目,包括源代码、配置文件以及可能的文档。通过查看这些文件,你可以跟随教程逐步实现一个简单的 ReactJS.NET 应用,从而加深对...
ReactJS.NET-with-require.js-getting-started-tutorial 此 repo 包含在 require.js 的帮助下在客户端和服务器端进行同构React渲染... 基于 ReactJS.NET 入门教程代码: ://reactjs.net/getting-started/tutorial.html
与Rails集成的示例React.js应用程序 是一个用于构建出色的用户界面的库。 对我来说不幸的是,很难找到一个入门教程来表明它可以完美地适应导轨。 另外,我想保持良好的信誉,包括资产管道中的咖啡脚本。 本教程将带...
在"reactjs"这个压缩包中,可能包含了一些ReactJS的基础示例项目,你可以通过运行这些示例来加深对ReactJS的理解。每个案例可能涵盖了不同的React特性,例如状态管理、组件通信、路由等。通过实际操作,你将更好地...
入门 一个容器的应用程序。 从外部开放式API读取。 没有存储空间。 没有秘密动态网页-包括来自外部API的信息。 先决条件 确保您已经安装了Docker Engine。 您无需安装Nginx或NPM,因为两者均由Docker映像提供。 $...
ReactJS资源一个用于构建用户界面的Javascript库###动机### React / Flux入门 ###状态道具与状态###最佳做法关于React.js最佳实践和约定的自以为是的指南构建大型React应用程序的最佳实践关于React.js最佳实践和...
入门 这些说明将为您提供在本地计算机上运行并运行的项目的副本,以进行开发和测试。 这个项目的目的不是漂亮。 我只是在实践中测试了一些React的旧版本。 先决条件 您需要什么东西来安装软件以及如何安装它们 ...
Create React App入门该项目是通过引导的。可用脚本在项目目录中,可以运行:npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
在本文中,我们将深入探讨如何将ReactJS与MVC(Model-View-Controller)和WCF(Windows Communication Foundation)REST服务结合使用,为初学者提供一个全面的入门指南。我们将涉及的技术栈包括SQL用于数据库操作,...
播放带有服务器端渲染示例的框架和reactjs入门项目 这个应用程式正在使用 版本2.4.2 flux-todomvc 使用编译JSX并打包整个应用以进行生产 sbt插件,用于在jvm中执行javascript 要求 nodejs和npm(确保已将其添加到...
本演示文稿详细介绍了旨在弄清如何入门的基本概念,示例和资源。 观看幻灯片 您可以随时在查看幻灯片 如果要在本地查看幻灯片,请克隆此存储库。 安装依赖项 $ npm Install 然后跑 $ grunt slides 此幻灯片显示应...
查找示例UI 这是一个示例ReactJS应用程序,旨在让您开始为开发自定义用户界面。 该应用可以用作您的UI项目的模板。 有关更多LOCATE开发人员资源的信息,请访问我们的。入门安装NodeJS 从下载并安装最新稳定版本的...
React 组件启动器组件描述在这里演示和示例现场演示:链接到现场演示要在本地构建示例,请运行: npm installgulp dev然后在浏览器中打开 。安装使用 My-Component 的最简单方法是从 NPM 安装它并将其包含在您自己的...
使用 react-starter/webpack、reactjs、react-grid-layout 的入门仪表板应用程序。 目的是开发一些可在仪表板应用程序中使用的可重用小部件。 当前入口点只是集成为 /dashboard 的新入口点的 react-grid-layout ...