Why use React?

Several popular websites such as Facebook, Instagram, Netflix, Uber, WhatsApp, Venmo, PayPal, and Airbnb are developed in React.

So, what makes React so popular and why these companies chose React to develop their websites. Let’s look at React’s definition and its key properties.

React is declarative, component-based, and extensible JavaScript library.

React is declarative

React is declarative that helps create interactive user interfaces straight forward. React is used to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

React is east to learn

Simplicity is the key reason of React being popular. React focuses on building front-end user interfaces only and mix well with vanilla JavaScript, and HTML. React is easier to learn as long as you are familiar with HTML and JavaScript. React apps can be developed using most of the popular tools such as Visual Studio Code. Developers coming from other web technologies can easily adopt React.

React is faster to render

Elements are the smallest unit of a React app. Think of an element as a variable that can store some value. Here is an example of a React element.

const hello = <h1>Hello React App</h1>;

Elements are easy to create and they are cheap to render. Not only elements are cheap but they also provide control and flexibility on how these elements are rendered. Unlike browser DOM that manages the rendering of a web page, rendering elements in React is managed by React DOM. ReactDOM.render() is used to render an element.

React is powerful

JSX is a key part of React and makes React a powerful and flexible library. JSX stands for JavaScript XML. JSX allows developers to write HTML in React. JSX makes it easier to write and add HTML in React. Here is an example:

const hello = <h1>My React App</h1>;

As you can see that this code, its not HTML, not a string. This is JSX syntax that allows to store HTML <h1 /> tag in a constant string, which is React. In other words, we can store plain HTML in React variables. React is a syntax extension to JavaScript. JSX produces React “elements”.

While JSX is not required to write React apps, it is recommend using it to create user interfaces. Think of JSX as a template language.

Here are some of the key properties of JSX:

JSX is like XML that is easy to understand and write.

JSX can be sought as a template language.

JSX represents objects.

JSX is an expression.

JSX prevents injection attacks.

React supports components

React allows you to build encapsulated components that manage their own state, then compose them to make complex UIs. Each component renders without affecting other components and part of a page. Since component logic is written in JavaScript, you can easily pass rich data through your app and keep state out of the DOM.

Components in React are reusable and can be reused in different parts of an app. Each component has its own code, login, and state. Refreshing one component does not affect the performance of other components.

React is extensible

React plays nice with other libraries and frameworks. You can also use React in an existing Web application without changing much.

React supports server-side

React can also render on the server using Node. Node (previously Node.js) has become a popular method of writing JavaScript based service side programming.

React supports native mobile development

React Native is growing rapidly and becoming a primary programming language to write native mobile apps. React developers can use their existing skills to build mobile apps using React Native.

Simple React app

Now, let’s see how easy it is to create a React app.

How to create a new React app