React JS

Introduction to React JS

React is a JavaScript library for creating user interfaces. Serves as the view of MVC architecture. Developed and maintained by Facebook and Instagram. React was created by Jordan Walke. React Native, which enables native Android, iOS, and UWP development with React.


Notable features of React JS

• One-way data flow
• Virtual DOM
• JSX

Props and State of React JS

Props are short for Properties and State is internal to a component, while props are passed to a component. Props are unchangeable but States can change. Props and State are the two types of data that control a component. Props essentially help you write reusable code. 

React component life cycle

In React each component has several life cycle methods that you can override to run code at particular times in the process.

These methods are called in the following order when an instance of a component is being created and inserted into the DOM

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()
5. shouldComponentUpdate()
6. componentDidUpdate()
7. componentWillUnmount()
8. componentDidCatch()

Sample react component

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}