State is the place where the data COMES from. We must follow approach to make our state as simple as possible and minimize number of stateful components.

For example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

The state starts with a default value and when a Component mounts and then suffers from mutations in time (BASICALLY generated from user EVENTS).

A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the stateof its children. You could say the state is private.

import React from 'react';
import ReactDOM from 'react-dom';
 var StepCounter = React.createClass({
 getInitialState: function() {
return {counter: this.props.initialCount};
},
handleClick: function() {
this.setState({counter: this.state. counter + 1});
 },
render: function() {
return <div onClick={this.handleClick}>{this.state.counter }</div>;
 }
});
ReactDOM.render(< StepCounter initialCount={7}/>, document.getElementById('CONTENT'));

Props: They are immutable, this is why container component should define state that can be updated and changed. It is used to pass data down from our view-controller(our top LEVEL component).

 When we need immutable data in our component we can just add props to reactDOM.render() function.

import React from 'react';
import ReactDOM from 'react-dom';
class PropsApp extends React.Component {

render() {
return (
<div>
<h1>{this.props.headerProperty}</h1>
<h2>{this.props.contentProperty}</h2>
</div>
);
}
 } 
ReactDOM.render(<PropsApp headerProperty = "Header from props..." contentProperty = "Content
from props..."/>, document.getElementById('app'));

}

State is the place where the data comes from. We must follow approach to make our state as simple as possible and minimize number of stateful components.

For example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

The state starts with a default value and when a Component mounts and then suffers from mutations in time (basically generated from user events).

A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the stateof its children. You could say the state is private.

import React from 'react';
import ReactDOM from 'react-dom';
 var StepCounter = React.createClass({
 getInitialState: function() {
return {counter: this.props.initialCount};
},
handleClick: function() {
this.setState({counter: this.state. counter + 1});
 },
render: function() {
return <div onClick={this.handleClick}>{this.state.counter }</div>;
 }
});
ReactDOM.render(< StepCounter initialCount={7}/>, document.getElementById('content'));

Props: They are immutable, this is why container component should define state that can be updated and changed. It is used to pass data down from our view-controller(our top level component).

 When we need immutable data in our component we can just add props to reactDOM.render() function.

import React from 'react';
import ReactDOM from 'react-dom';
class PropsApp extends React.Component {

render() {
return (
<div>
<h1>{this.props.headerProperty}</h1>
<h2>{this.props.contentProperty}</h2>
</div>
);
}
 } 
ReactDOM.render(<PropsApp headerProperty = "Header from props..." contentProperty = "Content
from props..."/>, document.getElementById('app'));

}