`

ReactJS - 02 - ReactJS之入门之00之示例

阅读更多
认识一个事物,最直接最感性的认识莫过于直截了当的拿过来看看是什么样子。
二话不说,直接看看 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的基于插槽的布局系统

    reactjs-slot-layout 基于reactjs插槽的布局系统 :sparkles: 特征 易于布局管理 覆盖任何组件的布局 支持包装的组件和React Fragment 轻松处理多种布局 非常轻巧〜5KB :wrench: 安装 yarn add reactjs-slot-...

    ReactJs-Training:例子

    这个"ReactJs-Training"实例提供了几个基本到进阶的React应用示例,包括评论框、计数器、筛选清单和照片库,这些都是学习React开发过程中常见的应用场景。 1. **评论框(CommentApp)**: 在React中,组件是构建UI...

    reactjs-shopping-cart:在react.js和redux.js中实现的购物车示例

    入门 安装依赖项并启动本地开发服务器 npm install npm start 细节 使用构建。 检查他们的页面以获取更多详细信息。 本示例使用redux.js进行应用程序状态管理,要了解更多信息,我推荐。 您可以使用直接在浏览器中...

    reactjs-sample-application:样例应用程序学习reactjs

    与Flux入门套件React其中包含完成的环境设置,以使用React和Flux构建示例应用程序。” ##此入门工具包为您提供以下内容: React,React Router和Flux用于超响应UI开发Browserify捆绑带有Bootstrap的jQuery样式Gulp...

    siesta-reactjs-todomvc

    React TodoMVC 示例React 是一个用于创建用户界面的 JavaScript 库。 它的核心原则是声明式代码、效率和灵活性。 只需指定您的组件的外观,当底层数据发生变化时,React 将使其保持最新状态。学习React是一个很好的...

    ReactJS.NET-getting-started-tutorial:ReactJS.NET 入门教程代码

    这个“ReactJS.NET-getting-started-tutorial-master”压缩包可能包含了完整的示例项目,包括源代码、配置文件以及可能的文档。通过查看这些文件,你可以跟随教程逐步实现一个简单的 ReactJS.NET 应用,从而加深对...

    ReactJS.NET-with-require.js-getting-started-tutorial:ReactJS.NET 和 require.js 入门教程代码

    ReactJS.NET-with-require.js-getting-started-tutorial 此 repo 包含在 require.js 的帮助下在客户端和服务器端进行同构React渲染... 基于 ReactJS.NET 入门教程代码: ://reactjs.net/getting-started/tutorial.html

    sample-reactjs-app:从头开始创建具有react.js支持的Rails应用的简短教程

    与Rails集成的示例React.js应用程序 是一个用于构建出色的用户界面的库。 对我来说不幸的是,很难找到一个入门教程来表明它可以完美地适应导轨。 另外,我想保持良好的信誉,包括资产管道中的咖啡脚本。 本教程将带...

    reactjs入门教程demo

    在"reactjs"这个压缩包中,可能包含了一些ReactJS的基础示例项目,你可以通过运行这些示例来加深对ReactJS的理解。每个案例可能涵盖了不同的React特性,例如状态管理、组件通信、路由等。通过实际操作,你将更好地...

    docker-reactjs:示例React.js应用

    入门 一个容器的应用程序。 从外部开放式API读取。 没有存储空间。 没有秘密动态网页-包括来自外部API的信息。 先决条件 确保您已经安装了Docker Engine。 您无需安装Nginx或NPM,因为两者均由Docker映像提供。 $...

    ReactJS-Resources

    ReactJS资源一个用于构建用户界面的Javascript库###动机### React / Flux入门 ###状态道具与状态###最佳做法关于React.js最佳实践和约定的自以为是的指南构建大型React应用程序的最佳实践关于React.js最佳实践和...

    BookManagement-ReactJS:在实践中训练ReactJS概念的项目

    入门 这些说明将为您提供在本地计算机上运行并运行的项目的副本,以进行开发和测试。 这个项目的目的不是漂亮。 我只是在实践中测试了一些React的旧版本。 先决条件 您需要什么东西来安装软件以及如何安装它们 ...

    fabrica-frontend-reactjs:使用示例进行前端ReactJS

    Create React App入门该项目是通过引导的。可用脚本在项目目录中,可以运行:npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误...

    使用MVC和WCF REST的ReactJS入门

    在本文中,我们将深入探讨如何将ReactJS与MVC(Model-View-Controller)和WCF(Windows Communication Foundation)REST服务结合使用,为初学者提供一个全面的入门指南。我们将涉及的技术栈包括SQL用于数据库操作,...

    play-react-seed:播放带有服务器端渲染示例的框架和reactjs入门项目

    播放带有服务器端渲染示例的框架和reactjs入门项目 这个应用程式正在使用 版本2.4.2 flux-todomvc 使用编译JSX并打包整个应用以进行生产 sbt插件,用于在jvm中执行javascript 要求 nodejs和npm(确保已将其添加到...

    prototype-with-reactjs:ReactJS设计原型的基本概念

    本演示文稿详细介绍了旨在弄清如何入门的基本概念,示例和资源。 观看幻灯片 您可以随时在查看幻灯片 如果要在本地查看幻灯片,请克隆此存储库。 安装依赖项 $ npm Install 然后跑 $ grunt slides 此幻灯片显示应...

    locate-sample-ui:用ReactJS编写的示例LOCATE UI

    查找示例UI 这是一个示例ReactJS应用程序,旨在让您开始为开发自定义用户界面。 该应用可以用作您的UI项目的模板。 有关更多LOCATE开发人员资源的信息,请访问我们的。入门安装NodeJS 从下载并安装最新稳定版本的...

    react-component-starter:ReactJS 组件入门项目

    React 组件启动器组件描述在这里演示和示例现场演示:链接到现场演示要在本地构建示例,请运行: npm installgulp dev然后在浏览器中打开 。安装使用 My-Component 的最简单方法是从 NPM 安装它并将其包含在您自己的...

    grid-dashboard:使用 reactjs 的可配置仪表板应用程序

    使用 react-starter/webpack、reactjs、react-grid-layout 的入门仪表板应用程序。 目的是开发一些可在仪表板应用程序中使用的可重用小部件。 当前入口点只是集成为 /dashboard 的新入口点的 react-grid-layout ...

Global site tag (gtag.js) - Google Analytics