Using a React CDN Combination

What is React JS?

React is an open source JavaScript library used for building user interfaces. It is currently maintained by Facebook, Instagram and a large community of developers. React also has a sister library called React Native which provides the React architecture to native iOS and Android applications.

A few features of the React JS library include the following:

• Virtual DOM. React abstracts away the DOM, allowing programmers to write code as if the whole page is rendered upon each change while React libraries only render subcomponents that change.
• Data flow. React uses one-way data flow to reduce boilerplate.
• Use of JSX. Reacts components are often written in JSX (a JavaScript extension) to allow for easy quoting of HTML and using of HTML tag syntax.

The React library can be downloaded and hosted on your origin server, however for faster delivery, it can also be referenced using a React CDN combination. The following section outlines two methods for achieving this.

How to use a React CDN combination

You can accelerate the React library a couple of different ways using a CDN. If you already have an existing CDN account, you are likely already delivering the library via your CDN's network of POPs. However if not, you can easily reference the files using your CDN URL. The second option for those who do not currently have a CDN account, is to use a third party CDN service that is already hosting the files across a network of POPs.

Option 1 - Using your own CDN account

The first option is to use your own CDN account to accelerate the React library. KeyCDN provides you with two options to achieve this, either by using a Pull Zone or a Push Zone.

A Pull Zone will automatically pull all of your static assets from your origin server and cache them upon first request. Upon subsequent requests, your static assets will be delivered from the CDN edge server. Therefore, with using this method, there is no URL configuration required at the origin in order to accelerate the React library via your CDN.

If using a Push Zone, you can simply upload the latest version of React via FTP(S) or rsync and reference it in your project using your Zone URL or Zone Alias. For example:

https://cdn.yourwebsite.com/js/react.js

Option 2 - Using an open source CDN

The second option for using a React CDN combination is to call the library using an open source CDN service such as cdnjs.com. The minified version of the cdnjs React library can be referenced using the following snippet (ensure that you first check for the latest version x.y.z).

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/x.y.z/react.min.js"></script>

Benefits of a React CDN combination

Whether you're using the first or second option, applications using a React CDN combination can deliver the library assets faster to users as there will be less distance between the client and server. Read our article, 7 reasons you should use a CDN to learn more about the benefits of using a CDN. There also exist many other advantages to users who accelerate their React file and other static content with KeyCDN such as:

• Access to our strategically placed growing global network of POPs
• HTTP/2 supported edge servers for optimized content delivery
• Free SSL certificates with Let's Encrypt integration