Part 1: Build Button clicker in React.js

Why React.js?

Before we get to know why let's first understand how websites work that don't use React.js or similar frameworks like Svelte, Vue, Solid, etc.

1. Static Sites like blog sites that don't contain dynamic contents have HTML files stored on the server. When we make a request to let's say example1.com/blog, our browser fetches blog.html from the server and presents it to us. Let's say that page has links to multiple blogs like learn_react, learn_go, etc. When we click on learn_react, our browser again makes a request to the server, fetches learn_react.html, and presents it to us. You can notice that we are making multiple roundtrips to the server for HTML files.
2. Dynamic Sites that presents user-specific or dynamic contents, work differently. When we make a request to let's say https://www.livemint.com/, it generates HTML(using some template engine based on the backend framework ) with the latest NEWS data that they have in their database and then sends back that HTML back to the browser. Let's say we open https://github.com/ while logged in, the server generates HTML based on the repositories we have access to and then sends back that HTML to the browser.

The first scenario suits well for statics sites like blogs but the problem there is writing an entire HTML file for every other page/blog even though most of the page would contain similar skeleton and same header, footer, styles, etc., just the data would be different. In the second scenario, the server has to build HTML on every request which worsens UX badly.

React.js to the rescue

React.js is a Declarative and Component-based front-end library.

React.js encourages programmers to split UI into multiple components which can be stitched together to create a page. Let's take the example of https://reactjs.org/ itself, the homepage could have been built by composing the following components:

• Header
  • TopNav
  • TopBanner
• MainContent
  • AboutReact
  • Examples
    • Detail
    • Editor
    • EditorOutput
• Footer

The above example shows how a page can be split into multiple independent components which can be wired together to build a UI.

Let's build a simple page to understand a little bit more.

// App.js
import { useState } from "react";

export default function App() {
  const [clicks, setClicks] = useState(0);

  const handleClick = () => setClicks(clicks+1); 

  return <button onClick={handleClick}>Clicked {clicks} time</button>;
}

• const [clicks, setClicks] = useState(0); useState returns an array where the first element is the value which by default the parameter passed to useState(param) call. The second element is a function that can be used to set the value of the first element whenever we want. Whenever we will call this returned function, it will set the value of the first element and will re-render the page. This is called reactivity.
  • return <button onClick={handleClick}>Clicked {clicks} time</button> The component is returning a button which looks like HTML button but it is JSX element. onClick attribute accepts a reference to a function that it calls when the element is clicked. Please note, we are not invoking the handleClick function, we are just passing its reference/name. Clicked {clicks} time renders Clicked 0 time for the first time as we have set clicks value as 0 while calling useState(0). On clicking the button, handleClick is invoked which invokes setClicks and sets the value to clicks+1.

The component shown in this example looks like a plain JavaScript function and hence these are known as stateless functional component. The other type of component is a class component which we will see later examples in the series.

That is it for this part. We have built Button Clicker. In the next part, we will build a TODO app.