Skip to main content

What is React

React is a popular JavaScript library used for building user interfaces, primarily for single-page applications. It's used for handling the view layer for web and mobile apps, allowing you to create reusable UI components. React was first created by Jordan Walke, a software engineer at Facebook, and it was first deployed on Facebook's newsfeed in 2011 and on Instagram in 2012.

What Makes React Special?​

There are many reasons why developers prefer React over other JavaScript libraries and frameworks:

  1. Component-Based: React is all about components. Your application UI is divided into a collection of reusable components. This approach makes your code more predictable and easier to debug.

  2. Declarative: React allows you to create interactive UIs in a simple and painless way. You design simple views for each state in your application, and React will efficiently update and render the correct components when your data changes.

  3. Learn Once, Write Anywhere: React doesn't make assumptions about the rest of your technology stack. You can develop new features in React without rewriting existing code.

How Does React Work?​

React creates a virtual DOM. When state changes in a component it firstly runs a "diffing" algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.

Why Use React?​

  • It improves the application's performance through Virtual DOM.
  • It can be conveniently used on the client as well as server side.
  • Because of JSX, code's readability improves.
  • React is easy to integrate with other frameworks like Meteor, Angular, etc.
  • Using React, writing UI test cases become extremely easy.

React Elements vs. Components​

React elements are the building blocks of React applications. An element describes what you want to see on the screen. Elements are plain objects and are cheap to create. Elements are immutable, once you create an element, you can't change its children or attributes.

Components are like functions that return React elements. Components are more complex UI concepts which might involve state or lifecycle methods. They can be defined using classes or functions.

React Props vs. State​

Props (short for properties) are a way of passing data from parent to child components. State is a data structure that starts with a default value when a component mounts. It may be mutated across time, mostly as a result of user events.

Conclusion​

React is a flexible and efficient library for building user interfaces. It's based on a component-based architecture and a one-way data flow. It's not a full-featured framework like Angular, but it integrates well with other libraries. It's widely used and supported by a large active community. Whether you want to build a simple website or a complex single-page application, React is a great choice.

In the next part of this series, we will dig deeper into React, exploring JSX, components, state, props, and React's lifecycle methods. We will also look at how to create a simple React application.