I do declare(ative), React.js is good, clean fun!

To recap, my many months of unyielding dedication and diligence, spent methodically drilling and internalizing core concepts and implementing practical applications of JavaScript programming, successfully eventually paved the way to me starting Phase 2 at Flatiron School. Notably, Phase 2 consists of learning what is, more or less, the most popular contemporary JavaScript library, React.js. At first glance, React code may look cleaner and less sprawling that vanilla-JS. Why is that?

Simply, React programming signals a shift from imperative to declarative programming. Formally, imperative programming is defined as "a programming paradigm of software that uses statements that change a program's state," whereas declarative programming "expresses the logic of a computation without describing its control flow."

So, what does that even mean? Essentially, imperative programming means writing code that "focuses on describing how a program operates step by step," detailing each operation at a granular and often tedious level of code. In vanilla-JS, DOM manipulation might look like:

const btn = document.querySelector = document.querySelector(".btn")

const listener1 = () => {
  btn.style.backgroundColor = "#DB2777";
  btn.style.innerText = "Are you sure?"
  btn.removeEventListener("click", listener1)
  btn.addEventListener("click", listener2)
}

const listener2 = () => {
  container.innerHTML = 'unicorn'
}

btn.addEventListener("click", listener1)

credit: https://alexsidorenko.com/blog/react-is-declarative-what-does-it-mean/

By contrast, React is declarative. React programming merely "describes what a program must accomplish" rather than exhaustively detailing how a program accomplishes a task. Think about DOM manipulation. Vanilla-JS necessitates multiple levels of variable declaration: grabbing an element with .querySelector, assigning some value to the element, appending that element to a parent element, and possibly appending that parent element to yet another parent element.

In React, however, we can streamline the code needed to accomplish programming tasks. React abstracts and simplifies code, handling much of the nitty-gritty complexities of vanilla-JS under its hood. Through setting and managing component state, React lets us write and render code that resembles a mixture of Javascript and HTML (JSX) that is more succinct overall and dynamically responsive based on changes in state via user input.

Thus, DOM manipulation in React might look like:

const [scene, setScene] = useState('button')

if (scene === 'button') {
  return (
    <Button 
      blue 
      onClick={() => setScene('question')}>
      Show the Unicorn
      </Button>
  )
}

if (scene === 'question') {
  return (
    <Button 
      pink
      onClick={() => setScene('unicorn')}>
      Are you sure?
      </Button>
  )
}

if (scene === 'unicorn') {
  return (
    <span>unicorn</span>
  )
} 

credit: https://alexsidorenko.com/blog/react-is-declarative-what-does-it-mean/

Here, React.js allows us to simply declare and set state, "scene," and handle button rendering, styling, and event listening all via a child component. Much of the specificity of imperative programming is thereby dealt with inside of React and our code is therefore considered declarative in its general higher-level description of what we want to do, rather than specifying exactly how to do it.

As such, my experience both learning and using React to build my Phase 2 project has been overwhelmingly more engaging and straight-forward than my first foray into JavaScript during Phase 1. Partly, this is because I better understand programming fundamentals and partly because React relies on declarative programming that makes my coding experience far less tedious and prone to minute error-making.

For anyone else taking their first steps into React.js, make sure to understand the distinction between imperative and declarative programming, since this distinction is what distinguishes and underlies the purpose of React.js altogether!

References:

1. https://en.wikipedia.org/wiki/Imperative_programming
2. https://en.wikipedia.org/wiki/Declarative_programming
3. https://miro.medium.com/max/1200/1*V-RqwITiRRdXCVJWD1xXIw.png