Introduction to React
What is React?
React isn’t an Model-View-Controller (MVC) framework.
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
React doesn’t use templates.
React approaches building user interfaces differently by breaking them into components. This means React uses a real, full-featured programming language to render views, which we see as an advantage over templates for a few reasons:
JavaScript is a flexible, powerful programming language with the ability to build abstractions. This is incredibly important in large applications.
By unifying your markup with its corresponding view logic, React can actually make views easier to extend and maintain.
By baking an understanding of markup and content into JavaScript, there’s no manual string concatenation and therefore less surface area for XSS vulnerabilities.
Meta also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw JavaScript.
React updates are dead simple.
When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one and generate a minimal set of changes to be applied to the DOM.
The data returned from render is neither a string nor a DOM node — it’s a lightweight description of what the DOM should look like.
This process is called reconciliation.
HTML is just the beginning.
Because React has its own lightweight representation of the document, we can do some pretty cool things with it:
- Facebook has dynamic charts that render to
<canvas>instead of HTML. Instagram is a “single page” web app built entirely with React and
Backbone.Router. Designers regularly contribute React code with JSX.We’ve built internal prototypes that run React apps in a web worker and use React to drive native iOS views via an Objective-C bridge.
You can run React on the server for SEO, performance, code sharing and overall flexibility.
- Events behave in a consistent, standards-compliant way in all browsers (including IE8) and automatically use event delegation.
Single-Page Applications
The Virtual DOM
React builds a representation of the browser Document Object Model or DOM in memory called the virtual DOM. As components are updated, React checks to see if the component’s HTML code in the virtual DOM matches the browser DOM. If a change is required, the browser DOM is updated. If nothing has changed, then no update is performed.
This is called the reconciliation process and can be broken down into the following steps:
Step 1: The virtual DOM is updated.
Step 2: The virtual DOM is compared to the previous version of the virtual DOM and checks which elements have changed.
Step 3: The changed elements are updated in the browser DOM.
Step 4: The displayed web page updates to match the browser DOM.
As updating the browser DOM can be a slow operation, this process helps to reduce the number of updates to the browser DOM by only updating when it is necessary.
If a lot of elements are updated by an event, pushing the update to the browser DOM can still be expensive and cause slow performance in the web application.
The React Fiber Architecture allows React to incrementally render the web page. What this means is that instead of immediately updating the browser DOM with all virtual DOM changes, React can spread the update over time.
React can optimize when and where updates occur to the browser DOM to significantly improve application performance and responsiveness to user input. Think of it as a priority system. ==The highest priority changes, the elements visible to the user, are updated first==. While lower priority changes, the elements not currently displayed, are updated later.
There are many tools available to help you investigate how React is processing your web page. The official React Developer Tools web browser plugin developed by Meta will be one of the key tools in your developer toolbox.
Alternatives to React
React is a library and not a framework. This means you’ll often use other JavaScript libraries with it to build your application. In this reading, you will be briefly introduced to some JavaScript libraries commonly used with React.
Lodash
As a developer, there’s a lot of logic you’ll commonly write across applications. For example, you might need to sort a list of items or round a number such as 3.14 to 3. Lodash provides common logic such as these as a utility library to save you time as a developer.
Luxon
Luxon helps you work with dates and times by providing functions to manipulate and display them. For example, think of how dates are formatted in different countries. In the United States the format is Month Day Year but in Europe it is Day Month Year. This is one area where Luxon can help you display the date in the user’s local format.
Redux
When building a web application, you’ll need to keep track of its state. Think of when you shop online. The web application tracks items currently in your shopping cart. When you remove an item from the cart, the application needs to update what displays on the screen. This is where Redux comes in. It helps you manage your application state and even has advanced features such as undo and redo.
Axios
As a developer you’ll be communicating with APIs over HTTP frequently. The Axios library helps to simplify sending HTTP requests and processing the response. It also provides advanced features allowing you to cancel requests and to change data received from the web server before your application uses the data.
Jest
It is good practice to write automated tests for your code as a professional developer. The Jest library helps you to do this and works with many libraries and frameworks. It also provides reporting utilities such as providing information on how much of your code is tested by your automated tests.
Additional Resources
Learn more Here is a list of resources that may be helpful as you continue your learning journey.
React Official Website
Choosing between Traditional Web Apps and Single Page Apps (Microsoft)
React Source Code (Github)
https://github.com/facebook/react
Introduction to React.js
The original video recorded at Facebook in 2013.
