Declarative Programming in React

When you go to React.js front page you can read that:

Declarative.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Then you look at some example:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

and start to wonder how this code can be considered declarative? Is there any truth in the description? Let's find out.

Every app has state and logic. Logic can be expressed in declarative or imperative style.

People have different opinions about CSS language but everybody agrees that it's declarative, so we'll begin with CSS code and compare it to React code to see if there are any similarities.

This CSS code:

.trendy { color: red; }
.fancy { color: blue; }

can be translated to pseudocode:

when element class is `trendy` its text color should be red
when element class is `fancy` its text color should be blue

React expects similar declarative description from you:

//       declarative view description
//                   ↓
ReactDOM.render(<div>Hi</div>, rootEl);

The format of the view description that React uses is commonly known as VDOM and looks like this:

{
  type: "div",
  props: {
    children: "Hi"
  }
}

That's what JSX evaluates to.

The previous code snippet can be expressed in pseudocode as:

the view should be <div>Hi</div>

But this isn't really useful. We don't want our view to be static, that's why we chose React instead of just writing HTML code. We want something like:

when app state is `1` then the view should be <div>1</div>
when app state is `2` then the view should be <div>2</div>
...

Okay, the code it declarative but it isn't manageable (writing a clause for every possible number? No, thank you).

Can we do better? How about this code:

when component state is `n` then the view should be <div>{n}</div>

With just a single line of pseudocode we have all the numbers covered. This code is still declarative - it's equivalent to the previous pseudocode but a lot more succinct.

In CSS you can encounter special kind of declarations that are applied based on some data, like the position of an element.

Let's say you want every alternate div to have gray text, instead of writing:

div:nth-child(1) { color: gray; }
div:nth-child(3) { color: gray; }
div:nth-child(5) { color: gray; }
...

You can write:

div:nth-child(2n - 1) { color: gray; }
/* or even better */
div:nth-child(odd) { color: gray; }

Is there something similar in React? Well, yes - a component:

function Component({ n }) {
  return <div>{ n }</div>
}

It's a declarative function that describes the relation between the state and the view. So indeed, this is a declarative code. Whenever React needs to know how the current view should look like it fires up Component.

There you have it: React components are just like sophisticated CSS declarations and when you write in React, you're writing declarative code.