A Simple Introduction to ReactJS
React is a popular JavaScript library for building UIs. It's developed and maintained by Facebook and has a strong community backing it. In this introduction, we'll cover the basics of ReactJS. We'll discuss what ReactJS is and how it compares to other JavaScript libraries and frameworks used today. We'll also highlight key characteristics that make React a superior UI library.
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
JavaScript is used for dynamically updating HTML elements. While libraries like jQuery have made adding/removing DOM elements easy, redrawing elements is a computationally expensive operation in JavaScript.
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.
JSX
JSX stands for "javascript syntax extension". JSX is commonly used for creating React elements. It's syntax resembles HTML but takes some getting used to. While you can use React without JSX, it's considered best practice to adopt JSX since it plays so well with React elements.
Conclusion
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.
