What is 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.

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.

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.

A component can be described as a function:

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

It can also be defined as a JavaScript class:

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

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.

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:

1
# Bootstrap an application using npm.im/create-react-app
2
npx create-react-app my-app
3

4
# Navigate into your new application
5
cd my-app
6

7
# Start your application
8
npm start

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

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.

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

• Getting Started with React
• Build a chat app with Twilio and KendoReact
• How to send an SMS from React with Twilio
• Set up a React app with Node.js server proxy
• Serving Coffe with Twilio Programmable SMS and React