Interesting facts about React

Currently, I am learning to react js. I saw that on each tutorial I’m clarifying an identical arrangement of ideas again and again. I feel those ideas are fundamental in the event that you might want to “know to React”. In case you’re during a center of learning it right now, you definitely should read this post.

React Js is not a framework

JSX

Virtual DOM

Props

In React data goes down the tree of the components. If you want to pass data from parent to child component you need to use props. From JSX point of view props are HTML attributes

Parent component:

<div>
<Greetings color={red} text='Hello' />
</div>

In the child component, props are available under this.props.

Child component:

const Greetings = React.createClass({
render () {
const {color, text} = this.props
const divStyle = {padding: 10, backgroundColor: 'black'}
const headingStyle = {color: color}
return (
<div style={divStyle}>
<h1 style={headingStyle}>{text}</h1>
</div>
)
}
})

State

Let’s consider <input>type where you can type in a text that will be displayed below.

const InputBox = React.createClass({
getInitialState () {
return {
text: ''
}
},
changeText (event) {
this.setState({text: event.target.value})
},
render () {
return (
<div>
<input type='text' onChange={this.changeText}
placeholder='text' value={this.state.text} />
<span>{this.state.text}</span>
</div>
)
}
})

How Render works under the hood