DEV Community

Cover image for Declarative Programming & React
Saurabh Sharma
Saurabh Sharma

Posted on • Updated on • Originally published at itsjzt.com

Declarative Programming & React

Cover Photo by Mimi Thian on Unsplash

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

react-hello

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.

TL;DR

In declarative programming, you describe the program/UI/picture and someone else React/Browser/OS implements it.

Top comments (16)

Collapse
 
sendze_festus profile image
Festus

Thanks!

Collapse
 
peterwd1 profile image
Peter • Edited

React provides a declarative API so that you donโ€™t have to worry about exactly what changes on every update.

Thank you. I now understand how reconciliation, VDOM, and state all that support declarative API :)

Collapse
 
itsjzt profile image
Saurabh Sharma

๐Ÿ‘

Collapse
 
habelfoc profile image
Habel Justin

i finally understand it! thanks! l

Collapse
 
itsjzt profile image
Saurabh Sharma

Glad that you find this post helpful

Collapse
 
asyraf profile image
Amirul Asyraf

Thanks for the beautiful article

Collapse
 
itsjzt profile image
Saurabh Sharma

Comments like this one make my day. ๐Ÿ˜Š

Collapse
 
achinara profile image
Chinara

Thank you for post! For me more useful )

Collapse
 
teddcp profile image
teddcp
Collapse
 
saurabhcodeword profile image
Saurabh

Declarative Programming

๐Ÿ˜

Collapse
 
ben profile image
Ben Halpern

Some may also find this post from yesterday useful

Collapse
 
itsjzt profile image
Saurabh Sharma

OMG, both posts are ditto same ๐Ÿ˜ซ

Collapse
 
ben profile image
Ben Halpern

Nah, different takes and angles. It definitely helps to have both. ๐Ÿ™‚

Thread Thread
 
itsjzt profile image
Saurabh Sharma

๐Ÿ˜Š

Collapse
 
vinceramces profile image
Vince Ramces Oliveros

Great article but would you mind telling me the names of those gals on the thumbnail/cover? Just for research.

Collapse
 
itsjzt profile image
Saurabh Sharma

๐Ÿ˜