Component:
React Component is an independent, reusable code and it contains HTML +Java script. Components data will be stored in component's State. This state can be modified based on user action or other action. when a component state is changed React will re-render the component to the browser. you must implement render method when creating a component.
var HelloWorld = React.createClass({
render: function() {
return <h1>Hello World</h1>;
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('container')
);
Above is a simple component which display Hello World heading to the Browser.
Props:
Props are similar to arguments for pure functions argument. Props of component are passed from parent component which invokes component. Props in a component cannot be modified(Immutable). Consider below example we are sending name prop to Hello World Component. all props can be accessible with this.props.
var HelloWorld = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
State
Component state can be modified over time in response to user actions, network responses, and anything. We have to implement class-based components by extending React.Component to get state features. Add a class constructor to add initial state.
below is a simple counter example which changes its state every time for user button click.
class Counter from React.Component {
constructor(props) {
super(props);
this.state = {count: 0 };
}
onClick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<div>count:{this.state.count}</div>
<button onClick={this.onClick}>click!</button>
</div>
);
}
};
ReactDOM.render(<Counter />, document.getElementById("container"));
use set State to change the state of react Component. whenever state changes the react will re-render the component.