##Default Props
import React from 'react';
import ReactDOM from 'react-dom';
class Button extends React.Component {
render() {
return (
<button>
{this.props.text}
</button>
);
}
}
Button.defaultProps = {
text: 'I am a button'
};
ReactDOM.render(
<Button />,
document.getElementById('app')
);
##Event Handlers as sent prop
//Button.js
import React from 'react';
export class Button extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>
Click me!
</button>
);
}
}
//Talker.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';
class Talker extends React.Component {
handleClick() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
}
render() {
return <Button onClick={this.handleClick} />;
}
}
ReactDOM.render(
<Talker />,
document.getElementById('app')
);
##Render Component props
import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.firstName}!</h1>;
}
}
ReactDOM.render(
<Greeting firstName='Linden' />,
document.getElementById('app')
);
##Render props object
import React from 'react';
import ReactDOM from 'react-dom';
class PropsDisplayer extends React.Component {
render() {
const stringProps = JSON.stringify(this.props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
}
// ReactDOM.render goes here:
ReactDOM.render(
<PropsDisplayer foo="bar" myInfo={["top", "secret", "lol"]} age={2} haunted={false} />,
document.getElementById('app')
);
##this.props.children
//App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { List } from './List';
class App extends React.Component {
render() {
return (
<div>
<List type='Living Musician'>
<li>Sachiko M</li>
<li>Harvey Sid Fisher</li>
</List>
<List type='Living Cat Musician'>
<li>Nora the Piano Cat</li>
</List>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
//List.js
import React from 'react';
export class List extends React.Component {
render() {
let titleText = `Favorite ${this.props.type}`;
if (this.props.children instanceof Array) {
titleText += 's';
}
return (
<div>
<h1>{titleText}</h1>
<ul>
{this.props.children}
</ul>
</div>
);
}
}
##referencing const
import React from 'react';
import ReactDOM from 'react-dom';
const redPanda = {
src: 'http://bit.ly/1U92LL3',
alt: 'Red Panda',
width: '200px'
};
class RedPanda extends React.Component {
render() {
return (
<div>
<h1>Cute Red Panda</h1>
<img
src={redPanda.src}
alt={redPanda.alt}
width={redPanda.width} />
</div>
);
}
}
ReactDOM.render(
<RedPanda />,
document.getElementById('app')
);
##changing state
import React from 'react';
import ReactDOM from 'react-dom';
const green = '#39D1B4';
const yellow = '#FFD712';
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { color: green };
this.changeColor = this.changeColor.bind(this);
}
changeColor() {
const newColor = this.state.color == green ? yellow : green;
this.setState({ color: newColor });
}
render() {
return (
<div style={{background: this.state.color}}>
<h1>
Change my color
</h1>
<button onClick = {this.changeColor}>
Change Color
</button>
</div>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('app')
);