React is a JavaScript library used for building user interfaces mainly on single page applications which rely on reusable, composable, and stateful UI components.

Reactive UI, only specific components are updated as needed

Each “smart component” has their own state, which is data that is highly manipulative. If that data becomes manipulated in any way, the UI is reactive in which it will efficiently render the right components (and only those components) and not have to reload the whole page with every update.

There are two main types of components in React, “smart components” and “dumb components”. Smart components are “stateful” in which that it stores information in memory and has the ability to modify or change it. Dumb components are “stateless” in which it doesn’t really store data or modifies it. Components can pass down this data to other smart components or dumb components as “props”.

There are methods called “lifecycle hooks” which can happen before AND after the render of the HTML happens. The first one is called componentWillMount() which is a method that runs before the render happens and componentDidMount() which oppositely, happens after the render.

React.js is perfect for building SPAs (single page applications) because generally, manipulating the DOM (document object model) is slow. It’s usually slow if there is frequent changes to the data model and things have to re-render frequently. React maintains a “virtual DOM” which it modifies and tracks changes there. Once changes have been made, React uses optimizations to render these changes as efficiently as possible.

Like what you read? Give Jeff Villamin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.