react学习笔记-从井字棋开始(1)

教程地址

https://react.docschina.org/tutorial/tutorial.html

新建工程

1.确保你安装了较新版本的 Node.js。

2.按照 Create React App 安装指南创建一个新的项目
npx create-react-app my-app

3.删除掉新项目中 src/ 文件夹下的所有文件。

4.在 src/ 文件夹中创建一个名为 index.css 的文件,并拷贝这些 CSS 代码。

5.在 src/ 文件夹下创建一个名为 index.js 的文件,并拷贝这些 JS 代码。

6.拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

文件解析 index.js

在index.js中,导入的App是一个组件,将组件通过ReactDom.render就可以渲染到页面上

React是ReactJs的核心React 开发的过程就是通过开发各类组件,并将各类组件拼接成我们所需要的页面

index.html如何结合index.js

html-webpack-plugin这个plugin实现的

具体 https://webpack.docschina.org/plugins/html-webpack-plugin/

导入包部分

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

解析说明:

导入react模块命名为React
导入rect-dom 命名为ReactDOM
导入样式文件 index.css

组件类

Class Square
class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {/* TODO */}
        </button>
      );
    }
  }

解析 方块类 正方形方块,继承React.Component的类。所有组件继承这个就会成为React的组件。

render()函数 渲染的意思 里面返回 需要渲染的内容即可

这里返回了一个button 当然css样式里也注明了square的样子

.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;
  }

具体代码

<button className="square">           {/* TODO */}         </button>
Class Board

 class Board extends React.Component {
    renderSquare(i) {
      return <Square />;
    }
  
    render() {
      const status = 'Next player: X';
  
      return (
        <div>
          <div className="status">{status}</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>
      );
    }
  }

解析

这里服复用了前面的组件 square

定义了一个renderSquare(i)函数 引用了前面的组件square 也就是一个button 并且设置测参数传递

renderSquare(i) {
      return <Square />;
    }

随后 回到组件的渲染函数 render()

返回3个行列的样式 里面核心就是调用了之前的函数

<div className="board-row">
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
</div>

样式就是带边框的button九个 3行3列

Class Game
class Game extends React.Component {
    render() {
      return (
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
    }
  }

这个就更简单了 同样也是组件
渲染部分引入之前的 Board 即可

ReactDOM 加载
ReactDOM.render(
    <Game />,
    document.getElementById('root')
  );

加载game 组件 到 root节点下面去
这个root节点就在index.html 下面

<div id="root"></div>

渲染显示

npm start 即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v8w7VhZc-1617353577149)(en-resource://database/2030:1)]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值