ReactJs is popular Java script library for building User Interface. It's components are reusable and efficiently manages the data that changes over time. If require any support then contact our ReactJs consulting
In this article I am discussing Component, State, Props.
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.