Introducing ReactJS

ReactJS is a JavaScript library, created by Facebook and Instagram, in order to build user interfaces (UIs) that can respond to users' input events along with creating and maintaining states. States are used to maintain changes to components, which will be covered in detail in later chapters. The page loads faster by comparing only the changed and the updated part of the web page (we will cover Virtual DOM (Document Object Model) in more detail in Chapter 4, Stateful Components and Events). React provides a one-way data flow that reduces complexity compared with a traditional data-binding system, which facilitates creating reusable and encapsulated components. We will also explore React data flow in Stateful Components and Events chapter and how to make your UI components more reusable in Chapter 7, Making Your Components Reusable.

ReactJS is not just another JavaScript library though many developers consider it to be the V of the MVC application. It drives you through building reusable components, rethinking your UI and best practices. Nowadays, performance and portability are vital to build user interfaces, mainly due to the large use of Internet-accessible devices and the fast-paced developmental phases of the projects. This can result in complex frontend code. The need for using a library that helps your code to grow in both performance and quality is really important; otherwise, you just end up writing big HTML files with UI logic everywhere that takes ages to modify and can compromise code quality. ReactJS encourages the best practices shown here:

• Following a pattern
• Separating concerns
• Splitting your UI into components
• Communication between components with one-way data flow
• Use of properties and states appropriately

ReactJS is a library that takes care of the UI (Views) differently from a framework. Let's say we are building a Single Page Application (SPA) and we want to handle a routing system, we can use whatever library we want that deals with routing. This applies to every other part of the technology stack required to build a SPA except the UI or, as some say, the View, when working on an MVC/MV* architecture. In the ReactJS world, when you're talking about the view, actually you're talking about a component. They are a little different from each other. A React component holds both logic and behavior of the View. In general, a single component represents a small part of the View, whereas many of these components together represent the whole View of the application.

We will be discussing more about MVC/MV* and FLUX architecture in Chapter 6, Reacting with FLUX.

Note

MVC stands for Model View Controller and MV* for Model View Whatever.

It is very straightforward to build or change just a small part of your web application. Facebook did that with their commenting interface. They replaced it with one made in ReactJS. There is detailed code at https://facebook.github.io/react/docs/tutorial.html about how the comments appear in Facebook using ReactJS.

This commenting interface, which the Facebook development team explained, gives us the live updates and Optimistic commenting, in which the comments are shown in the list before having been saved on the server. There is also a Facebook developer plugin, which enables users to add comments in your website using their Facebook accounts (https://developers.facebook.com/docs/plugins/comments).

One of my experiences was to build a survey app in ReactJS and place it in some web application already in production. ReactJS provides a bunch of life cycle events, which facilitates the integration with other libraries, plugins, and even frameworks. In Chapter 5, Component Life Cycle, we will go through all the life cycle phases of a React component, and in Chapter 7, Making Your Component Reusable, we will be incorporating validations and organizing our code using Mixins.

ReactJS understands the UI elements as objects. When building React components, we will modularize the code by encapsulating the view logic and the view representation. This is another feature that supports componentization and is one of the reasons for Virtual DOM to work. React code can also be written in another syntax, JSX (an extension to ECMASCRIPT), instead of JavaScript. Although it is not mandatory to use, it is easy to use and increases the readability of the code. We're going to dig more into JSX and see how it works and why it's necessary in Chapter 2, Exploring JSX.

Who uses ReactJS?

ReactJS is one of the emerging JavaScript libraries to build web UI components, and some big companies are already using it in production. They are as follows:

• The Instagram website
• Facebook comments, page insights, business management tools, Netflix, Yahoo, Atlassian, and most new JS development
• New JS development for Khan Academy, PayPal, AirBnb, Discovery Digital Networks, and many more
• Some projects inside The New York Times