Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Notes on "7 Minutes with React"
// React JS Notes
// All of the following uses JSX compiling, without JSX the HTML-style syntax isn't possible.
// See this as a reference: http://jsbin.com/falicahequ/1/edit?html,js,output
// The basic unit of React is a "component", created like so...
var React = require('react');
var Component = React.createClass({
render: function() {
return (
<h1>Hello World!</h1>
)
}
});
// Then to render the component, we use React's render() method...
React.render(<Component></Component>, document.body);
// Now we want to get some models involved. First, let's create some models...
var people = [
{
name: 'Chris Malven',
title: 'Interactive Design Lead',
avatar: 'chris.jpg'
},
{
name: 'David Sieren',
title: 'Creative Director',
avatar: 'david.jpg'
}
]
// And add a getInitialState() method to our component that grabs a model
var Component = React.createClass({
getInitialState: function() {
return people[0];
},
render: function() {
return (
<h1>{ this.state.name }</h1>
<img src={ this.state.avatar } alt="" />
// Notice the src attribute above doesn't have surrounding quotes
)
}
});
// Awesome! Now we're talking! But what if we want to have multiple components?
// Let's create a new component to hold our existing components
var App = React.createClass({
render: function() {
return (
<div>
<Component></Component>
<Component></Component>
</div>
)
}
});
// Okay, great. But this will just render the same Person twice.
// Instead of state in our original component, we need to use props.
// Let's update our original Component...
var Component = React.createClass({
render: function() {
return (
<h1>{ this.props.name }</h1>
<img src={ this.props.avatar } alt="" />
)
}
});
// And move the getInitialState() into our App component
var App = React.createClass({
getInitialState: function() {
return {
people: people
}
},
render: function() {
return (
<div>
{ this.state.people.map(function (person) {
return (
<Component name={ person.name } avatar={ person.avatar }></Component>
)
}) }
</div>
)
}
});
// Okay, so that's actually a pretty ugly-looking way to loop through and output a bunch of models. But it works.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.