What is React?

React, or 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.

Lets get deeper

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.

Now lets get technical

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 child components 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.

So How does a Component look like

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!!!!

There’s a variety of ways that you can get started with React. The React documentation is a great resource to begin with.