Skip to contentSkip to navigationSkip to topbar
Rate this Page:

What is React?


React(link takes you to an external page) (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(link takes you to an external page) or power mobile apps using React Native(link takes you to an external page). While React is open source, it is mainly developed by Facebook.


More on React

more-on-react page anchor

React was created by Facebook(link takes you to an external page) but is widely used by a variety of companies. It is often compared to frameworks like Angular(link takes you to an external page) or Vue.js(link takes you to an external page) 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(link takes you to an external page):


_10
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(link takes you to an external page) syntax instead. In fact your JSX code will ultimately be compiled under the hood to React.createElement calls(link takes you to an external page) anyways.

Components and Data Flow

components-and-data-flow page anchor

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(link takes you to an external page).

How Does a Component Look?

how-does-a-component-look page anchor

A component can be described as a function:


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

It can also be defined as a JavaScript class(link takes you to an external page):


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

A term that is often mentioned in combination with React is Redux(link takes you to an external page). 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(link takes you to an external page). 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(link takes you to an external page) is not tied to React and can be used with other applications as well. You can read more about the concepts of Redux(link takes you to an external page) in their documentation.


How to Get Started with React

how-to-get-started-with-react page anchor

There's a variety of ways that you can get started with React. The React documentation(link takes you to an external page) is a great resource, but we'll get you started here.

If you already got Node.js(link takes you to an external page) and npm(link takes you to an external page) 5.2+, you can run these commands in your terminal to create a basic React application:

Create a React Project

create-a-react-project page anchor

_10
# Bootstrap an application using npm.im/create-react-app
_10
npx create-react-app my-app
_10
_10
# Navigate into your new application
_10
cd my-app
_10
_10
# Start your application
_10
npm start

Alternatively, you can try an online playground like CodeSandbox.io directly in your browser(link takes you to an external page)


How does Twilio Flex use React?

how-does-twilio-flex-use-react page anchor

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:


Rate this Page: