Saurabh Sharma

Posted on Dec 26, 2018 • Edited on Aug 15, 2022 • Originally published at itsjzt.com

Declarative Programming & React

#javascript #react #programming #declarative

Declarative programming is something popularized by React in the JavaScript community. It is not a new thing but just got popularized in recent days.

According to Wikipedia:

declarative programming is a programming paradigm — a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

This definition is nice one only if you know declarative programming but don't worry we will make sense out of it.

Declarative Programming

Declarative programming is like describing the picture, where imperative programming is the instruction for painting that picture. Declarative programming makes code:

more readable: Program that are easier to read because it hides the lower level detail. In declarative programming we don't even know about the lower level details of the system.
easier to reason about: the code we write is easier to reason about because it is much abstracted and we describe the solution instead of procedure.

As I said, declarative programming is not a new thing so there are many languages that are widely used in the industry that are declarative. Let me tell you a few of them

SQL

SQL is a domain-specific language used in programming and designed for managing data held in a relational database. If you're reading this I don't think I need to give you any introduction of SQL it is just the de-facto standard for managing relational databases.

Look at this simple SQL query:

SELECT * FROM Employees

Here we are defining we need every Employees detail not how to get the Employees. we aren't caring about any complex data structure the database is using to store the data.

CSS

CSS is a nice example of declarative programming, In CSS we are actually defining how the element should look like and the browser takes care of implementing that for you. You can just say this div should be blue in color and text should look bright yellow and the browser will do it for you.

Imagine if you set body to

body {
  width: 500px;
  height: 500px;
  background: palevioletred;
  color: white;
}

now the browser makes the body according to your CSS. This is the concept of declarative programming, you define the structure and the compiler/host does it for you.

Declarative programming in React

In react, You make interactive UIs by changing the state of the component and React takes care of updating the DOM according to it.

take this react code as an example:

import React from "react";

class App extends React.Component {
  state = {
    message: "Hello react"
  }
  render() {
    return (
    <div className="App">
      <h1>{this.state.message}</h1>
      <button 
        onClick={e => this.setState({message: "Hello World"})}>
          Change Message</button>
    </div>
  );
  }
}

this creates a "hello React" message along with a button, which can you see here like

When you click the button it changes the message to "Hello World".

In react the DOM is declarative. This means we never interact with DOM, the UI is updated when we change the state. This makes it easier to design UI and debug them, You can just change the program's state and see how the UI will look at that particular time.