What is React, and why should I learn it?

What is React?

ReactJS is an open-source JavaScript library developed by Facebook, which is used for building user interfaces – specifically for something known as Single Page Apps (more on this in a second).

React was developed in 2011 by Jordan Walke, a software engineer at Facebook, and then released to the public in 2013. It has since become one of the most popular libraries for development of Single Page Applications.

React is licensed under the MIT License (which means it’s free to use, build on and share), and is used by many major platforms and websites today, such as Netflix, Facebook, Whatsapp Web, Instagram, PayPal, Dropbox and Khan Academy.

What are Single Page Applications?

On a normal website, users are constantly requesting new data from the server with nearly every click. Every time you search, write an email, publish a blog post, or book a flight — which each click subsequent click you are requesting data. Understandably, this can affect the user experience, with wait times after each action. Single Page Applications (SPAs) solve this problem.

A single-page application is an app that works inside a browser and does not require page reloading during use. You use SPAs every day: Dropbox, Gmail, Facebook, YouTube, Github, and Amazon are all SPAs. SPAs improve the user experience greatly by imitating a “natural” environment in the browser : no page reloads, no extra wait times.

It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. This is where React comes in. It allows you to create interactive user interfaces (UIs) which can dynamically load data from a server as required. Learn more Single Page Applications in this Medium post which explains it nicely.

Pros and Cons of SPAs

Single Page Applications greatly improve the user experience by reducing load and wait times as previously mentioned. They’re fast, since most resources (HTML and CSS) are loaded only once. They’re easy to debug, and development is simplified and streamlined.

However, SPAs also have some disadvantages:  

Making SPAs SEO-friendly can require quite a bit of work (although it’s easier now than it used to be a few years ago), since the content of the page is fetched through AJAX (this is when data loads on a page and you don’t have to refresh the page — think about how GMAIL, Netflix or infinite scroll works). SPA websites can sometimes be slow to download as well – at least initially, since the user needs to fetch the entire framework (such as React).

Additionally, these websites/webapps are almost completely unusable if the user has JavaScript disabled or if the user is on an older device/browser.

What are some other notable JavaScript frameworks? And how does React compare?

React is one of various JavaScript frameworks that allow easy development of SPAs. Some other notable frameworks are Vue.js, Ember.js, Meteor.js, etc.

What sets React apart, however, is that it’s easy to learn, has reusable components, has great developer tools available, the JSX JavaScript syntax extension, and a huge community.

Understandably, there’s a lot of market demand for React developers. As of June 2018, React was mentioned in over 28% of job postings across the most popular languages. Not only does React win on the jobs marketplace, it’s also leading in the number of npm downloads.

React Native Basics 

Another great advantage that React has over competing frameworks is React Native.

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS and UWP by enabling developers to use React along with native platform capabilities.

React Native lets you with existing web technologies. React Native helps in building cross-platform mobile apps, which save time and costs as compared to creating completely separate apps for different platforms.

Today React Native is used by some of the most popular apps: Instagram, Facebook, Pinterest, Skype, Uber, Discord and others.

Checkout Facebook’s React Native tutorial to get started.

How do I get started with React?

There are tons of resources and learning materials on the web for React. Take a look at the Getting Started section of the official docs.

If you’re comfortable with the command line and npm you can install React with the command:

$ npm i react

Example usage in your JavaScript file:

var React = require(‘react’);

At One Month, we offer an online course in React which comes with certification. It’ll teach you the fundamentals, and get you started with your first React projects.

If you’re new to JavaScript? You’ll want to learn Javascript and HTML first before you learn React.