TmOct5/reactApp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[新增]简单的仿头条网站开始

Browse Source
This commit is contained in:
唐明明
2021-02-16 18:44:36 +08:00
parent 25e1f58939
commit abc8bb6087
5 changed files with 274 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/header.js Normal file
View File

@@ -0,0 +1,27 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
* ComponentName: '头部'
*/
import React from "react"
class Header extends React.Component{
render () {
return(
<div className='header'>
<div className='header-left'>
<a className='header-app' href='https://app.toutiao.com/news_article/'>下载APP</a>
<a href='https://mp.toutiao.com/auth/page/login/?redirect_url=JTJG'>注册头条号</a>
</div>
<div className='header-right'>
<a href='https://mp.toutiao.com/profile_v4_public/public/protocol/complains/'>侵权投诉</a>
<span className='header-product'>头条产品</span>
</div>
</div>
)
}
}
export default Header

63
src/index.css
View File

@@ -6,53 +6,32 @@
*/ */
body { body {
font: 14px "Century Gothic", Futura, sans-serif; font-size: 14px;
margin: 20px; margin: 0;
}
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; padding: 0;
text-align: center;
width: 34px;
} }
.square:focus { .header{
outline: none; background: #222;
} color: white;
height: 34px;
.kbd-navigation .square:focus { line-height: 34px;
background: #ddd;
}
.game {
display: flex; display: flex;
flex-direction: row; justify-content: space-between;
} }
.game-info { .header span,
margin-left: 20px; .header a{
padding: 0 10px;
display: inline-block;
color: white;
text-decoration: none;
} }
.header-app{
border-right: solid 1px #3a3a3a;
}
.header-product{
border-left: solid 1px #3a3a3a;
}

159
src/index.js
View File

@@ -2,161 +2,14 @@
* Web唐明明 * Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。 * 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。 * 碌碌无为枉半生，一朝惊醒万事空。
* ComponentName: '官方demo - 组件之间的传参'
*/ */
import React from 'react'; import React from "react"
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
import './index.css'; import Header from "./header"
import './index.css'
// 类组件
// class Square extends React.Component {
// // 入口函数
// render() {
// return (
// <button
// className="square"
// onClick={() => this.props.onSquare()}
// >
// {this.props.value}
// </button>
// );
// }
// }
// 函数组件
const Square = (props) => {
return (
<button
className="square"
onClick={props.onSquare}
>
{props.value}
</button>
)
}
class Board extends React.Component {
// 小方格方法
renderSquare(i) {
return <Square
value={this.props.squares[i]}
onSquare={()=>this.props.onBoard(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)
}],
xIsNext: true,
stepIndex: 0
}
}
// 定一个一个组件方法
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepIndex + 1)
const current = history[history.length - 1]
const squares = current.squares.slice()
if(calculateWinner(squares) || squares[i]){
return
}
squares[i] = this.state.xInNext ? 'X': 'O'
this.setState({
history: history.concat([{ squares }]),
xInNext: !this.state.xInNext,
stepIndex: history.length
})
// Array.slice()返回数组选定的元素,相当于克隆了原有数组
}
jumpTo(index){
this.setState({
stepIndex: index,
xIsNext: (index % 2) === 0,
})
}
render() {
const history = this.state.history
const current = history[this.state.stepIndex]
const winner = calculateWinner(current.squares)
const moves = history.map((stepArr, index) => {
const desc = index ? '下一步' + index : '开始游戏'
return(
<li key={index}>
<button onClick={()=> this.jumpTo(index)}>{desc}</button>
</li>
)
})
let status;
if(winner){
status = '恭喜选手' + winner + '获胜~'
}else{
status = '下一位选手: ' + (this.state.xInNext ? 'X': 'O');
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onBoard={(i) => this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
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;
}
ReactDOM.render( ReactDOM.render(
<Game />, <Header/>,
document.getElementById('root') document.getElementById('root')
); )

58
井字格demo/index.css Normal file
View File

@@ -0,0 +1,58 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
*/
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;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}

162
井字格demo/index.js Normal file
View File

@@ -0,0 +1,162 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。
* ComponentName: '官方demo - 组件之间的传参'
*/
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 类组件
// class Square extends React.Component {
// // 入口函数
// render() {
// return (
// <button
// className="square"
// onClick={() => this.props.onSquare()}
// >
// {this.props.value}
// </button>
// );
// }
// }
// 函数组件
const Square = (props) => {
return (
<button
className="square"
onClick={props.onSquare}
>
{props.value}
</button>
)
}
class Board extends React.Component {
// 小方格方法
renderSquare(i) {
return <Square
value={this.props.squares[i]}
onSquare={()=>this.props.onBoard(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)
}],
xIsNext: true,
stepIndex: 0
}
}
// 定一个一个组件方法
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepIndex + 1)
const current = history[history.length - 1]
const squares = current.squares.slice()
if(calculateWinner(squares) || squares[i]){
return
}
squares[i] = this.state.xInNext ? 'X': 'O'
this.setState({
history: history.concat([{ squares }]),
xInNext: !this.state.xInNext,
stepIndex: history.length
})
// Array.slice()返回数组选定的元素,相当于克隆了原有数组
}
jumpTo(index){
this.setState({
stepIndex: index,
xIsNext: (index % 2) === 0,
})
}
render() {
const history = this.state.history
const current = history[this.state.stepIndex]
const winner = calculateWinner(current.squares)
const moves = history.map((stepArr, index) => {
const desc = index ? '下一步' + index : '开始游戏'
return(
<li key={index}>
<button onClick={()=> this.jumpTo(index)}>{desc}</button>
</li>
)
})
let status;
if(winner){
status = '恭喜选手' + winner + '获胜~'
}else{
status = '下一位选手: ' + (this.state.xInNext ? 'X': 'O');
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onBoard={(i) => this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
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;
}
ReactDOM.render(
<Game />,
document.getElementById('root')
);