Key Features of React JS

react

In this series, we will look into some of the notable features of React from which React gets its power and simplicity. This article is a formal introduction to all of them, diving more into the concept rather than the code. We will discuss all of them in detail with lots of examples later in this series.

Key Features of React

  • JSX
  • Composition of Components
  • Virtual DOM
  • One way data-binding
  • Lifecycle Methods

JSX (Javascript XML Notation)

React is developed on the fact that rendering logic should be coupled with other UI logic(events, state management) and should be managed together. For this reason, instead of separating technologies(HTML and javascript into separate files), react manages complexity by dividing concerns into loosely coupled units called components.

"Javascript XML" is a syntax extension of Javascript. Using JSX, you can write markup inside Javascript, providing you with a superpower to write logic and markup of a component inside a single .jsx file.

1
2
3
4
function greeting(user) {
//warning: JSX in next line...
  return <h1>{user}, How are you!!!</h1>;
}

Composition of Components

Know what! React has yet another superpower, which allows you to reuse your code in a very subtle way. This superpower allows you to compose small components to form a complex component.

For example, you can create separate components for like, share and comment encapsulating their logic. Later, you can combine them to form a complex component like cards.

Component Composition

Virtual DOM

React is very performant. To achieve it, react creates a virtual representation of UI in the memory known as Virtual DOM. Instead of updating DOM directly, React sync the Virtual DOM with the real DOM. Virtual DOM updates only those components in real DOM for which the state has changed and thus needs a re-render to show the updated data on the screen.

Virtual DOM

One-way data binding

In React, data flows from parent to child unidirectionally. The parent component passes its state to the child component using props. Child, in turn, can communicate to parents for updating the state using callbacks. This one-way communication between parent and child makes developing complex applications easier. It also helps in making debugging a lot less painful.

one-way data binding

Lifecycle Methods

Lifecycle methods are hooks which let you run different code at different point of a component's life. Thus, making it easy for you to manage components in React application during their lifetime.

Different phases of react components are:

Mounting

When the react component is added to the DOM Tree, it is said to be mounted. After mounting, the component becomes visible on the screen.

Methods

  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()

Updating

When a component receives a new state or props, the component is re-rendered. React provides different lifecycle methods to hook into the update event.

Methods

  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Unmounting

When a component is removed from the DOM tree, it is said to be unmounted.

Methods

  • componentWillUnmount()

We will discuss lifecycle methods in detail in later articles.


If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.


We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels (twitter, Facebook, LinkedIn).

Share and support us

Share on social media and help us reach more people