React Learning 01

index.html

<div id="app">
</div>

react-learning-01.markdown

React Learning 01

A first look at learning React JS, making a profile and adding functionality so you can change the picture size.

A Pen by Aled Wassell on CodePen.

License.

script.babel

class Profile extends React.Component{
	constructor(props) {
		super(props);
		this.state = {
			height: 164
		};
	}
	render(){
		var { name, age, bio, pic } = this.props;
		var { height } = this.state;
		console.log(this);
		return( 
			<div className="main">
				<h1>Hello World</h1> 
				<h2>My Name is: {name}.</h2>
				<h2>I am {age} years old.</h2>
				<h2>and {bio}</h2>
				<button onClick={this.zoomPicIn.bind(this)}>+</button>
				<button onClick={this.zoomPicOut.bind(this)}>-</button>
				<br />
				<img src={pic} height={height} />
			</div>
		);
	}
	zoomPicIn() {
		this.setState({height: this.state.height + 20});
	}
	zoomPicOut() {
		this.setState({height: this.state.height - 20});
	}
}
//props accept a key and a value
//state determins the state of the component
React.render(<Profile name="Aled" age={27} bio="learning React" pic="http://aledwassell.com/images/aled.jpg"/>, document.getElementById('app'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

style.sass

*
	color: #fff

#app
	display: flex
	padding: 10px

.main
	margin: auto
	text-align: center
	background: #626262
	padding: 10px
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
	border-radius: 3px

button
	background-color: transparent
	border-radius: 50%
	margin: 5px 5px 10px 5px
	border: none
	font-size: 1.5em
	margin-bottom: 10px