Learn how to render with React

prof_creates_girls

Sugar, spice, and everything nice. These were the ingredients to create the perfect little girls.

React's render method is where the magic starts. This is where your component's ingredients: state, props, and jsx joined forces to create the perfect component!

So let's break this down..

React.createClass takes an object and gives us back a component that can be placed on the page later on. To sound fancy from this point on when we place things on the page we will say it was "rendered to the DOM".

this.props gives us access to any attributes we set on the component. In the example above, <Greeter name="senorcris" /> is basically saying, "Create a Greeter with the name set to senorcris".

render is a function, which means it is responsible for one thing. In this case that is to give React the HTML that it needs to place on the screen. React is smart enough to know how to do this efficiently for us, so we can worry about cooler things.

Now create your own perfect little components!

JS Bin