Skip to content

React

!react logo

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

React does not attempt to provide a complete "application library". It is designed specifically for building user interfaces and therefore does not include many of the tools some developers might consider necessary to build an application. This allows the choice of whichever libraries the developer prefers to accomplish tasks such as performing network access or local data storage.

Facts

  • Introduced as an open source project in May, 2013
  • Developer(s): Facebook and community
  • "a JavaScript library for building user interfaces"
  • Concerns like routing, state management and data fetching have been left to third parties.
    • large and very active ecosystem around React

Pros

  • Hugely popular with a strong job market
  • Lots of training resources and third-party libraries
  • Best choice for cross-platform
  • Strong corporate support (Facebook)

Cons

  • Abundance of choice can be overwhelming at first
  • Best practices not always clear to newcomers
  • Learning curve can be steep for building larger applications

Core features

Elements

React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of “components”. An element describes what you want to see on the screen. React elements are immutable.

const element = <h1>Hello, world</h1>;

Typically, elements are not used directly, but get returned from components.

Components

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Components can also be ES6 classes:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component.

react components

Quote

A React component is essentially just a function that returns HTML.

It can accept arguments if necessary, in the form of props, and can use those to determine what it renders.

Reconciliation

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called “reconciliation”.

Test it out

Try it online

You might be interested in the online React template on StackBlitz: https://stackblitz.com/fork/react

Read more