# What is React?

[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][]:

```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:

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

It can also be defined as a [JavaScript class][]:

```jsx
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.

It handles application state based on a centralized, read-only state that only certain actions can modify. The application defines these actions.

[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:

```sh title="Create a React Project"
# Bootstrap an application using npm.im/create-react-app
npx create-react-app my-app

# Navigate into your new application
cd my-app

# Start your application
npm start
```

Alternatively, you can try an online playground like [CodeSandbox.io][] 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:

* [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][]

[`create-flex-plugin`]: /docs/flex/quickstart/getting-started-plugin

[`React.createElement`]: https://reactjs.org/docs/react-api.html#createelement

[Angular]: https://angular.io

[Build a chat app with Twilio and KendoReact]: https://www.twilio.com/blog/chat-app-twilio-kendoreact

[CodeSandbox.io]: https://codesandbox.io/s/new

[compiled under the hood to `React.createElement` calls]: https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects

[Facebook]: https://opensource.fb.com

[Getting Started with React]: https://reactjs.org/docs/getting-started.html

[How to send an SMS from React with Twilio]: https://www.twilio.com/blog/send-an-sms-react-twilio

[JavaScript class]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

[JSX]: https://reactjs.org/docs/introducing-jsx.html

[Node.js]: https://nodejs.org

[npm]: https://npmjs.com

[React documentation]: https://reactjs.org/docs/getting-started.html

[React Native]: https://reactnative.dev

[React]: https://reactjs.org

[read more about the concepts of Redux]: https://redux.js.org/introduction/core-concepts

[Redux]: https://redux.js.org

[Serving Coffe with Twilio Programmable SMS and React]: https://www.twilio.com/blog/serving-coffee-with-sms-and-react-html

[Set up a React app with Node.js server proxy]: https://www.twilio.com/blog/react-app-with-node-js-server-proxy

[Twilio Flex Plugins]: /docs/flex/quickstart/getting-started-plugin

[using events]: https://reactjs.org/docs/lifting-state-up.html

[Vue.js]: https://vuejs.org