【react】开发实战day2-井字棋

官网教程

运行

安装react需要node.js
选择在vscode上运行了一个井字棋的教程。

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

2 删除src文件夹里的内容

# 如果你使用 Mac 或 Linux:
rm -f *
# 如果你使用 Windows:
del *

3 在 src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 CSS 代码。
4 在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。
5 拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部：
6

npm start
# 然后在浏览器访问 http://localhost:3000
ctrl c # 停止terminal进程

react组件component

1 shoppingList

class ShoppingList extends React.Component {
render() { # 返回值描述了你希望在屏幕上看到的内容
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}

// 用法示例: <ShoppingList name="Mark" />

// 这个代码等同于：
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);

完整的代码包括三个 React 组件：

* Square：渲染了一个单独的 <button>
* Board：Board 组件渲染了 9 个方块
* Game：Game 组件渲染了含有默认值的一个棋盘

通过 Props 传递数据

* props: 一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写）

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

props: 本身只读。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

渲染组件

const element = <Welcome name="Sara" />;

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);

	1. 我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。
	2. React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
	3. Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
	4. React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

组合组件

// 构造APP组件，合成一起返回
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

提取组件

function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

该组件用于描述一个社交媒体网站上的评论功能，它接收 author（对象），text （字符串）以及 date（日期）作为 props。
该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。因此，让我们从中提取一些组件出来。
以上代码容易出错，嵌套太多。因此考虑吧用户单独拆开：

function Avatar(props) {
return (<img className="Avatar"src={props.user.avatarUrl} // user而不是author因为props不值当上层如何渲染的alt={props.user.name}/>);}

function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);

function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author}>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}