教程地址
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)]