Time Based Greeting With React And Bridgetown

Photo by Elena Kuchko on Unsplash

React is a library that I have been wanting to implement into my Bridgetown site
for quite some time now. Today we're going to configure React into Bridgetown,
and optionally use a component to render a greeting to the users based
on their time of day.

I'll be separating this tutorial into two sections. First section we'll get
React running, second section we will add the fun little greeting script.

At the time of writing this, I am running Bridgetown version 0.21.4.

Part 1: Configure React

Overview of steps

Install the packages via Yarn
Update the webpack.config.js
Create your component
Ensure DOM is loaded before mounting component
Add container to layout

1. Install the packages via Yarn

yarn add -D react react-dom

Run this at the root of your project where the package.json file is located. The
"-D" flag installs them as dev dependencies.

2. Update the webpack.config.js

Place this code...

var esbuildLoader = config.module.rules.find(rule => rule.use && rule.use.loader == "esbuild-loader")
if (esbuildLoader) {
  esbuildLoader.use.options.loader = "jsx"
}

After this...

var config = require("./config/webpack.defaults.js")

and before this...

module.exports = config

Don't edit the "webpack.defaults.js" file because it can potentially be
overriden when you upgrade Bridgetown to a newer version.

The snippet looks through the module rules in the default config for a loader
called "esbuild-loader" and if it is there then we have the loader use JSX.

3. Create your component

Create a folder "components" in your javascript directory. Here you will keep
all of your React compononents that will be imported into index.js.

./frontend/javascript/components

Create a file called HelloWorld.js and add the following code...

# in ./frontend/javascript/components/HelloWorld.js

import React from "react"
import ReactDOM from "react-dom"

export const HelloWorld = () => {
  const hello = "Hello"

  return <p>{hello} World!</p>
}

export const renderInDOM = () => {
  console.log("about to render!")
  ReactDOM.render(<HelloWorld />, document.querySelector("#root"))
}

4. Ensure DOM is loaded before mounting component

# This snippet goes in your `./frontend/javascript/index.js`

import { renderInDOM } from "./components/HelloWorld"

window.addEventListener("DOMContentLoaded", () => {
  renderInDOM()
})

Now we are importing the renderInDOM function from the component file and
using an event listener to make sure the DOM is loaded so we have somewhere to
render the component.

Note: Thank you @jaredcwhite for helping me
with the webpack.config.js and import DOM snippet to make this happen!

Add your div to your layout

<div id="root"></div>

Think about where you want to render your component. It could be in your layouts
or pages, where ever you like. I put mine in my index page.

There you have it! You should have a "Hello World!" rendering where you
placed your div tag with the id of "root".

Part 2: Render a greeting based on time of day

The following is is an example of a custom greeting that changes a string based
on the time of day.

Overview of steps

Create component for greeting users
Import into index.js
Apply html tag to template

1. Create component for greeting users

Let's make another component called Greeting.js. Place the following
code inside of it.

# In ./frontend/javascript/components/Greeting.js

import React from "react"
import ReactDOM from "react-dom"

export const Greeting = () => {
    var myDate = new Date();
    var hours= myDate.getHours();
    var greet;

    if (hours < 12)
        greet =  "morning";
    else if (hours >= 12 && hours <= 17)
        greet = "afternoon";
    else if (hours >= 17 && hours <= 24)
        greet = "evening";

    return <span>Good {greet}!</span>
}

export const renderGreeting = () => {
    console.log("dynamic Greeting is rendering!")
    ReactDOM.render(<Greeting />, document.querySelector("#greeting"))
}

JavaScript is perfect for this feature because it looks for the time of day
based on the browser the user is viewing it on because it is client side
scripting. If we used server side scripting then the time of day based on the
server may not match up with the user viewing it in real time.

So we make a new instance of the date, get the hours, and using if/else
statements we determine which greeting to render based on the hour of the day.
Then we return it via some JSX and Kablam! You have a customize time-based
greeting.

I really like how many of the new JavaScript frameworks encapusalate scripts
into components for specific use-cases. Another awesome library that does this
is StimulusJS, but let's finish up and
put the rest of the pieces together.

Import into index.js

# In ./frontend/javascript/index.js

import { renderGreeting } from "./components/Greeting"

window.addEventListener("DOMContentLoaded", () => {
  renderGreeting()
})

Just like last time we import the function from the component and wait/listen
for the DOM to finish loading the content so we have somewhere to render the
greeting.