React

React

React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

Why was react developed?

    1.Complexity of two-way data binding.
    2.Bad UX from using "cascading updates" of DOM tree.
    3.A lot of data on a page changing over time.
    4.Complexity of Facebook's UI architecture.
    5.Shift from MVC mentality.

Who uses React?

Fundamentals- Most important terms in React

Component

• Components are self-contained reusable building blocks of web application.
• React components are basically just idempotent functions (same input produces same output).
• They describe your UI at any point in time, just like a server-rendered app.

Props

• Passed down to component from parent component and represents data for the component.
• Accessed via this.props.

State

•  Represents internal state of the component.
• Accessed via this.state.
• When a component's state data changes, the rendered markup will be updated by re-invoking render() method.

JSX

•  Arguably, one of the coolest things in React.
• XML-like syntax for generating component's HTML.
• Easier to read and understand large DOM tree.
• Translates to plain JavaScript using react-tools.

Virtual DOM

•  The virtual DOM is used for efficient re-rendering of the DOM.
• React aims to re-render the virtual tree only when the state changes.
• Uses 2 virtual trees (new and previous) to find differences and batch update real DOM.
• Observes data changes (setState) and does dirty-checking to know when to re-render component.
• Whenever possible, does not update entire component in real DOM - only computes a patch operation that updates part of the DOM.