Tutorial - Intro To React - React

12/27/2017 Tutorial: Intro To React - React
let const
https://reactjs.org/tutorial/tutorial.html 1/56
npm install -g create-react-app

create-react-app my-app
src/
cd my-app
rm -f src/*
index.css src/
index.js src/
index.js src/
import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
npm start http://localhost:3000
React.Component
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>
);
}
}
// Example usage: <ShoppingList name="Mark" />
props
render
render
render
<div />
React.createElement('div')
return React.createElement('div', {className: 'shopping-list'},

React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
createElement()
ShoppingList
<ShoppingList />
<button>
renderSquare value
class Board extends React.Component {

renderSquare(i) {
return <Square value={i} />;
}
render {/* TODO */}

{this.props.value}
class Square extends React.Component {

render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
render()

render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}
onClick onClick={alert('click')}
this.state

constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}
super();
render
this.props.value this.state.value <button>
() => alert() () => this.setState({value:

'X'})
<button>

super(props);
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}
this.setState
this.state.value 'X'

super(props);
this.state = {
squares: Array(9).fill(null),
};
}
renderSquare(i) {
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
</div>
</div>
</div>
</div>
);
}
}
[
'O', null, 'X',
'X', 'X', 'O',
'O', null, null,
]
renderSquare
renderSquare(i) {
}
value
renderSquare(i) {
return <Square value={this.state.squares[i]} />;
}
renderSquare
renderSquare(i) {
return (
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i)}
/>
)
);
}
return
value onClick
this.state.value this.props.value render
this.setState() this.props.onClick() render
constructor

render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
onClick
onClick <button>
onClick
render()
this.props.onClick()
onClick {()
https://reactjs.org/tutorial/tutorial.html
> this handleClick(i)} 13/56
this.handleClick(i)
handleClick()
<button> onClick
onClick handleClick
on*
handle*
handleClick

super(props);
this.state = {
};
}
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = 'X';
this.setState({squares: squares});
}
renderSquare(i) {
return (
<Square
/>
);
}
render() {
const status = 'Next player: X';
return (
<div>
</div>
</div>
</div>
</div>
);
}
}
.slice() squares
.slice()
squares
var player = {score: 1, name: 'Jeff'};

player.score = 2;
// Now player is {score: 2, name: 'Jeff'}
var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2});

// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};
shouldComponentUpdate()
render
React.Component
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
this.props props
onClick={() =>
props.onClick()} onClick={props.onClick}
onClick={props.onClick()}
props.onClick

super(props);
this.state = {
xIsNext: true,
};
}
xIsNext
handleClick xIsNext
handleClick(i) {
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
}
render
render() {
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
return (
// the rest has not changed

super(props);
this.state = {
xIsNext: true,
};
}
handleClick(i) {
this.setState({
squares: squares,
});
}
renderSquare(i) {
return (
<Square
/>
);
}
render() {
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
return (
<div>
</div>
</div>
</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;
}
render
status render
render() {
const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
}
return (
handleClick
handleClick(i) {
if (calculateWinner(squares) || squares[i]) {
return;
}
this.setState({
squares: squares,
});
}
squares
history = [
{
squares: [
null, null, null,
null, null, null,
null, null, null,
]
},
{
squares: [
null, null, null,
null, 'X', null,
null, null, null,
]
},
// ...
]
class Game extends React.Component {

super(props);
this.state = {
history: [{
}],
xIsNext: true,
};
}
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
squares onClick
constructor
this.state.squares[i] this.props.squares[i]
renderSquare
this.handleClick(i) this.props.onClick(i)
renderSquare

handleClick(i) {
return;
}
this.setState({
squares: squares,
});
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
} else {
}
return (
<div>
</div>
</div>
</div>
</div>
);
}
}
render
render() {
const history = this.state.history;
const current = history[history.length - 1];
const winner = calculateWinner(current.squares);
let status;
if (winner) {
} else {
}
return (
<Board
squares={current.squares}
onClick={(i) => this.handleClick(i)}
/>
</div>
<div>{status}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
<div className="status">
{status}</div> render
render() {
return (
<div>
</div>
{this renderSquare(4)}
</div>
</div>
</div>
);
}
handleClick
handleClick
handleClick(i) {
const squares = current.squares.slice();
return;
}
this.setState({
history: history.concat([{
squares: squares,
}]),
});
}
renderSquare render
render
render() {
const moves = history.map((step, move) => {

const desc = move ?
'Go to move #' + move :
'Go to game start';
return (
<li>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});
let status;
if (winner) {
} else {
}
return (
<Board
squares={current.squares}
onClick={(i) => this.handleClick(i)}
/>
</div>
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
<li> <button>
<li>Alexa: 7 tasks left</li>

<li>Ben: 5 tasks left</li>
<li>Ben: 9 tasks left</li>

<li>Claudia: 8 tasks left</li>
<li>Alexa: 5 tasks left</li>
alexa ben
claudia
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
key ref
key
this.props.key
key={i}
render <li key={move}>
const moves = history.map((step, move) => {

const desc = move ?
'Go to move #' + move :
'Go to game start';
return (
<li key={move}>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});
jumpTo
stepNumber: 0 constructor
class Game extends React.Component {

super(props);
this.state = {
history: [{
}],
stepNumber: 0,
xIsNext: true,
};
}
jumpTo
xIsNext xIsNext
jumpTo
handleClick(i) {
// this method has not changed
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0,
});
}
render() {
// this method has not changed
}
stepNumber stepNumber:
history.length handleClick
handleClick stepNumber
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const squares = current.squares.slice();
return;
}
this.setState({
history: history.concat([{
squares: squares
}]),
stepNumber: history.length,
});
}
render
render() {
const current = history[this.state.stepNumber];
React.Component

Tutorial - Intro To React - React

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial - Intro To React - React

Uploaded by

Copyright:

Available Formats

12/27/2017 Tutorial: Intro To React - React

npm install -g create-react-app

import React from 'react';

npm start http://localhost:3000

class ShoppingList extends React.Component {

// Example usage: <ShoppingList name="Mark" />

return React.createElement('div', {className: 'shopping-list'},

class Board extends React.Component {

render {/* TODO */}

class Square extends React.Component {

class Square extends React.Component {

class Square extends React.Component {

this.props.value this.state.value <button>

() => alert() () => this.setState({value:

class Square extends React.Component {

class Board extends React.Component {

this.state.value this.props.value render

this.setState() this.props.onClick() render

class Square extends React.Component {

class Board extends React.Component {

var player = {score: 1, name: 'Jeff'};

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});

class Board extends React.Component {

class Board extends React.Component {

class Game extends React.Component {

class Board extends React.Component {

const moves = history.map((step, move) => {

<li>Alexa: 7 tasks left</li>

<li>Ben: 9 tasks left</li>

<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>

render <li key={move}>

const moves = history.map((step, move) => {

class Game extends React.Component {

// the rest has not changed

You might also like