A Simple Introduction to ReactJS
• stackchief •
What is React.js?
ReactJS is a library for building UI components. Unlike Angular or Backbone, React is NOT a framework. It simply addresses the presentation layer of an app. This means you won't find native implementations for routing, http service calls, etc. with ReactJS.
You use the ReactJS library to create reusable UI components for your application. These components are responsible for presenting data that changes over time. React components clearly separate logic from presentation, allowing you to render the same component on different platforms (cross platform).
React.js Key Characteristics
Before jumping into React, it's important to understand the key characteristcs of React:
The Virtual DOM
ReactJS implements a virtual DOM to address this issue. The virtual DOM sits on top of the "real" DOM and compares UI changes before redrawing components. By "diffing" the virtual DOM with the real DOM, React efficiently determines what to redraw in the view.
This results in a huge performance boost as the virtual DOM eliminates unnecessary "redrawing" of DOM nodes.
Unidirectional Data Flow (Flux)
UI components represent underlying data models. When these data models change, components must register updates to accurately reflect the app's new state.
React uses unidirectional data flow to manage this state. Any change events or updates trigger a top-down reaction where parent components propogate changes to child components. Through this unidirectional data flow, React provides an organized way of managing app state and change detection.
React is simply a library for creating UI components. It uses a virtual DOM to more efficiently redraw and update components. React follows a unidirectional data flow design pattern resulting in a simplified programming model. Using JSX with React makes rendering components easier and is highly recommended.