DEV Community

loading...
Cover image for Declarative Programming & React

Declarative Programming & React

itsjzt profile image Saurabh Sharma ・3 min read

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.

Discussion (15)

pic
Editor guide
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
Collapse
habelfoc profile image
Habel Justin

i finally understand it! thanks! l

Collapse
itsjzt profile image
Saurabh Sharma Author

Glad that you find this post helpful

Collapse
teddcp profile image
Collapse
achinara profile image
Chinara

Thank you for post! For me more useful )

Collapse
asyraf profile image
Amirul Asyraf

Thanks for the beautiful article

Collapse
itsjzt profile image
Saurabh Sharma Author

Comments like this one make my day. 😊

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
Collapse
saurabhcodeword profile image
Saurabh

Declarative Programming

😍

Collapse
ben profile image
Collapse
itsjzt profile image
Saurabh Sharma Author

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