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

React Js is not a framework like angular, vue.js. React is just a library and you need to make all decisions by yourself. It focuses on helping you to build user interfaces using components. It does not have build-in routing, server communication, translations, and so on.

JSX

When looking at React examples you’ve probably seen codes are written in JSX. But eventually, they are converted to plain JavaScript by Bable using transpiler and make it browser readable.

Virtual DOM

Virtual DOM is an in-memory representation of real DOM. It is a lightweight JavaScript object which is a copy of Real DOM. This copy can be frequently manipulated and updated, without using the DOM APIs. Once all the updates have been made to the virtual DOM, we can look at what specific changes need to be made to the original DOM and make them in a targeted and optimized way. Hence, Virtual DOM leads to the better performance of ReactJs.

Props

‘Prop’ is shorthand for properties, and this is the one source of data in our component. It can be used to pass data to different components. Props are immutable.

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

Props are immutable whereas the state is for mutable data — that is data that will change in response to certain events. So, if you want to change your data value, then store it in the state. State are objects that store your component’s data.

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

When a state is changed by invoking setState() call this inform react about state changes. Then, React calls render() method to update the representation of the components in Virtual DOM and compares it with what’s rendered in the browser. If there are changes, React then updates to the DOM. Thus the child component is informed that they need to be updated and re-render because their props changed.