javascript library for user interfaces.

it is not framework
react DOM library in the browsers. It will build the DOM for us.
React is declarative - we just have to give what we want and dont need to tell h
ow we do it.
its just the view.
three design concepts
components - simple functions call function with some input and it gives us the
output.
Can have private state.
can contain other components.
Reactive updates - takes update from the browser. automatically update DOM
virtual views in memory - write HTML in javascript.
To have javascript render HTML helps react to have html in memory which helps in
virtual DOM
every time the state changes and instead of writing the whole tree of DOM to bro
wser we just write
the change to the browsers DOM.
Tree reconcialition
Component
1) Functional 2) Class
Function - presentation of concept
it takes properties as input and give out html or jsx
Class - It takes props and state. If the state of changes react will re render t
he component.
State and props have difference state can be changes while props cannot be. It g
oes out DOM

JSX allows us to define DOM which is closely related to the doM of the browser.
React can be used without JSX
React compiles JSX into javascript
To use a component we need to give it a name that we could reference.
RenderDOM takes two element one element that is the component we created and sec
ond in which environment the element should be rendered.
React component receives one argument that is property.
Use Babel js to compile jsx into javascript.
state of component can be accessed to that component itself. Put the state in th
e parent component.
functions are defined to manipulate state and this functions of the parent are p
assed as property to the child to manipulate state further,
to make the event work.

class Button extends React.Component {

handleClick = () => {this.props.onclickCounter(this.props.incrementValue)};
render (){
return(
<button onClick = {this.handleClick}>+{this.props.incrementValue}</button>

);
}
}
const Result = (props) => {
return(
<div>{props.counter}</div>
);
};

class Reset extends React.Component {

render(){
return(
<button onClick={this.props.onClickReset}>Reset</button>
);
};
}
class App extends React.Component {
state = {counter: 0};
incrementCounter = (incrementValue) => {
this.setState({
counter: this.state.counter + incrementValue
});
};
reset = () => {
this.setState({
counter : 0
})
};
render(){
return(
<div class="#mountNode">
<Button onclickCounter = {this.incrementCounter} incrementValue = {1}/>
<Button incrementValue = {2} onclickCounter = {this.incrementCounter}/>
<Button incrementValue = {3} onclickCounter = {this.incrementCounter}/>
<Button incrementValue = {4} onclickCounter = {this.incrementCounter}/>
<Reset onClickReset = {this.reset} />
<Result counter = {this.state.counter}/>
</div>
);
};
}
ReactDOM.render(<App label="Reset"/>,mountNode);