Jenny Learns React: 2. React.createClass, Props and State
Now that you have a general idea of what React is and how it works, let's see React in action. There are several tools that need to be introduced:
1- React Class - React works off of classes. You render HTML by creating a React class that describes what to render.
var HelloWorld = React.createClass({ render: function () { return <h1>Hello, World</h1>; } }); React.render(<HelloWorld />, document.body);
In the example above, what do you think would render? If you guessed an h1 heading of the text "Hello, World" inside the body, you would be correct.
2- Props allows users to pass data into a React view. Think of props as sort of an object from which you can store/retrieve values.
var HelloName = React.createClass({ render: function () { return <h1>Hello, {this.props.name}</h1>; } }); React.render(<HelloName name="Grumpy Cat" />, document.body);
3- State is similar to props in that it also passes data, but the difference is that state is usually reserved for interactivity.
var HelloGoodbye = React.createClass({ getInitialState: function () { return { text: "Hello, World" }; }, changeText: function () { this.setState({ text: "Goodbye, World" }); }, render: function () { return <h1 onclick="{this.changeText}">{this.state.text}</h1> } }); React.render(<HelloGoodbye />, document.body);
In this example, the view initially renders Hello, World, but when you click on those words, it changes to Goodbye, World.
These are the basic building blocks of React, which we will use to build a basic todo app. Stay tuned!