<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<style>
.App {
max-width: 800px;
margin: 0 auto;
}
.App-content {
margin: 0 20px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let items = [
{
id: 0,
name: "Apple iPad Mini 2 16GB",
description: "An iPad like no other. 16GB, WiFi, 4G.",
price: 229.00
},
{
id: 1,
name: "Apple iPad Mini 2 32GB",
description: "Even larger than the 16GB.",
price: 279.00
}];
class App extends React.Component {
constructor (props){
super(props);
this.state = {
cart: [0 ,0]
};
}
addItem (e) {
this.setState({
cart: this.state.cart.map(function (elem, index){
if(index === Number(e.target.id)) {
return elem = elem+1;
} else {
return elem;
}
})
})
console.log(this.state.cart);
}
renderContent() {
return (<span>Empty</span>);
}
render() {
return (
<div className="App">
<div className="App-content">
<Cart items={this.props.items} cart={this.state.cart} addItem={this.addItem.bind(this)}></Cart>
</div>
</div>
);
}
}
class Cart extends React.Component {
bold (e) {
e.target.style['font-weight'] = 'bold';
document.getElementById('itemButton').style['display'] = 'none';
if (e.target.id === 'cart') {
document.getElementById('items').style['font-weight'] = 'normal';
document.getElementById('itemButton').style['display'] = 'none';
} else {
document.getElementById('cart').style['font-weight'] = 'normal';
document.getElementById('cartButton').style['display'] = 'none';
}
}
render() {
return (
<div>
<span id='items' onClick={this.bold.bind(this)}>Items</span> <span id='cart' onClick={this.bold.bind(this)}>Cart</span>
<div>
<div>{this.props.items[0].name}</div>
<div>{this.props.items[0].description}</div>
<div>{this.props.items[0].price}</div>
<div id='itemButton'><button>-</button><input value={this.props.cart[0]}/><button>+</button></div>
<div id='cartButton'><button id='0' onClick={this.props.addItem}>Add to Cart</button></div>
</div>
<div>
<div>{this.props.items[1].name}</div>
<div>{this.props.items[1].description}</div>
<div>{this.props.items[1].price}</div>
<div id='itemButton'><button>-</button><input value={this.props.cart[1]}/><button>+</button></div>
<div id='cartButton'><button id='1' onClick={this.props.addItem}>Add to Cart</button></div>
</div>
</div>
);
}
}
ReactDOM.render(
<App items={items}/>,
document.getElementById('app')
);
</script>
</body>
</html>
Candidate 2:
your project
key in react
how setState works
where API call happens
good and bad thing for React
Smart vs Dumb component
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<style>
.App {
max-width: 800px;
margin: 0 auto;
}
.App-content {
margin: 0 20px;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em, 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let items = [
{
id: 0,
name: "Apple iPad Mini 2 16GB",
description: "An iPad like no other. 16GB, WiFi, 4G.",
price: 229.00
},
{
id: 1,
name: "Apple iPad Mini 2 32GB",
description: "Even larger than the 16GB.",
price: 279.00
}];
class App extends React.Component {
constructor(props){
super(props);
this.state={
isCart: false
}
}
handleToggle(isCartObj){
this.setState(isCartObj);
}
render() {
return (
<div className="App">
<div className="App-content">
<Nav
handleToggle={this.handleToggle.bind(this)}
/>
<hr/>
<ItemDetails
isCart={this.state.isCart}
/>
</div>
</div>
);
}
}
class Nav extends React.Component {
constructor(props){
super(props);
this.state={
itemstyle: {'fontWeight': 'bold'},
cartstyle: {'fontWeight': 'normal'}
}
}
switchToggle(e){
let key = e.target.dataset.key;
if(key==='items'){
this.setState({
itemstyle: {'fontWeight': 'bold'},
cartstyle: {'fontWeight': 'normal'}
});
this.props.handleToggle({isCart: false});
} else {
this.setState({
itemstyle: {'fontWeight': 'normal'},
cartstyle: {'fontWeight': 'bold'}
});
this.props.handleToggle({isCart: true});
}
}
render() {
return (
<div>
<span data-key='items' style={this.state.itemstyle} onClick={this.switchToggle.bind(this)}>Items</span>
<span> | </span>
<span data-key='cart' style={this.state.cartstyle} onClick={this.switchToggle.bind(this)}>Cart</span>
</div>
)
}
}
class ItemDetails extends React.Component {
render() {
return (
<div>
{
items.map((item, index)=>{
return (
<div key={index.toString()}>
<div style={{display: 'block'}}>
<div style={{display: 'inline-block'}}>{item.name}</div>
<div style={{display: 'inline-block', float: 'right'}}>{item.price}</div>
</div>
<div style={{display: 'block'}}>
<div style={{display: 'inline-block'}}>{item.description}</div>
<UserAction
isCart={this.props.isCart}
/>
</div>
<hr/>
</div>
)
})
}
</div>
)
}
}
class UserAction extends React.Component {
constructor(props){
super(props);
this.state={
count: 0
}
}
removeFromCart(e){
let count = Number(this.state.count);
if(count > 0){
this.setState({
count: count-1
});
}
}
addToCart(e){
let count = Number(this.state.count);
console.log(count)
this.setState({
count: count+1
});
}
changeTextBox(e){
let count = Number(e.target.value);
this.setState({
count: count
});
}
render(){
if(this.props.isCart){
return (
<div style={{display: 'inline-block', float: 'right'}}>
<input type="button" onClick={this.removeFromCart.bind(this)} value="-"/>
<input type="Number" onChange={this.changeTextBox.bind(this)} value={this.state.count}/>
<input type="button" onClick={this.addToCart.bind(this)} value="+"/>
</div>
)
}
return (
<div style={{display: 'inline-block', float: 'right'}}>
<button onClick={this.addToCart.bind(this)}>Add to Cart</button>
</div>
)
}
}
ReactDOM.render(
<App items={items}/>,
document.getElementById('app')
);
</script>
</body>
</html>