React

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

React (or sometimes ReactJS) is a JavaScript library for building user interfaces. It's sometimes also referred to as a framework.

 

The library focuses on creating declarative UIs using a component-based concept. Although React is often connected to front-end JavaScript development it can also be used to render views server-side in Node.js or power mobile apps using React Native. While React is open source, it is mainly developed by Facebook.

More on React

React was created by Facebook but is widely used by a variety of companies. It is often compared to frameworks like Angular or Vue.js but follows a more lightweight approach. Instead of being opinionated on the build and structure of your applications, it leaves those to the individual and subsequently the community. This leads to a variety of solutions for different problems. You might therefore find different attempts/libraries across articles and books.

The one thing that React is opinionated on is how your views are rendered. React works with a components system and a "props down, events up" approach with the focus on building as many reusable components as possible.

Technical Details

React projects often leverage a syntax called JSX:

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

The syntax is widely favored in the community, however, you are not bound to it and can use the React.createElement syntax instead. In fact your JSX code will ultimately be compiled under the hood to React.createElement calls anyways.

Components and Data Flow

React is centered around the concept of components. Your React application will have a root component that subsequently can have childcomponents that create an overall "component tree". Components should render their output based on two things:

  1. Props - values that are being passed into a component from the outside
  2. State - optional and bound to a single instance of a component. The component can pass state down to other components via props

If any of the two change, it will trigger React to efficiently re-render the affected components.

The only way to send state changes up the component tree is by using events.

How Does a Component Look?

A component can be described as a function:

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

It can also be defined as a JavaScript class:

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

Redux

A term that is often mentioned in combination with React is Redux. Even though they are often mentioned together, you can use either of them without the other. The goal of Redux is to provide a structured way to handle the central state of your application.

Its way of dealing with application state is inspired by the concept Flux. The concept is based on a centralized state that is read-only and that can only be modified via specific "actions" that are defined by the application.

Redux is not tied to React and can be used with other applications as well. You can read more about the concepts of Redux in their documentation.

How to Get Started with React

There's a variety of ways that you can get started with React. The React documentation is a great resource, but we'll get you started here.

If you already got Node.js and npm 5.2+, you can run these commands in your terminal to create a basic React application:

        
        
        
        

        Alternatively you can try an online playground like CodeSandbox.io directly in your browser

        How does Twilio Flex use React?

        Twilio Flex is built using both React and Redux. The component-centric model allows you to create your own components for Flex, re-use existing ones or tap into the global state of Flex using Redux by building Twilio Flex Plugins using create-flex-plugin.

        Where to Next?

        If you want to learn more about React, check out some of these resources:

        Rate this page: