Authored in connection with the Write With Fauna program.

Table of Contents

• Authentication
• Setting up Fauna in Next.js
  • Installing Fauna
  • Setting up Migrations Tool
• Authentication and Authorization in Fauna
  • Next.js Serverless Function Setup for Fauna
• NextAuth
• Requirements and Features
• Modelling the data
  • Goals
  • Goal Participants
  • Goal Updates
  • Update Likes
  • Update Comments
  • Comment Likes
  • Activities
  • Notifications
  • Notification Statuses
  • User Followers
  • Users
• Conclusion

I have recently built a website for our local developer community Coderplex completely Serverless. We were able to start from scratch and got it launched within just 3 weeks of time. In this article, I will show what the website is about, how I built it, and also show the areas of improvement and the new features that we are planning to add to it.

The website is basically a platform like Twitter where you post updates. The only difference is that it's aimed towards developers(has things like markdown editor), and it's goal-centric. As soon as the users log in to the site, they will be prompted to set their goal. You will be asked to set a title for the goal, write the plan of action of how you want to achieve that goal, and finally, you will be asked to set a deadline, before which you intend to achieve that goal. After that, you will be allowed to post updates whenever you want, showing what you are doing in order to reach that goal.

Authentication

We only have one mode of authentication i.e., through GitHub login. We are using next-auth package for this.

Check out the following blog post which I published a few weeks ago to know more about setting up GitHub authentication using next-auth.

3 Simple Steps To Setup Authentication in Next.js

Setting up Fauna in Next.js

Installing Fauna

Before we go through other features of coderplex.org, let's see how I have set up my Fauna in Next.js and how my Fauna workflow is.

Install faunadb (javascript driver for Fauna DB) as a dependency in your Next.js project

yarn add faunadb
# npm install faunadb

While developing locally, you have two choices:

1. You can either create a test database in the Fauna cloud directly.
2. You can set up the Fauna Dev Docker container locally.

I personally have set up the Docker container and have been using that for local development.

To know more about setting up the Fauna Dev container, go to the relevant section in the documentation.

To summarize, here is what I have done.

# Pull the latest Docker image of faunadb
docker pull fauna/faunadb:latest

# Verify if it installed correctly
docker run fauna/faunadb --help

# Run the Fauna Dev
docker run --rm --name faunadb -p 8443:8443 -p 8084:8084 fauna/faunadb

# After this, the Fauna Dev is started locally at port 8443

If you go through the documentation, you will see that there are so many ways to run the Fauna Dev. I chose the first approach because I want to start with a fresh state every time I start the database. In this approach, as soon as you stop the container, all the data will be erased, and whenever you start the container again, you will be starting with a fresh instance of Fauna.

Setting up Migrations Tool

If you come from a background of Laravel/Django/Rails/Node, you are most probably be aware of migrations. In simple terms, the migrations are the set of files. They help manage the changes in the database schema. The files are usually associated with timestamps of the time when the migrations are created. There will usually be a way to apply a migration or rollback(unapply) a migration. These are incremental steps that you need to perform to get the fresh database to the same state as the current database.

In Fauna, there is no native solution to achieve this. But very recently, an unofficial tool has been created by a developer advocate at Fauna. I have been using that tool for setting up migrations in my projects.

# Install the tool as a dev dependency
yarn add -D fauna-schema-migrate 

# If you use npm, run the following command to install it.
# npm install -D fauna-schema-migrate

# Initialize the folders and config needed for this tool
npx fauna-schema-migrate init

This will create some files and folders which we later use to set up migrations for the collections and indexes that we create. Go through the GitHub REAMDE to know more about this tool. To summarize, here's how it works.

1. You add all your collections, indexes, etc in your fauna/resources folder.
2. Based on the changes in the resources folder, you will be able to generate migrations. These migrations will get generated in your fauna/migrations folder.
3. You will have the ability to see the state of the database. You will be able to see what all migrations have been applied and what migrations are yet to be applied.
4. You will be able to apply the migrations or rollback the applied migrations.
5. While running any of these commands, you will be asked to enter the FAUNA ADMIN KEY.
   • You will be able to generate this key from the Security tab of the Fauna dashboard.
   • You can also set the environment variables FAUNA_ADMIN_KEY, FAUNADB_DOMAIN, FAUNADB_SCHEME, and FAUNADB_PORT.
   • While connecting to the cloud database, you will only need to set FAUNA_ADMIN_KEY.
   • If you are working with the Fauna Dev Docker container, you need to set up other variables too.
     • Since I am using Fauna Dev for local development, I have set up these as per my configuration.

export FAUNA_ADMIN_KEY=secret # This is the default secret for Fauna Dev
export FAUNADB_DOMAIN=localhost
export FAUNADB_SCHEME=http
export FAUNADB_PORT=8443

Authentication and Authorization in Fauna

Fauna has its own authentication system. But in this project, I have been using a next-auth adapter for authentication. Basically what this means is that I will handle all the authentication and authorization elsewhere(in the serverless functions of my app), and only allow the users to access the resources that they are authorized to access. Doing things this way is definitely not ideal. Fauna offers a very powerful security system out of the box. But it's a bit tricky to make it work with next-auth system. But I am definitely planning to make use of Fauna's security system in the future and will try to make it work with next-auth without losing any of the capabilities of Fauna.

Next.js Serverless Function Setup for Fauna

This is how all my serverless functions look like in my Next.js app

Fauna DB Client Setup

I use Docker container locally, and use Fauna Cloud when the app is in production

import faunadb from 'faunadb'

// Checking if the app is in production
const isProduction = process.env.NODE_ENV === 'production'

// Using Fauna Dev Docker container when running locally
// Using Fauna Cloud when in production
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SECRET ?? 'secret',
  scheme: isProduction ? 'https' : 'http',
  domain: isProduction ? 'db.fauna.com' : 'localhost',
  ...(isProduction ? {} : { port: 8443 }),
})

Requires Authentication

If it requires the user to be authenticated, then I use next-auth getSession function to check if the user is authenticated.

import { getSession } from 'next-auth/client'

const Handler = async (req, res) => {

    // If the user needs authentication
  const session = await getSession({ req })

  if (!session) {
    return res.status(401).json({ message: 'Not logged in (UnAuthenticated)' })
  }

    // other code
    // ...
    // ...
    // ...
}

export default Handler

Requires Authorization

If only a particular user is authorized to run this function, then I send the id of the authorized user in the request body, and manually check if the currently logged-in user is the same as that of the authorized user.

import { getSession } from 'next-auth/client'

const Handler = async (req, res) => {

    // If the user needs authentication
  const session = await getSession({ req })

  if (!session) {
    return res.status(401).json({ message: 'Not logged in (UnAuthenticated)' })
  }

  const { authorizedUserId } = req.body

  const loggedInUserId = session.user.id

  if (loggedInUserId !== authorizedUserId) {
    return res.status(403).json({ message: 'Access Forbidden' })
  }

    // other code
    // ...
    // ...
    // ...

}

export default Handler

Putting it all together, this is how a typical serverless function looks like in my nextjs app.

import { getSession } from 'next-auth/client'

import faunadb from 'faunadb'
const isProduction = process.env.NODE_ENV === 'production'
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SECRET ?? 'secret',
  scheme: isProduction ? 'https' : 'http',
  domain: isProduction ? 'db.fauna.com' : 'localhost',
  ...(isProduction ? {} : { port: 8443 }),
})
const q = faunadb.query

const Handler = async (req, res) => {

    // If the user needs authentication
  const session = await getSession({ req })
  if (!session) {
    return res.status(401).json({ message: 'Not logged in (UnAuthenticated)' })
  }

  const { authorizedUserId } = req.body

  const loggedInUserId = session.user.id

  if (loggedInUserId !== authorizedUserId) {
    return res.status(403).json({ message: 'Access Forbidden' })
  }

    try {
    const response: any = await client.query(
            q.Do(
                // Execute some fauna code here
            )
        )

        // Some code
        // ...
        // ...
        // ...
    res.status(200).json(response)
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: error.message })
  }  
}

export default Handler

NextAuth

We need a few collections and indexes to work with next-auth's Fauna adapter. So, let's add those in fauna/resources folder. I have created two directories inside the resources folder. One is for collections and another for indexes.

These are the collections that I need for the next-auth's Fauna adapter.

// fauna/resources/collections/accounts.fql
CreateCollection({ 
  name: 'accounts' 
})

// fauna/resources/collections/users.fql
CreateCollection({ 
  name: 'users' 
})

// fauna/resources/collections/sessions.fql
CreateCollection({ 
  name: 'sessions' 
})

// fauna/resources/collections/verification_requests.fql
CreateCollection({ 
  name: 'verification_requests' 
})

Each of the above FQL queries is in a different file inside the resources/collections folder.

We also need a few indexes for the next-auth's Fauna adapter.

// fauna/resources/indexes/account_by_provider_account_id.fql
CreateIndex({
  name: 'account_by_provider_account_id',
  source: Collection('accounts'),
  unique: true,
  terms: [
    { field: ['data', 'providerId'] },
    { field: ['data', 'providerAccountId'] },
  ],
})

// fauna/resources/indexes/session_by_token.fql
CreateIndex({
  name: 'session_by_token',
  source: Collection('sessions'),
  unique: true,
  terms: [{ field: ['data', 'sessionToken'] }],
})

// fauna/resources/indexes/user_by_email.fql
CreateIndex({
  name: 'user_by_email',
  source: Collection('users'),
  unique: true,
  terms: [{ field: ['data', 'email'] }],
})

// fauna/resources/indexes/verification_request_by_token.fql
CreateIndex({
  name: 'verification_request_by_token',
  source: Collection('verification_requests'),
  unique: true,
  terms: [{ field: ['data', 'token'] }],
})

// fauna/resources/indexes/user_by_username.fql
CreateIndex({
  name: 'user_by_username',
  source: Collection('users'),
  unique: true,
  terms: [{ field: ['data', 'username'] }],
})

Now we need to generate the corresponding migrations for these resources. To do that, you can just run npx fauna-schema-migrate generate. This will create a new folder in the fauna/migrations folder, inside which there are files for each of the resource files that we created. You can apply all of these migrations in one go by running npx fauna-schema-migrate apply all.

Now that we are all set up, let's start working on the actual features of the application.

Requirements and Features

In coderplex.org app, each user will be able to do all of the following things:

• Goals
  • Set a goal with title, description(goal plan – which also accepts MDX), and deadline.
  • Currently, only 1 user will correspond to 1 goal. In other words, each goal will have a single participant, but in the future, multiple users can participate in the same goal. So the schema should take care of that.
• Updates
  • Post an update to the goal
    • An update is very similar to a tweet that you have on Twitter. The only difference is that each update will correspond to a goal.
    • The update will also accept markdown(MDX).
  • Edit your update
  • Like any update
• Comments
  • Add a comment to an update (also accepts MDX)
  • Edit your comment.
  • Like any comment
• Follow any other user
• Notifications
  • Whenever another user likes your update/comment.
  • Whenever another user follows you.
  • Whenever another user comments on your update.
  • Users should see the unread notification count.
  • When they open the notifications, they should also be able to differentiate unread-notifications from read-notifications.
  • All the notifications should be marked as read, by the next time they open the notifications, and the notification count should be reset to 0.
• Users should be able to edit/add the details like their social media links, their name, etc.

These are the requirements and features that we have in coderplex.org app.

Modelling the data

These are the following collections that I have created.

• goals
• goal_participants
• goal_updates
• update_likes
• update_comments
• comment_likes
• activities
• notifications
• notification_statuses
• user_followers
• users

Goals

This is how an example goal will look like. Each goal will have a reference to the user who created the goal.

{
  "ref": Ref(Collection("goals"), "291155149010764290"),
  "ts": 1614490198607000,
  "data": {
    "createdBy": Ref(Collection("users"), "291151577246335494"),
    "title": "Learn NextJS",
    "description": "I will go through the following resources......",
    "timestamps": {
      "createdAt": Time("2021-02-21T16:47:17.542336Z"),
      "updatedAt": Time("2021-02-28T05:29:58.485254Z")
    },
    "deadline": Time("2021-03-12T00:00:00Z")
  }
}

Goal Participants

Currently, the user who created a goal will be the only participant of the goal. But even if there are multiple participants of a goal, it will just be another new document in this collection. Each document of this collection will have a reference to the goal and also to the user collections.

{
  "ref": Ref(Collection("goal_participants"), "291155149149176322"),
  "ts": 1613926037910000,
  "data": {
    "goal": Ref(Collection("goals"), "291155149010764290"),
    "participant": Ref(Collection("users"), "291151577246335494"),
    "timestamps": {
      "createdAt": Time("2021-02-21T16:47:17.542336Z"),
      "updatedAt": Time("2021-02-21T16:47:17.542336Z")
    }
  }
}

Goal Updates

Each goal update will have reference to the goal to which this update belongs to, and also to the user who is posting this update.

{
  "ref": Ref(Collection("goal_updates"), "291156218380026372"),
  "ts": 1613927057530000,
  "data": {
    "goal": Ref(Collection("goals"), "291155149010764290"),
    "postedBy": Ref(Collection("users"), "291151577246335494"),
    "description": "Finished the \"Create a Next.js App\" section from the NextJS basics tutorial ",
    "timestamps": {
      "createdAt": Time("2021-02-21T17:04:17.345236Z"),
      "updatedAt": Time("2021-02-21T17:04:17.345236Z")
    }
  }
}

Update Likes

Each document of this collection will have a reference to the user who performed this action and also to the update on which this action is performed on. Here the action is either like or unlike. Whenever a user likes an update for the first time, a new document is created in this collection, with liked set to true. Whenever the user unlikes an update, since the document is already created, we would just toggle the liked to false. Similarly, when the user likes the update for the second time after unliking, instead of creating a new document, liked is again set back to true.

{
  "ref": Ref(Collection("update_likes"), "291156291484647936"),
  "ts": 1613927127890000,
  "data": {
    "user": Ref(Collection("users"), "291150570318725632"),
    "update": Ref(Collection("goal_updates"), "291156254585258502"),
    "liked": true,
    "timestamps": {
      "createdAt": Time("2021-02-21T17:05:26.235891Z"),
      "updatedAt": Time("2021-02-21T17:05:26.235891Z")
    }
  }
}

Update Comments

Each document in this collection will have reference to the user who posted this comment and also to the update under which this comment is posted.

{
  "ref": Ref(Collection("update_comments"), "291226260758069760"),
  "ts": 1613993855415000,
  "data": {
    "postedBy": Ref(Collection("users"), "291151577246335494"),
    "update": Ref(Collection("goal_updates"), "291226189279789572"),
    "description": "Nice job! ",
    "timestamps": {
      "createdAt": Time("2021-02-22T11:37:34.940974Z"),
      "updatedAt": Time("2021-02-22T11:37:34.940974Z")
    }
  }
}

Comment Likes

A comment like is very similar to update_like, the only difference is that the user is liking/unliking a comment instead of an update.

{
  "ref": Ref(Collection("comment_likes"), "291748514516435458"),
  "ts": 1614491916980000,
  "data": {
    "user": Ref(Collection("users"), "291196688254632454"),
    "comment": Ref(Collection("update_comments"), "291748498072666628"),
    "liked": false,
    "timestamps": {
      "createdAt": Time("2021-02-28T05:58:34.974710Z"),
      "updatedAt": Time("2021-02-28T05:58:36.839458Z")
    }
  }
}

Activities

Whenever an activity is performed, a new document will be created in this collection. An activity can be LIKED_UPDATE, UNLIKED_UPDATE, LIKED_COMMENT, UNIKED_COMMENT, COMMENTED, FOLLOWED, UNFOLLOWED. Each document in this collection will have a reference to the user who performed this activity and also to the resource, which has been added/changes as a result of this activity. For example, if the activity is LIKED_UPDATE, then the resource is from the update_likes collection because that is where we are storing the likes of the updates.

{
  "ref": Ref(Collection("activities"), "291746021461983744"),
  "ts": 1614489537610000,
  "data": {
    "user": Ref(Collection("users"), "291151577246335494"),
    "resource": Ref(Collection("update_likes"), "291701773249282560"),
    "type": "LIKED_UPDATE",
    "timestamps": {
      "createdAt": Time("2021-02-28T05:18:57.449934Z"),
      "updatedAt": Time("2021-02-28T05:18:57.449934Z")
    }
  }
}

Notifications

This is the place where we store the notifications. Each document in this collection will have a reference to the user to which this notification should be shown. It will also have a reference to the activity based on which this notification is created. We will not create notifications for all the activities. For example, if one user unfollowed another user, we don't want to show that notification. So we only create notifications for some of the activities.

{
  "ref": Ref(Collection("notifications"), "291746542632567300"),
  "ts": 1614490034620000,
  "data": {
    "user": Ref(Collection("users"), "291299459214606850"),
    "activity": Ref(Collection("activities"), "291746542630470148"),
    "timestamps": {
      "createdAt": Time("2021-02-28T05:27:14.492640Z"),
      "updatedAt": Time("2021-02-28T05:27:14.492640Z")
    }
  }
}

Notification Statuses

In this collection, we store the number of notifications read by the user. Each document in this collection will have a reference to the user. This is how we will know how many unread notifications are present for a user. For example, if we have a total of 60 notifications for a user, and in notification_statuses collection, the same user has count as 58, then we know that the user has 2 new notifications, and we show the recent two notifications as unread in the UI.

{
  "ref": Ref(Collection("notification_statuses"), "291746117445485062"),
  "ts": 1615246280027000,
  "data": {
    "user": Ref(Collection("users"), "291150570318725632"),
    "count": 58,
    "timestamps": {
      "createdAt": Time("2021-02-28T05:20:28.984137Z"),
      "updatedAt": Time("2021-03-08T23:31:19.808558Z")
    }
  }
}

User Followers

This collection is very similar to the update_likes collection. Instead of liked, here you will have isFollowing. This will also have references to the user who is being followed, and also the user who is following the other user.

{
  "ref": Ref(Collection("user_followers"), "291151670793994758"),
  "ts": 1614489819630000,
  "data": {
    "user": Ref(Collection("users"), "291151577246335494"),
    "follower": Ref(Collection("users"), "291150570318725632"),
    "isFollowing": true,
    "timestamps": {
      "createdAt": Time("2021-02-21T15:52:00.472819Z"),
      "updatedAt": Time("2021-02-28T05:23:39.192197Z")
    }
  }
}

Users

This is an example document in users collection.

{
  "ref": Ref(Collection("users"), "292150540328725632"),
  "ts": 1613940787978000,
  "data": {
    "email": "pbteja1998@gmail.com",
    "image": "https://avatars.githubusercontent.com/u/17903466?v=4",
    "account": {
      "firstName": "Bhanu Teja",
      "lastName": "Pachipulusu",
      "bio": "Software Engineer"
    },
    "socials": {
      "github": "pbteja1998",
      "twitter": "pbteja1998",
      "blog": "https://bhanuteja.dev/",
      "facebook": "pbteja1998",
      "linkedin": "pbteja1998",
      "codepen": "pbteja1998",
      "discord": "BhanuTeja#4468"
    },
    "otherDetails": {
      "company": "Coderplex",
      "userType": "yes",
      "mobile": "9876543210",
      "isCurrentlyWorking": "yes"
    },
    "username": "pbteja1998",
    "timestamps": {
      "createdAt": Time("2021-02-21T15:34:30.938680Z"),
      "updatedAt": Time("2021-02-21T20:53:07.848454Z")
    },
    "loggedInFromCoderplexOrg": true
  }
}

Conclusion

In this blog post, I have tried to explain how I use Fauna DB in my Next.js applications. I also showed how I modeled the data for the application. In the next blog post, I would write about different parts of the home page of the application, and also the queries to fetch the data required to show everything that is there on the home page.

I wrote 27 technical articles so far. Most of them are about frontend web development.

A thread 🧵 about each of these articles including the stats below 👇

This started as a Twitter thread. But it became so long that I decided to turn it into a blog post.

𝗔𝘂𝗴 𝟭𝟭, 𝟮𝟬𝟮𝟬 - 𝗔𝗱𝗱 𝗧𝘆𝗽𝗲𝘀𝗰𝗿𝗶𝗽𝘁 𝘁𝗼 𝘆𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 (𝟭/𝟮𝟳)

It was when I just started learning React and started exploring Next.js and TypeScript. I was surprised to see how easy it was to add TypeScript to a Next.js project...

I thought to write a blog post about it to show it to others - more importantly for me to refer back to it when needed. I didn't want to spend time creating a blog. I wanted to start blogging right away...

Fortunately, I heard about @hashnode from a friend of mine and decided to give it a try. The selling factor for me about @hashnode was the ability to bring my own domain for my blog and the automatic backup of the articles on my own GitHub repo...

At that time, I didn't know that I was gonna write more than 1 article or that even anyone would wanna read the things that I write. But regardless, I went ahead and published my first article.

On the first day, the article has got around 20 views...

My main motive for writing articles was that they would act as a journal for whatever I was learning - so that I can get back to those when in need. So, I was more than happy with even 20 people reading it...

This is that article.

As you can see, it's a very short article with a bunch of screenshots pasted together...

At the time of writing this tweet, this article has got about 𝟮𝟴𝟱 views. I myself have referred to it many times.

I decided to write even more articles at that time. And then my journey of tech blogging took off...

𝗔𝘂𝗴 𝟭𝟮, 𝟮𝟬𝟮𝟬 - 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗲 𝗬𝗼𝘂𝗿 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗙𝗼𝗿 𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮 𝗣𝗹𝗮𝘁𝗳𝗼𝗿𝗺𝘀 (𝟮/𝟮𝟳)

I was developing a website at that time. I noticed that when my website link is shared on platforms like Twitter...

I don't see any previews that I usually get when I share other links. I started exploring more about this and found out about meta tags and open graph protocol and also how some of the platforms like Twitter look for their own custom meta tags...

I decided to write an article about my findings and how/what meta tags to add to the website to make the platforms show nice previews for the website links that are being shared. I also added the tools that you can use to validate these tags in the article...

The result of this is the following article.

At the time of writing this tweet, this article has got around 𝟮𝟵𝟰 views...

𝗔𝘂𝗴 𝟭𝟱, 𝟮𝟬𝟮𝟬 - 𝗖𝗿𝗲𝗮𝘁𝗲 𝗖𝘂𝘀𝘁𝗼𝗺 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 𝗣𝗮𝗿𝘀𝗲𝗿 (𝟯/𝟮𝟳)

I decided to write my first ever tutorial on how to create a markdown editor with the ability to embed YouTube videos, code sandboxes, code pens, etc...

I didn't know about MDX back then. That is a story for another time. In the markdown I know, it is not directly possible to embed things like YouTube videos and other things. But in one of my projects, I had this requirement...

So it seemed like a good tutorial that will be helpful to others and of-course as a reference to me in the future. I decided to split this into two articles. In hindsight, this was a mistake. I should have just written the article in a single go...

The first article in this two-part series is the following article.

At the time of writing this tweet, this article has got around 𝟱𝟮𝟭 views.

𝗔𝘂𝗴 𝟭𝟲, 𝟮𝟬𝟮𝟬 - 𝗛𝗼𝘄 𝘁𝗼 𝗜𝗺𝗽𝗼𝗿𝘁 𝗦𝗩𝗚𝘀 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗣𝗿𝗼𝗷𝗲𝗰𝘁? (𝟰/𝟮𝟳)

This is the article that has got the most organic views from Google among all the other articles that I ever wrote until today...

Like all my other articles, this article came out of my need. I got a use-case where I had to use and import SVGs into my Next.js project. I searched around and found many solutions. Two solutions stood out for me - SVGR and babel-plugin-inline-react-svg...

I found the babel plugin to be easier to use and ended up using it. I then wrote about it in the following article detailing how people can use it in their own projects.

Up until today...

This article has been getting at least around 10 organic views for this article from Google every single day since then.

At the time of writing this tweet, the article has around 2.2K views...

𝗔𝘂𝗴 𝟭𝟲, 𝟮𝟬𝟮𝟬 - 𝗖𝗿𝗲𝗮𝘁𝗲 𝗡𝗲𝘄 𝗖𝗼𝗱𝗲𝗣𝗲𝗻𝘀 𝗮𝗻𝗱 𝗖𝗼𝗱𝗲𝗦𝗮𝗻𝗱𝗯𝗼𝘅𝗲𝘀 𝗜𝗻𝘀𝘁𝗮𝗻𝘁𝗹𝘆 𝗪𝗶𝘁𝗵 𝗭𝗘𝗥𝗢 𝗰𝗹𝗶𝗰𝗸𝘀 (𝟱/𝟮𝟳)

This is a very short article that I wrote when I found out that CodePen and CodeSandbox launched short URLs...

...that can be used to set up sandboxes with your favorite framework configured. For example, to create a sandbox with Reactjs, you can just go to react.new and you are done. I decided to list down all such URLs in a blog post.

The result is the following very short article...

At the time of writing this tweet, this article has got around 𝟭𝟭𝟰 views.

𝗔𝘂𝗴 𝟭𝟴, 𝟮𝟬𝟮𝟬 - 𝗣𝗿𝗲𝘃𝗲𝗻𝘁 𝗥𝗲𝘃𝗲𝗿𝘀𝗲 𝗧𝗮𝗯𝗻𝗮𝗯𝗯𝗶𝗻𝗴 𝗔𝘁𝘁𝗮𝗰𝗸𝘀 𝗪𝗶𝘁𝗵 𝗣𝗿𝗼𝗽𝗲𝗿 𝗻𝗼𝗼𝗽𝗲𝗻𝗲𝗿, 𝗻𝗼𝗿𝗲𝗳𝗲𝗿𝗿𝗲𝗿, 𝗮𝗻𝗱 𝗻𝗼𝗳𝗼𝗹𝗹𝗼𝘄 𝗔𝘁𝘁𝗿𝗶𝗯𝘂𝘁𝗶𝗼𝗻 - (𝟲/𝟮𝟳)

This article came out of my search for the meaning of 'rel' attribute for anchor <a> tags. Turns out that there is a security risk for not adding noopener/noreferrer value to 'rel' attribute when you set the link to open in a new tab...

I ended up writing the article about the same detailing what each of the values noopener, noreferrer, nofollow mean and when should you use each of them. I recently cross-posted this article to HackerNoon...

To my surprise, it is marked as a #hackernoon-top-story which I think is pretty amazing.

At the time of writing this tweet, this has got around 𝟭.𝟲𝗞 views

HackerNoon link of the same article.

At the time of writing this tweet, this has got around 𝟰𝟬𝟳 views on HackerNoon...

𝗔𝘂𝗴 𝟮𝟬, 𝟮𝟬𝟮𝟬 - 𝗕𝗮𝗯𝗲𝗹 𝗣𝗹𝘂𝗴𝗶𝗻 𝗧𝗼 𝗥𝗲𝗺𝗼𝘃𝗲 𝗖𝗼𝗻𝘀𝗼𝗹𝗲 𝗟𝗼𝗴𝘀 𝗜𝗻 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 (𝟳/𝟮𝟳)

I always find myself leaving console logs in production which I should not...

I started looking for a solution to this problem and found a babel plugin that you can use to remove console logs automatically when deployed to production. I ended up writing a very short article detailing how to use this plugin...

At the time of writing this tweet, this article has got around 𝟭𝟰𝟳 views...

𝗔𝘂𝗴 𝟮𝟯, 𝟮𝟬𝟮𝟬 - 𝗘𝗺𝗯𝗲𝗱 𝗬𝗼𝘂𝘁𝘂𝗯𝗲 𝗩𝗶𝗱𝗲𝗼𝘀 𝗶𝗻𝘁𝗼 𝗬𝗼𝘂𝗿 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 𝗘𝗱𝗶𝘁𝗼𝗿 (𝟴/𝟮𝟳)

Remember the 3rd article where I started a 2-part tutorial series about creating a custom markdown editor...

...this is the other part. I wrote this after writing 4 other completely unrelated articles. I should have written both of these in a single article or I should have written this immediately after the first one...

At the time of writing this tweet, this article has got around 𝟭𝟯𝟭 views.

𝗔𝘂𝗴 𝟮𝟲, 𝟮𝟬𝟮𝟬 - 𝗧𝗜𝗟: 𝗛𝘆𝗽𝗵𝗲𝗻𝗮𝘁𝗲 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝗷𝘂𝘀𝘁𝗶𝗳𝘆 𝘁𝗲𝘅𝘁 (𝟵/𝟮𝟳)

This article is the first and the last 😅article in which I wrote something new that I learned that day.

This article is about the CSS property hyphens which I did not know about then.

At the time of writing this tweet, this article has got around 𝟭𝟬𝟰 views.

𝗔𝘂𝗴 𝟮𝟴, 𝟮𝟬𝟮𝟬 - 𝗪𝗵𝘆 𝘆𝗼𝘂 𝘀𝗵𝗼𝘂𝗹𝗱 𝘀𝘁𝗮𝗿𝘁 𝘂𝘀𝗶𝗻𝗴 𝗛𝗦𝗟 𝗰𝗼𝗹𝗼𝗿 𝗳𝗼𝗿𝗺𝗮𝘁 (𝟭𝟬/𝟮𝟳)

This is the article on which I have spent a huge amount of time to write among all of the previous 9 articles that I have written until then.

This article is about the HSL color format and why I think more people should start using it. I found the HSL color system to be more intuitive and closer to how humans perceive color. I wrote about what each of H, S and L mean in HSL...

...and how easy it is to create color schemes like Complementary Colors, Split Complementary Colors, Different shades of the same color using HSL color system.

At the time of writing this tweet, this article has got around 𝟲𝟭𝟬 views.

𝗔𝘂𝗴 𝟮𝟵, 𝟮𝟬𝟮𝟬 - 𝗖𝗿𝗲𝗮𝘁𝗲 𝗬𝗼𝘂𝗿 𝗢𝘄𝗻 𝗦𝘂𝗽𝗲𝗿 𝗦𝗶𝗺𝗽𝗹𝗲 𝗨𝗥𝗟 𝗦𝗵𝗼𝗿𝘁𝗲𝗻𝗲𝗿 (𝟭𝟭/𝟮𝟳)

This blog post came out when I came across the following quoted tweet from @kentcdodds

The tweet contains a link to a youtube video where he explained about the npm package that he made which can be used to create a super simple URL shortener. I found the concept behind it to be genius. They are making use of Netlify Redirects to create a URL shortener...

My immediate reaction was that why didn't I think of that. Nevertheless, I ended up using the same package to create my own URL shortener to shorten many of my links. I ended up writing an article about the same, hoping that more people would benefit from this package.

At the time of writing this tweet, this article has got around 𝟱𝟳𝟯 views.

This was the final article in the month of August...

I wrote a total of 11 articles in that month, a feat which I am never going to repeat. I had no schedule when I was writing these articles. I wrote and published articles whenever I felt like it - which was a mistake on my part.

I eventually figured out that consistency is far more important than writing a lot of articles at once. Eventually, I stuck to the schedule of writing 2 articles per week which helped me a lot more than writing whenever I felt like it.

It is a lot better to write a single article every two weeks than writing 10 articles in a week and then not writing anything for more than a month or two.

I now strongly believe that Consistency is the key to get things done or to get better in anything including writing.

𝗦𝗲𝗽 𝟮, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 (𝟭𝟮/𝟮𝟳)

I just found out about EpicReact.Dev workshops by @kentcdodds just then. I found that the source code of these workshops is open source...

I decided to go through them on my own before the course is actually released. This article is a result of that. I went through the React Fundamentals workshop and wrote about what I learned in my own words -- mainly to reinforce what I learned....

It was then I decided to buy #EpicReactDev as soon as it gets released. And I did just that later.

This is the article which I wrote.

At the time of writing this tweet, this article has got around 1.6K views...

In the following days, I got covid and decided to take a break from everything.

After about a month later, EpicReact.Dev got released and I immediately bought it. It was the best decision ever...

𝗢𝗰𝘁 𝟱, 𝟮𝟬𝟮𝟬 - 𝗠𝘆 𝗥𝗲𝘃𝗶𝗲𝘄 𝗼𝗳 𝗞𝗲𝗻𝘁 𝗖. 𝗗𝗼𝗱𝗱𝘀'𝘀 𝗘𝗽𝗶𝗰𝗥𝗲𝗮𝗰𝘁.𝗗𝗲𝘃: 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 (𝟭𝟯/𝟮𝟳)

I publicly committed to writing articles based on what I learned in #EpicReactDev workshops. This article is a result of that...

This has nothing more than the topics that will be covered in #EpicReactDev workshops. I have learned so much more from watching the videos than I did when I went through the open-source material on my own...

So many people messaged me saying that they want to buy this license, but wanted to know if it was worth it. My answer is always a huge YES. It definitely is. Many people started following along with what I wrote about these workshops and...

...many told me that they found these articles to be very helpful.

This 👇 is the first article when I publicly committed to it.

At the time of writing this tweet, this article has got around 2K views...

𝗢𝗰𝘁 𝟴, 𝟮𝟬𝟮𝟬 - 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗬𝗼𝘂 𝗡𝗲𝗲𝗱 𝗧𝗼 𝗞𝗻𝗼𝘄 𝗙𝗼𝗿 𝗥𝗲𝗮𝗰𝘁 (𝟭𝟰/𝟮𝟳)

Before writing about the #EpicReactDev workshops, I wanted to write about Javascript concepts that I wish I had learned before starting to learn Reactjs...

This was the longest article and most read article that I have ever written. It even got featured on @hashnode

At the time of writing this tweet, this article has got around 6.9K views.

More than the views, I got personal messages from people thanking me for writing this. It felt really good 🙂

𝗢𝗰𝘁 𝟭𝟬, 𝟮𝟬𝟮𝟬 - 𝗛𝗼𝘄 𝗜 𝗚𝗮𝘃𝗲 𝗔 𝗠𝗼𝗱𝗲𝗿𝗻 𝗟𝗼𝗼𝗸 𝗙𝗼𝗿 𝗛𝗮𝗰𝗸𝗲𝗿𝗡𝗲𝘄𝘀 𝗙𝗲𝗲𝗱 (𝟭𝟱/𝟮𝟳)

I took a very long break from coding the previous month. To get back to it, I decided to make a few fun projects.

For funsies, I tried to redesign the HackerNews website and this article is a result of that in which I showed the demo of the redesigned website.

I am attaching a few screenshots of the website.

At the time of writing this tweet, this article has got around 4.6K views.

𝗢𝗰𝘁 𝟭𝟮, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: 𝗜𝗻𝘁𝗿𝗼 𝘁𝗼 𝗥𝗲𝗮𝗰𝘁 𝗥𝗮𝘄 𝗔𝗣𝗜𝘀 (𝟭𝟲/𝟮𝟳)

This was the "first" article in the series of articles based on #EpicReactDev.

In this article, I wrote about raw React APIs like React.createElement() and ReactDOM.render() methods.

At the time of writing this tweet, this article has got around 1.2K views.

𝗢𝗰𝘁 𝟭𝟱, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗝𝗦𝗫 (𝟭𝟳/𝟮𝟳)

This was the second article of the series. In this, I wrote about JSX - what is it, how to use it, how to add props to JSX elements.

I also wrote about interpolation in JSX and spreading props. The outline of this article is mostly based on the React Fundamentals workshop of #EpicReactDev.

This has got around 716 views.

𝗢𝗰𝘁 𝟭𝟳, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝘃𝗮𝗺𝗽𝗲𝗱 𝗚𝗶𝘁𝗛𝘂𝗯 𝗝𝗼𝗯𝘀 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗨𝘀𝗶𝗻𝗴 𝗗𝗲𝘀𝗶𝗴𝗻 𝗙𝗿𝗼𝗺 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗠𝗲𝗻𝘁𝗼𝗿 (𝟭𝟴/𝟮𝟳)

I decided to do a @frontendmentor challenge and I wanted to choose a challenge that requires using some sort of APIs.

I chose GitHub jobs clone website and this article is a result of that showcasing the demo of that.

The design also has a dark theme which I wanted to try.

I used Next.js, Tailwind CSS, React Query to make this site. At the time of writing this tweet, this article has got around 2.9K views and it also got featured on @dailydotdev

This was the first-ever site in which I used Tailwind CSS and React Query...

Needless to say, I never went back. These two became my most favorite tools/packages after Next.js. I decided to include these in all of my future projects.

I even made myself a boilerplate template with all of these pre-configured - which later became an open-source repo.

𝗢𝗰𝘁 𝟭𝟵, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: 𝗖𝗿𝗲𝗮𝘁𝗶𝗻𝗴 𝗖𝘂𝘀𝘁𝗼𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 (𝟭𝟵/𝟮𝟳)

This article is again a part of my review of EpicReactDev workshops. In this, I wrote about creating components, prop-types, React Fragments, etc...

At the time of writing this tweet, this article has got around 375 views.

𝗢𝗰𝘁 𝟮𝟮, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: 𝗦𝘁𝘆𝗹𝗶𝗻𝗴 𝗔𝗻𝗱 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗙𝗼𝗿𝗺𝘀 (𝟮𝟬/𝟮𝟳)

In this article, I wrote about basic styling methods and also about handling forms in React.

At the time of writing this tweet, this article has got around 421 views.

𝗢𝗰𝘁 𝟮𝟲, 𝟮𝟬𝟮𝟬 - 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀: 𝗠𝗮𝗻𝗮𝗴𝗶𝗻𝗴 𝗦𝘁𝗮𝘁𝗲 𝗪𝗶𝘁𝗵 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗛𝗼𝗼𝗸 (𝟮𝟭/𝟮𝟳)

This article is about useState hook in React. I wrote about what it is, and how to use it. I also wrote about Functional Updates in useState...

... and when it can be useful. I finally ended the article by explaining about Lazy Initialization and also using this with objects.

At the time of writing this tweet, this has got around 358 views.

𝗢𝗰𝘁 𝟮𝟵, 𝟮𝟬𝟮𝟬 - 𝗛𝗼𝘄 𝘁𝗼 𝗖𝗿𝗲𝗮𝘁𝗲 𝗮 𝗥𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗟𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲 𝗛𝗼𝗼𝗸 (𝟮𝟮/𝟮𝟳)

This article is about creating a reusable local storage hook that syncs the state to local storage automatically. I saw this example in the #EpicReactDev

I usually use use-persisted-state package for my projects for this purpose because of some of the features that the package has. Nevertheless, it was good to explore how to make a custom one when required.

At the time of writing this tweet, this article has got around 1.3K views.

That's it for October. In that month, I wrote a total of 10 articles - at least 2 every week.

𝗡𝗼𝘃 𝟮, 𝟮𝟬𝟮𝟬 - 𝗘𝗮𝘀𝗶𝗹𝘆 𝗗𝗲𝘁𝗲𝗰𝘁 𝗢𝘂𝘁𝘀𝗶𝗱𝗲 𝗖𝗹𝗶𝗰𝗸 𝗨𝘀𝗶𝗻𝗴 𝘂𝘀𝗲𝗥𝗲𝗳 𝗛𝗼𝗼𝗸 (𝟮𝟯/𝟮𝟳)

I was doing a project in which I had to close the modal/dialog whenever I clicked at any place outside of it. I made a custom hook for this using useRef...

In this article, I wrote about the same explaining the process which I took to make this hook.

At the time of writing this tweet, this article has got around 1.3K views.

𝗡𝗼𝘃 𝟱, 𝟮𝟬𝟮𝟬 - 𝟯 𝗦𝗶𝗺𝗽𝗹𝗲 𝗦𝘁𝗲𝗽𝘀 𝗧𝗼 𝗦𝗲𝘁𝘂𝗽 𝗔𝘂𝘁𝗵𝗲𝗻𝘁𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 (𝟮𝟰/𝟮𝟳)

In all of my previous Next.js projects, I have set up my own authentication in a custom Node backend. I know that I could use services like Auth0...

... but it was too expensive for me after a couple of users. Hence I decided to make my own. @benawad 's YouTube videos helped me a lot in this regard.

This is the video that I referred to.

It was then, I discovered an open-source package called NextAuth.js which made it super simple to set up authentication in Next.js projects. I immediately tried it and it was so easy to set up. It also has providers for most of the OAuth providers like Google, GitHub, etc.

It even has a provider for setting up password-less login. You can also bring your own database.

The following article came as a result of this -- showing how easy it is to set up auth in Next.js

At the time of writing this tweet, this article has got around 880 views.

𝗡𝗼𝘃 𝟭𝟬, 𝟮𝟬𝟮𝟬 - 𝗧𝗵𝗲 𝗟𝗶𝗳𝗲𝗰𝘆𝗰𝗹𝗲 𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 (𝟮𝟱/𝟮𝟳)

This is again something that I learned from #EpicReactDev workshops.

In this article, I wrote about the life cycle of useEffect hooks in functional components. It was a little difficult for me to get the hang of useEffect hook when I was learning it for the first time. This video from #EpicReactDev workshops made it so simple.

At the time of writing this tweet, this article has got around 2.3K views. I myself have referred to this article a countless number of times. I am very glad that I wrote this.

𝗡𝗼𝘃 𝟭𝟯, 𝟮𝟬𝟮𝟬 - 𝟯𝟬+ 𝗚𝗶𝘁 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀 𝗧𝗵𝗮𝘁 𝗜 𝗙𝗿𝗲𝗾𝘂𝗲𝗻𝘁𝗹𝘆 𝗨𝘀𝗲 (𝟮𝟲/𝟮𝟳)

This is the article that took the least effort to write. In this article, I have just listed down the most frequent Git commands that I use in my daily workflow.

This article also got featured in @hashnode 's Become A Better Dev In 2021 e-book. If you haven't checked it out, check out that ebook. It's really good.

At the time of writing this tweet, this article has got around 4K views - which is surprising considering the amount of time that I spent writing it.

𝗡𝗼𝘃 𝟮𝟭, 𝟮𝟬𝟮𝟬 - 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗦𝘁𝗮𝗿𝘁𝗲𝗿 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗪𝗶𝘁𝗵 𝗔𝘂𝘁𝗵𝗲𝗻𝘁𝗶𝗰𝗮𝘁𝗶𝗼𝗻 + 𝗥𝗲𝗮𝗰𝘁 𝟭𝟳 + 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁 + 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦 𝟮 + 𝗘𝗦𝗟𝗶𝗻𝘁 (𝟮𝟳/𝟮𝟳)

This is the final article of the month of November and the year 2020.

I created a Next.js starter template with things like Authentication, TypeScript, Tailwind CSS, ESLint, Prettier, React Query, Prisma with Postgres pre-configured. I made it open-source and wrote an article on how to deploy it to Vercel.

This article also got featured on @dailydotdev

At the time of writing this tweet, this article has got around 3.7K views.

Right now, the repo just crossed 150 stars on GitHub and has been forked 16 times.

Link to the GitHub Repo:

Link to the live demo:

I recently discovered Fauna DB and I liked it very much. This also has a generous free tier to it. I have replaced Prisma + Postgres with Fauna DB in this template since then.

I haven't written any article in the month of December 2020 due to my other commitments. Hopefully, I will get back to it soon from 2021.

I have attached the stats of all the articles that I have written in 2020.

I have a total of around 48K page views until now. I never thought that anyone would be interested in reading what I write. But unless you try, you never know. The worst thing that can happen is you end up getting good at writing and reinforce the concepts that you write.

Audience Overview

Acquisition Overview

Behaviour Overview

This wouldn't have been possible without @hashnode and I have nothing but gratitude towards them.

If you are a developer and you don't have a blog yet. There is no time better than now to start a blog and write down your thoughts...

I don't assume anyone reading this very long thread completely. But if you did, you are a legend. Hopefully, this thread inspires at least one person to start blogging 🤞

If you have any questions that you want to ask, my DMs are always open.

In this article, I will show you how to use the starter template that I made and deploy it with Vercel. I will also be connecting a Postgres database which I will create on Heroku.

What all does this starter template has?

• Next.js/React 17
• TypeScript
• Tailwind CSS 2
• React Query
• React Query Dev Tools
• Prisma 2
• GitHub Auth
• Email + Passwordless Auth
• Postgres
• ESLint
• Prettier
• Husky

If this is the tech stack that you are interested in, then follow along.

• Github Repo
• Live Demo

1. Use Template

Go to pbteja1998/nextjs-starter repo and click on Use this template button.

2. Create Repo

Follow the instructions and create your repo

3. Deploy to Vercel

3.1. Import Project

Login to vercel and click on Import Project.

3.2. Import Git Repo

Let's import from Git Repository

3.3.

Enter the URL of the repo that you created earlier and Continue.

3.4. Create Vercel Project

Choose the name of the project and Deploy. We will be adding the required environment variables later.

3.5. Successful Deployment

You should see this once deployed. Open the dashboard after a successful deployment.

3.6. Dashboard

That's it. Your Next.js starter application has been deployed to Vercel. You can click on Visit to open the website.

3.7. Web Application Demo

You should see something like this. This home page template is taken from one of the examples in tailwindcss.com

4. Create a database

We need a database to store users and user sessions. I will be using the Postgres database. But you can use whatever you want. If you already have a URL for your database, you can skip this step. I will be using Heroku to create a Postgres database.

4.1. Create a new Heroku app

4.2. Go to Resources Tab and add Heroku Postgres addon

4.3.

Heroku Postgres has a free tier available. I will be using that for the demonstration.

4.4. You now have a new Postgres DB created. Click on the addon to open the database dashboard

4.5. View Credentials

Click on Settings and then View Credentials.

4.6. Copy Database URI

You should be able to see the database URI now. Copy that we will be using it later. Also, note that the free tier Heroku database credentials are not permanent. They change periodically. So, when you are deploying for production, use some other database that is stable or upgrade your Heroku database to a paid plan.

5. Setup Environment Variables

5.1. Open Env Vars dashboard in your newly created Vercel project

5.2. Add DATABASE_URL

Create a new secret

Save environment variable

Create NEXTAUTH_URL variable

This is the URL of the deployment.

Similarly, create all the variables that you can see in .env.example file of the repo.

• SECRET
  • Some random string
• SMTP_HOST
  • SMTP host to send emails from. Example: smtp.zoho.com
• SMTP_PORT
  • Your SMTP port. Example: 465
• SMTP_USER
  • Your SMTP user. Example: bhanuteja@mycompany.org
• SMTP_PASSWORD
  • Your email/SMTP password.
• SMTP_FROM
  • Email address from where you want your emails to come from.
• GITHUB_ID
  • Your Github OAuth App ID
• GITHUB_SECRET
  • Your Github OAuth App Secret

You can follow the steps described here to create a GitHub OAuth application. While creating that OAuth app, add https://<vercel-deployment-url>/api/auth as Authorization callback URL. For example, in my case, I will add https://nextjs-starter-kit-psi.vercel.app/api/auth The rest of the fields, you can fill with anything.

After adding all the environment variables, you need to redeploy the application for the changes to take effect.

Now, your new deployment will have GitHub authentication and passwordless login with email.

I will also make a slim version of the starter kit in the future which will not require any database setup.

If you have any suggestions or face any problems setting this up, open a new issue in the repo. I will be more than happy to help you resolve those. If you like this starter kit, give a star to pbteja1998/nextjs-starter repo.

Until Next Time 👋

If you liked this article, check out

• 3 Simple Steps To Setup Authentication in Next.js
• How to Import SVGs into your Next.js Project?
• Add Typescript to your Next.js project

If you have any comments, please leave them below or you can also @ me on Twitter (@pbteja1998), or feel free to follow me.

Links and References:

• Passwordless Authentication with Next.js, Prisma, and next-auth
• NextAuth.js
• pbteja1998/nextjs-starter
• Nextjs Starter Demo
• Vercel
• Heroku

• Clone repo
• Clone repo into specified directory
• Initialize current directory as a git repo
• Add a file
• Add all the files in current directory
• Add all the files including files in .gitignore
• Create a new commit
• Add changes to existing commit
• Show status
• Show status in short format
• Show status in short format and show branch
• Show the commit logs
• Show the diff for unstaged files
• Show the diff for staged files
• Show all the remotes with URLs
• Add a new remote
• Change URL for existing remote
• Switch to another branch
• Create a new branch and switch to it
• Remove all the unstaged changes in the current directory
• Remove all the unstaged changes for a file
• Push local changes to the remote repo
• Push and set the remote as upstream
• Force push local changes to the remote repo
• Delete the branch in the remote repo
• Delete the branch locally
• Force delete the branch locally
• Remove all untracked files and directories
• Merge the branch to the current branch
• Fetch changes from the remote and merge
• Remove all the changes to the tracked files that haven't been committed yet

git clone

# Create 'blogs' folder and clone the 'pbteja1998/blogs' repo into it
git clone https://github.com/pbteja1998/blogs.git

# Create `my-blogs` folder and clone the `pbteja1998/blogs` repo into it
git clone https://github.com/pbteja1998/blogs.git my-blogs

git init

# Initializes the current directory as a git repo
git init

git add

# Adds the file contents to the index
# Ready to be committed next time you run `git commit`
# By default, Ignores the files present in `.gitignore`

# Add a single file
git add README.md

# Add all the files in the current directory
git add .

# Also adds the files present in `.gitignore`
git add -f .

git commit

# Commits/Records the changes to the local repo
git commit -m "some message"

# Does not create a new commit
# Adds the changes to the most recent commit
git commit --amend

git status

# Shows the status of the working tree
git status

# Shows the output in short format
git status -s

# Shows the branch even in short format
git status -sb

git log

# Shows the commit logs
git log

git diff

# Shows the changes between unstaged files and the commits
git diff

# Shows the changes between staged(ready-to-be-committed) files and the commits
git diff --staged

git remote

# Shows all the remotes configured and their remote URL
git remote -v

# Adds a remote
# git remote add <remote-name> <remote-url>
git remote add upstream https://github.com/something/blogs.git

# Changes the URL of the remote
git remote set-url upstream https://github.com/some-thing/blogs.git

git checkout

# Switch to branch 
# git checkout <branch>
git checkout master

# Creates a new branch and switch to that
git checkout -b new-feature

# Removes all the unstaged changes in the current directory
git checkout .

# Removes all the unstaged changes for a file
git checkout -- README.md

git push

# Pushes the local changes to the remote to keep it up-to-date
git push origin master

# Force push the local changes to the remote
# Usually git will not allow you to push to the remote if the remote has some commits that are not present in the local repo
# This will override that check and lets you force push to the remote
# This may cause the remote to lose some commits. So use it carefully.
git push -f origin master

# Push and set the remote as upstream 
# same as `git push --set-upstream origin feature-branch`
git push -u origin feature-branch

# Deletes the branch in the remote
# same as `git push --delete origin new-feature`
git push -d origin new-feature

git branch

# Deletes the branch locally
# same as `git branch --delete feature-branch`
git branch -d feature-branch

# Force delete a branch even if it's not merged
# same as `git branch --delete --force feature-branch`
git branch -D feature-branch

git clean

# Removes all the files and directories that are not yet tracked by git
git clean -fd

git merge

# Merges the <branch> to the current branch
# git merge <branch>
git merge feature-branch

git pull

# Fetches the changes from the remote and merge it into local repo
git pull origin master

git reset

# Removes all the changes to the tracked files that have not yet been committed
git reset --hard

What's Next?

The next article will most probably be a part of My Review of Kent C. Dodds's EpicReact.Dev. Check out the series page for more info.

Until Next Time 👋

If you liked this article, check out

• Create Your Own Super Simple URL Shortener
• Why you should start using HSL color format
• Hyphenate when you justify text

If you have any comments, please leave them below or you can also @ me on Twitter (@pbteja1998), or feel free to follow me.

This image is taken from https://github.com/donavon/hook-flow.

I took the example shown in this article from React Hooks workshop in EpicReact.Dev by Kent C. Dodds.

I have added relevant links at the end of this article. Check those out for more detailed video explanations given by Kent C. Dodds.

Every component has three phases:

1. Mount
2. Update
3. Unmount

Mount - Hooks Flow

This stage is when the component initially mounts on a page. In this stage, the flow of hooks is as follows:

1. Run lazy initializers
   • Lazy initializers are functions that we pass to useState and useReducer. Those functions will be run only in this mount stage.
2. Render
   • This is where all the useState hooks and other things are present.
3. React updates DOM
   • Updating of DOM is not same as the browser painting the screen.
4. Run Layout Effects
   • We will see layout effects in future articles.
5. Browser paints the screen
6. Run Effects

Update - Hooks Flow

This stage is when the component updates. An update can happen for all the following reasons:

• Parent of the component re-renders
• State of the component changes
• Context changes

In this stage, the flow of hooks is as follows:

• Render
• React updates DOM
• Cleanup Layout Effects
  • (Like useEffect) useLayoutEffect also has a cleanup phase.
• Run Layout Effects
• Browser paints the screen
• Cleanup Effects
• Run Effects

As you can see, this is similar to what we saw for the mount stage, except that this also has Cleanup Layout Effects and Cleanup Effects.

Unmount - Hooks Flow

This stage is when the component unmounts from a page.

In this stage, the flow of hooks is as follows:

• Cleanup Layout Effects
• Cleanup Effects

Only cleanups will be run in this stage.

Types of useEffect callbacks

Before we see an example, let's take a look at 3 different types of useEffect callbacks.

1. useEffect with no dependencies
2. useEffect with empty dependencies
3. useEffect with some dependencies

1. useEffect with no dependencies

useEffect(() => {
    console.log('useEffect(() => {})') // Line 1
    return () => {
        console.log('useEffect(() => {}) cleanup') // Line 2
    }
})

This useEffect callback has no dependencies.

• Callback function(Line 1) will be run when:
  • Component is mounted
  • Component is updated
• Cleanup function(Line 2) will be run when:
  • Component is updated
  • Component is unmounted

2. useEffect with empty dependencies

useEffect(() => {
    console.log('useEffect(() => {}, [])') // Line 1
    return () => {
        console.log('useEffect(() => {}, []) cleanup') // Line 2
    }
}, [])

This useEffect callback has empty dependencies.

• Callback function(Line 1) will be run when:
  • Component is mounted
• Cleanup function(Line 2) will be run when:
  • Component is unmounted

Note: This useEffect callback will not be executed when the component updates because of the empty dependency array.

3. useEffect with some dependencies

useEffect(() => {
    console.log('useEffect(() => {}, [count])') // Line 1
    return () => {
        console.log('useEffect(() => {}, [count]) cleanup') // Line 2
    }
}, [count])

This useEffect callback has one or more dependencies.

• Callback function(Line 1) will be run when:
  • Component is mounted
  • Any of the dependency is changed - In this case when the count is changed.
• Cleanup function(Line 2) will be run when:
  • Any of the dependency is changed - In this case when the count is changed.
  • Component is unmounted

Example

Consider the below example

import React from "react";

function App() {
  console.log("App: render start");

  const [showChild, setShowChild] = React.useState(() => {
    console.log("App: useState(() => false)");
    return false;
  });

  console.log(`App: showChild = ${showChild}`);

  React.useEffect(() => {
    console.log("App: useEffect(() => {})");
    return () => {
      console.log("App: useEffect(() => {}) cleanup");
    };
  });

  React.useEffect(() => {
    console.log("App: useEffect(() => {}, [])");
    return () => {
      console.log("App: useEffect(() => {}, []) cleanup");
    };
  }, []);

  React.useEffect(() => {
    console.log("App: useEffect(() => {}, [showChild])");
    return () => {
      console.log("App: useEffect(() => {}, [showChild]) cleanup");
    };
  }, [showChild]);

  const element = (
    <>
      <label>
        <input
          type="checkbox"
          checked={showChild}
          onChange={(e) => setShowChild(e.target.checked)}
        />{" "}
        show child
      </label>
      <div>
        {showChild ? <Child /> : null}
      </div>
    </>
  );

  console.log("App: render end");

  return element;
}

import React from "react";

function Child() {
  console.log("    Child: render start");

  const [count, setCount] = React.useState(() => {
    console.log("    Child: useState(() => 0)");
    return 0;
  });

  console.log(`    Child: count = ${count}`);

  React.useEffect(() => {
    console.log("    Child: useEffect(() => {})");
    return () => {
      console.log("    Child: useEffect(() => {}) cleanup");
    };
  });

  React.useEffect(() => {
    console.log("    Child: useEffect(() => {}, [])");
    return () => {
      console.log("    Child: useEffect(() => {}, []) cleanup");
    };
  }, []);

  React.useEffect(() => {
    console.log("    Child: useEffect(() => {}, [count])");
    return () => {
      console.log("    Child: useEffect(() => {}, [count]) cleanup");
    };
  }, [count]);

  const element = (
    <button onClick={() => setCount((previousCount) => previousCount + 1)}>
      {count}
    </button>
  );

  console.log("    Child: render end");

  return element;
}

• we have an App component and Child component.
• App component has a state which decides whether to show the Child component or not.
• Child component has a count state.
• Child has a button to update the count.
• Both App and Child has three types of useEffect callbacks
  • useEffect with no dependencies
  • useEffect with empty dependencies
  • useEffect with one or more dependencies.

We will see how the flow looks like for each of the following steps:

1. App is mounted
2. Child is mounted by updating the state in App
3. Child is updated by updating the count in Child
4. Child is unmounted by updating the state in App

1. App is mounted

Here the App is in mount phase, so from the diagram, the order should be

1. ✅ Run lazy initializers of App
2. ✅ Render of App
3. ✅ React updates DOM of App
4. ❌ Cleanup layout effects of App
5. ✅ Run Layout Effects of App
6. ✅ Browser paints screen of App
7. ❌ Cleanup Effects of App
8. ✅ Run Effects of App

When the App is mounted, we see the following console logs.

1. App: render start
   • App rendering starts.
2. App: useState(() => false)
   • App lazy initializer is getting executed.
3. App: showChild = false
   • App renders.
4. App: render end
   • App rendering finishes.
5. App: useEffect(() => {})
   • App useEffect with no dependecies is being executed.
6. App: useEffect(() => {}, [])
   • App useEffect with empty dependecies is being executed.
   • This is getting called because this is the mount phase of the App component, and in mount phase all the useEffect callbacks will be called.
7. App: useEffect(() => {}, [showChild])
   • App useEffect with showChild as dependecy is being executed.
   • This is getting called because this is the mount phase of the App component, and in mount phase all the useEffect callbacks will be called.

Notes:

• All the useEffect callbacks will get executed on the initial mount of the component
• useEffect callbacks will be run in the order in which they appear.

2. Child is mounted by updating the state in App

Let's click on show child checkbox. This will mount the Child component.

Here Child will be in the mount phase and App will be in the update phase.

As per diagram, the order for Child will be

1. ✅ Run lazy initializers of Child
2. ✅ Render of Child
3. ✅ React updates DOM of Child
4. ❌ Cleanup layout effects of Child
5. ✅ Run Layout Effects of Child
6. ✅ Browser paints screen of Child
7. ❌ Cleanup Effects of Child
8. ✅ Run Effects of Child

And for App,

1. ❌ Run lazy initializers of App
2. ✅ Render of App
3. ✅ React updates DOM of App
4. ✅ Cleanup layout effects of App
5. ✅ Run Layout Effects of App
6. ✅ Browser paints screen of App
7. ✅ Cleanup Effects of App
8. ✅ Run Effects of App

We will see the following console logs.

1. App: render start
   • App rendering starts.
   • Lazy initializer will NOT be run now. It runs only on the initial mount.
2. App: showChild = true
   • App renders.
3. App: render end
   • App rendering finishes.
4. Child: render start
   • Child is mounted and Child starts getting rendered.
5. Child: useState(() => 0)
   • Child lazy initializer is getting executed since this is the mount phase of Child.
6. Child: count = 0
   • Child renders.
7. Child: render end .
   • Child rendering finishes.
8. App: useEffect(() => {}) cleanup
   • App useEffect with no dependencies cleanup.
9. App: useEffect(() => {}, [showChild]) cleanup
   • App useEffect with showChild dependencies cleanup.
   • This cleanup happens because showChild is getting updated here.
10. Child: useEffect(() => {})
    • Child useEffect with no dependencies is being executed.
11. Child: useEffect(() => {}, [])
    • Child useEffect with empty dependencies is being executed.
    • This is getting called because this is the mount phase of the Child component, and in mount phase all the useEffect callbacks will be called.
12. Child: useEffect(() => {}, [count])
    • Child useEffect with count as dependency is being executed.
    • This is getting called because this is the mount phase of the Child component, and in mount phase all the useEffect callbacks will be called.
13. App: useEffect(() => {})
    • App useEffect with no dependencies is being executed.
14. App: useEffect(() => {}, [showChild])
    • App useEffect with showChild dependencies is being executed.
    • This is getting called because showChild has updated.

Notes:

• While rendering the App component, we have <Child /> in its markup. But you can see the Child render starts after the App render ends.
• This is because <Child /> is not same as calling calling Child function. It's basically calling React.createElement(Child).
• React will only start calling Child when it's time for rendering it.

3. Child is updated by updating the count in Child

Let's click on the count button to update the count present in Child.

Here Child will be in the update phase and App has no change.

As per diagram, the order for Child will be

1. ❌ Run lazy initializers of Child
2. ✅ Render of Child
3. ✅ React updates DOM of Child
4. ✅ Cleanup layout effects of Child
5. ✅ Run Layout Effects of Child
6. ✅ Browser paints screen of Child
7. ✅ Cleanup Effects of Child
8. ✅ Run Effects of Child

We will see the following console logs

1. Child: render start
   • Child rendering starts.
2. Child: count = 1
   • Child renders
3. Child: render end
   • Child rendering ends.
4. Child: useEffect(() => {}) cleanup
   • Child useEffect with no dependencies cleanup.
5. Child: useEffect(() => {}, [count]) cleanup
   • Child useEffect with count as dependency cleanup.
   • This is getting called because count has updated.
6. Child: useEffect(() => {})
   • Child useEffect with no dependencies is being executed.
7. Child: useEffect(() => {}, [count])
   • Child useEffect with count as dependency is being executed.
   • This is getting called because count has updated.

4. Child is unmounted by updating the state in App

Let's click on the show child checkbox to unmount the Child component.

Here Child will be in unmount phase and App will be in update phase

As per diagram, the order for Child will be

1. ❌ Run lazy initializers of Child
2. ❌ Render of Child
3. ❌ React updates DOM of Child
4. ✅ Cleanup layout effects of Child
5. ❌ Run Layout Effects of Child
6. ❌ Browser paints screen of Child
7. ✅ Cleanup Effects of Child
8. ❌ Run Effects of Child

And for App,

1. ❌ Run lazy initializers of App
2. ✅ Render of App
3. ✅ React updates DOM of App
4. ✅ Cleanup layout effects of App
5. ✅ Run Layout Effects of App
6. ✅ Browser paints screen of App
7. ✅ Cleanup Effects of App
8. ✅ Run Effects of App

We will see the following console logs

1. App: render start
   • App rendering starts.
2. App: showChild = false
   • App renders
3. App: render end
   • App rendering ends
4. Child: useEffect(() => {}) cleanup
   • Child useEffect with no dependencies cleanup
5. Child: useEffect(() => {}, []) cleanup
   • Child useEffect with empty dependencies cleanup
   • This is getting called here because this in unmount phase and in unmount phase all the cleanups will be called.
6. Child: useEffect(() => {}, [count]) cleanup
   • Child useEffect with count as dependency cleanup
   • This is getting called here because this in unmount phase and in unmount phase all the cleanups will be called.
7. App: useEffect(() => {}) cleanup
   • App useEffect with no dependencies clean up
8. App: useEffect(() => {}, [showChild]) cleanup
   • App useEffect with showChild as dependency clean up.
   • This is getting called because showChild has updated here.
9. App: useEffect(() => {})
   • App useEffect with no dependencies is getting executed
10. App: useEffect(() => {}, [showChild])
    • App useEffect with showChild as dependency is getting executed
    • This is getting called because showChild has updated here.

And finally, when the App component also unmounts, the cleanup of all the App useEffects will be called.

Links and References:

• Hooks Flow in EpicReact.Dev by Kent C. Dodds
• Understand the React Hook Flow in The Beginners Guide To React by Kent C. Dodds
• Hook Flow Diagram

What's Next?

In the next article, we will look at what lifting state and colocating state mean in React. And also we will see when they will be useful.

Until Next Time 👋

If you liked this article, check out

• React Hooks: Managing State With useState Hook
• How to Create a Reusable LocalStorage Hook
• Easily Detect Outside Click Using useRef Hook

If you have any comments, please leave them below or you can also @ me on Twitter (@pbteja1998), or feel free to follow me.

Step 1. Create Next.js application

yarn create next-app next-auth
# npx create-next-app next-auth

This will create a new Next.js application. You can remove unnecessary files and make the structure as below.

My pages/index.js just contains the following

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

Step 2: Install NextAuth and SQLite packages

I will be using SQLite as my database for this tutorial, but next-auth supports all of the popular databases.

yarn add next-auth sqlite3
# npm install next-auth sqlite3

Step 3: Setup NextAuth API Route

Create a file with name [...nextauth].js under /pages/api/auth and add the following content in it.

// pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = {
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    }),
  ],
  database: process.env.DATABASE_URL,
}

export default (req, res) => NextAuth(req, res, options)

Now, all the calls made to /api/auth/* will be handled by next-auth.

In this example, only the GitHub authentication provider is added. But next-auth supports all of the following providers by default.

Apple            Email            Okta
Auth0            Facebook         Reddit
Basecamp         GitHub           Slack
BattleNet        GitLab           Spotify
Box              Google           Twitch
Cognito          IdentityServer4  Twitter
Credentials      LinkedIn         Yandex
Discord          Mixer

You can even add your own provider. More details here.

Create .env.local file at the root of the project and add the environment keys that we used in the [...nextauth].js file.

# .env.local
GITHUB_ID=a8451b4a*********
GITHUB_SECRET=95be17c33**********
DATABASE_URL=sqlite://localhost/:memory:?synchronize=true

Replace values for GITHUB_ID and GITHUB_SECRET with your own keys. You can follow the steps described here. While creating that OAuth app, add http://localhost:3000/api/auth as Authorization callback URL. The rest of the fields, you can fill with anything.

After this, go to https://github.com/settings/developers and open the newly created OAuth App to get GITHUB_ID and GITHUB_SECRET and add them to the .env.local file.

Now, add SignIn and SignOut buttons in your index.js page.

// pages/index.js
import { signIn, signOut, useSession } from 'next-auth/client'

export default function Home() {
  const [ session ] = useSession()
  return (
    <div>
      <h1>Hello World</h1>
      {session ? (
        <button onClick={() => signOut()}>Signout</button>
      ) : (
        <button onClick={() => signIn()}>SignIn</button> 
        )}
      {session && (
        <div>
          <small>Signed in as</small>
         <br/>
          <strong>{session.user.email || session.user.name}</strong>
        </div>
      )}
    </div>
  )
}

That's it. Your app now has GitHub authentication setup.

If you want to see a more full-fledged example, you can download official next-auth-example provided by NextAuth.js.

Another important thing to note here is that NextAuth.js can be used with or without a database. It also has a password-less login built-in similar to the one you have on Hashnode. You just have to provide the EMAIL_SERVER details, and you are set up. This package makes setting up authentication a breeze. You no longer need to have a separate backend just for the sake of having authentication.

Links and References:

• NextAuth.js
• Next.js

What's Next?

The next article will most probably be a part of My Review of Kent C. Dodds's EpicReact.Dev series. Go to that series page to know more.

Until Next Time 👋

If you liked this article, check out

• Add Typescript to your Next.js project
• How to Import SVGs into your Next.js Project?

You can @ me on Twitter (@pbteja1998) with comments, or feel free to follow me.

Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects.

The most common hooks are:

• useState
• useEffect
• useRef
• useContext
• useReducer

In the previous article (How to Create a Reusable LocalStorage Hook), we learned about useEffect hook and how we can use it to create a custom and reusable hook that persists the state by storing it in local storage. If you haven't read that article, please go and read it before going through this article. We will be using useEffect in this article.

useRef

This is a special inbuilt function in React that gives you a direct reference to DOM node. Usually, in React, you won't have access to the DOM nodes directly. But sometimes, you may want to get access to DOM nodes directly because of various reasons, like the library that you use may need that.

useRef takes a single argument which is the initial value for the ref and creates and returns a ref.

const elementRef = useRef(null)

Now, the way to ask React to give you the access to DOM node is to assign the created ref to the ref prop of the element in JSX.

For example,

function HelloWorld() {
    // create the ref
    const elementRef = useRef(null)

    return (
            { /* Asking React for the access to the DOM node */ }
        <>
            <div ref={elementRef}>
                Hello World
            </div>
        </>
    )
}

Now, when you add the ref prop for the JSX element, React understands that you want direct reference to the DOM node of that element, and then it sets the current property of that elementRef to the DOM node.

In the above example, you can access the DOM node by using elementRef.current

Detect Click Outside

Let's use this to detect whenever you click outside of an element.

Some of the practical use-cases where you may want to detect if you clicked outside of an element are:

• When you have a modal(popup/dialog), and you want to close the modal whenever you click outside of it.
• When you have a dropdown, and you want to close it whenever you click outside of it.

function App() {
    const [isOpen, setIsOpen] = useState(true)
    return (
        <>
            <div>
                <h2>App with a Modal</h2>
                <button onClick={() => setIsOpen(true)}>Open Modal</button>
                <div id="modal">
                    <Modal isOpen={isOpen}>
                        This is the modal dialog
                    </Modal>
                </div>
        </>
    )
}

Let's take this simple component. It has a heading, a button which when clicked opens the modal.

Our goal is to detect and execute setIsOpen(false) whenever we click outside of div with id modal.

Let's see how we can achieve this.

1. We need a reference to the div with id modal.
2. We need to detect a click.
3. We need to see if the click happened outside of the modal div.
4. Then we need to execute setIsOpen(false)

Step 1: Getting reference to Modal

We can use useRef for this.

function App() {
    const [isOpen, setIsOpen] = useState(true)
    // change starts here
    const modalRef = useRef()
    // change ends here
    return (
        <>
            <div>
                <h2>App with a Modal</h2>
                <button onClick={() => setIsOpen(true)}>Open Modal</button>
               <!-- Change starts here -->
                <div id="modal" ref={modalRef}>
               <!-- Change ends here -->
                    <Modal isOpen={isOpen}>
                        This is the modal dialog
                    </Modal>
                </div>
        </>
    )
}

Now, after the app gets rendered, modalRef.current will have access to the required DOM node.

Step 2. Add a click event listener

We can add an event listener inside useEffect.

useEffect(() => {
    function handler(event) {
        console.log(event, 'clicked somewhere')   
    }
    window.addEventListener('click', handler)
    return () => window.removeEventListener('click', handler)
}, [])

Here we added a click event listener to the entire window to detect the click anywhere on the window.

Step 3: Detect if the click happened outside of the window

We can know where the click happened based on event.target. We just have to check if our modal div contains event.target or not.

useEffect(() => {
    function handler(event) {
        // change starts here
        if(!modalRef.current?.contains(event.target)) {
            console.log('clicked outside of modal')
        }
        // change starts here
    }
    window.addEventListener('click', handler)
    return () => window.removeEventListener('click', handler)
}, [])

Step 4: Close the modal whenever you click outside of modal

This step is straight-forward. We just have to execute setIsOpen(false) whenever we detect the click outside the modal.

useEffect(() => {
    function handler(event) {
        if(!modalRef.current?.contains(event.target)) {
            // change starts here
            setIsOpen(false)
            // change starts here
        }
    }
    window.addEventListener('click', handler)
    return () => window.removeEventListener('click', handler)
}, [])

Let's put everything together.

function App() {
    const [isOpen, setIsOpen] = useState(true)
    const modalRef = useRef()

    useEffect(() => {
        function handler(event) {
            if(!modalRef.current?.contains(event.target)) {
                setIsOpen(false)
            }
        }
        window.addEventListener('click', handler)
        return () => window.removeEventListener('click', handler)
    }, [])

    return (
        <>
            <div>
                <h2>App with a Modal</h2>
                <button onClick={() => setIsOpen(true)}>Open Modal</button>
                <div id="modal" ref={modalRef}>
                    <Modal isOpen={isOpen}>
                        This is the modal dialog
                    </Modal>
                </div>
        </>
    )
}

Creating a reusable hook

We can create a reusable hook out of this that you can use anywhere.

import { useEffect, useRef } from 'react'

export default function useOnClickOutsideRef(callback, initialValue = null) {
  const elementRef = useRef(initialValue)
  useEffect(() => {
    function handler(event) {
      if (!elementRef.current?.contains(event.target)) {
        callback()
      }
    }
    window.addEventListener('click', handler)
    return () => window.removeEventListener('click', handler)
  }, [callback])
  return elementRef
}

In this hook, we are creating a ref and then returning it at the end. This way, the API looks kinda similar to how you create a ref using useRef. But the ref created using this custom hook has the additional functionality to detect and execute a callback whenever a click is detected outside.

Let's change our example to use this hook.

function App() {
    const [isOpen, setIsOpen] = useState(true)
    const modalRef = useOnClickOutsideRef(() => setIsOpen(false))

    return (
        <>
            <div>
                <h2>App with a Modal</h2>
                <button onClick={() => setIsOpen(true)}>Open Modal</button>
                <div id="modal" ref={modalRef}>
                    <Modal isOpen={isOpen}>
                        This is the modal dialog
                    </Modal>
                </div>
        </>
    )
}

That's it. You now have the exact same functionality as you have before. The only thing you changed here is changing useRef() to useOnClickOutsideRef(() => setIsOpen(false)).

Accessing DOM nodes is not the only case when you can use ref. You can use ref to keep a reference to any value. You can even mutate the ref directly using exampleRef.current = 'something'. Mutating the ref will not cause the component to re-render. So, whenever you want to keep track of a value and want to mutate it without causing the component to re-render, you can make use of useRef hook.

To know a practical use-case which uses useRef to keep track of a value, checkout this excellent article by Tapas Adhikary - How to use JavaScript scheduling methods with React hooks

What have you learned?

• useRef Hook
  • It is used to create refs. It takes the initial value of ref as a single argument.
  • When you assign the ref (created using useRef hook) to the ref property of JSX element, React automatically sets the current property of that ref to the DOM node of the corresponsing element.
  • You can mutate the ref.current property directly and mutating it does not cause the component to re-render.
• We also learned how to create a useOnClickOutsideRef using useRef and useEffect - which can detect and execute a callback whenever you clicked outside of an element.

What's Next?

In the next article, we will look at the hooks flow to see in which order different hooks will get executed. We will also see what lifting state and colocating state mean and when to use each of them.

Until Next Time 👋

If you liked this article, check out

• How to Create a Reusable LocalStorage Hook
• React Hooks: Managing State With useState Hook

You can also follow me on Twitter at @pbteja1998.

Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects.

The most common hooks are:

• useState
• useEffect
• useRef
• useContext
• useReducer

In the previous article (React Hooks: Managing State With useState Hook), we learned about useState hook. We will be using the useState hook in this article, so if you haven't read the previous one yet, please go and read that before going through this. In this article, we will learn about useEffect hook and then later use it to build a custom and reusable localStorage hook.

useEffect

useEffect is a built-in function in React. It takes a callback function as an argument and does not return anything.

For example,

useEffect(() => {
    //...do something here
})

Note:

• React runs the callback present in useEffect after every render and rerender of the component.

Creating a reusable LocalStorage Hook

Simple useEffect

Let's take a simple counter example as shown below.

function Counter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    setCount(count + 1);
  };
  return <button onClick={incrementCount}>{count}</button>;
}

Try to increment the counter in the above sandbox and reload the sandbox page. You will see that as soon as you reload the page, the counter is reset to 0. Let's say that we don't want that. We want the counter to stay at the same value even after you reload the sandbox page. One way to do this is to store the value of the counter in local storage and sync the counter state from there when you reload.

Let's see how we can achieve that using useEffect.

useEffect(() => {
    localStorage.setItem('count', count)
})

What this does is, every time the component rerenders, it updates the value of the count key in local storage.

function Counter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    localStorage.setItem('count', count)
  })
  return <button onClick={incrementCount}>{count}</button>;
}

As you increase the count, you will see that the count in localStorage is getting increased. But as soon as you realod the page, the count is being reset to 0 again, even in localStorage. This is because we are not getting the initial value of count from localStorage.

Let's change the component to get the initial value from localstorage.

function Counter() {
  const [count, setCount] = useState(() => localStorage.getItem('count') || 0);
  const incrementCount = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    localStorage.setItem('count', count)
  })
  return <button onClick={incrementCount}>{count}</button>;
}

Note: Here we are doing a lazy initialization of the state.

Try to increment the count and reload the sandbox. You will see that the counter no longer resets to 0. But, we are facing a new problem.

To reproduce the problem,

• Increment the count a few times.
• Reload the page.
• Now increment the count again by clicking the count button.
• You will see that instead of incrementing the count by 1, one is getting concatenated to the existing count.

This is happening because of how localStorage stores the values. It stores everything in the form of a string. So even when we try to store the number in localStorage, it converts it into a string and then stores it. So, when we fetch the value from localStorage, we are getting a string instead of a number. That is why incrementing the count is not behaving as it should.

Let's try to fix this.

function convertNumberToString(num) {
  return `${num}`
}

function convertStringToNumber(str) {
  return Number(str)
}

function getInitialValue() {
  const localStorageValue = localStorage.getItem('count')

  // here we are converting the string in localStorage to number before returning
  return convertStringToNumber(localStorageValue) || 0
}

function Counter() {
  const [count, setCount] = useState(() => getInitialValue());
  const incrementCount = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    // we are converting the number to string before storing in localStorage
    // This way, we can control how the conversion happens
    localStorage.setItem('count', convertNumberToString(count))
  })
  return <button onClick={incrementCount}>{count}</button>;
}

Now, everything seems to work. But, we can optimize this even further.

Dependency Array

Let's try to add a console log in the useEffect and see when it is being run.

useEffect(() => {
    console.log('useEffect callback is getting executed')
    localStorage.setItem('count', convertNumberToString(count))
})

You will see that the useEffect callback is getting executed every time the component re-renders. Try to click on "UPDATE SOME OTHER STATE" button. You will see that even though the count doesn't change, the useEffect is getting called. This is the expected behavior. But we want to set the value in localStorage only when the value of count changes.

React gives us a way to achieve this.

useEffect takes an array as the second argument. It is called dependency array. You can specify all the dependencies that your useEffect depends on, in that array. And that useEffect callback will only run when any of those dependencies change.

For example, we want the useEffect in our example to run only when count changes. You can achieve this as follows.

useEffect(() => {
    console.log('useEffect callback is getting executed')
    localStorage.setItem('count', convertNumberToString(count))
}, [count])

Now, when you try to click on "UPDATE SOME OTHER STATE", the component rerenders, but the useEffect callback will not get executed.

Let's put everything together.

import React, { useState, useEffect } from "react";

function convertNumberToString(num) {
    return `${num}`;
}

function convertStringToNumber(str) {
    return Number(str);
}

function getInitialValue() {
    const localStorageValue = localStorage.getItem("count");
    return convertStringToNumber(localStorageValue) || 0;
}

function Counter() {
    const [count, setCount] = useState(() => getInitialValue());
    const incrementCount = () => {
        setCount(count + 1);
    };
    useEffect(() => {
        localStorage.setItem("count", convertNumberToString(count));
    }, [count]);
    return (
        <button className="btn" onClick={incrementCount}>
            {count}
        </button>
    );
}

export default Counter;

Creating a reusable hook

The useLocalStorageState hook example shown here is based on the example from Kent C. Dodds's EpicReact.Dev React Hooks workshop.

Since we may need the same logic of storing state in localStorage at many places, we can create a custom hook that does it, and then we can use it wherever we want to store the state in localStorage.

function convertNumberToString(num) {
    return `${num}`;
}

function convertStringToNumber(str) {
    return Number(str);
}

function getInitialValue() {
    const localStorageValue = localStorage.getItem("count");
    return convertStringToNumber(localStorageValue) || 0;
}

function useLocalStorageState() {
    const [count, setCount] = useState(() => getInitialValue());
    const incrementCount = () => {
        setCount(count + 1);
    };
    useEffect(() => {
        localStorage.setItem("count", convertNumberToString(count));
    }, [count]);
    return [count, setCount]
}

This is what we have until now. Let's refactor this a bit to generalize things.

function getInitialValue(key, defaultValue, convertFromString) {
  const localStorageValue = localStorage.getItem(key);
  return convertFromString(localStorageValue) || defaultValue;
}
function useLocalStorageState(
  key,
  defaultValue = "",
  { convertToString = JSON.stringify, convertFromString = JSON.parse } = {}
) {
  const [state, setState] = useState(() =>
    getInitialValue(key, defaultValue, convertFromString)
  );

  useEffect(() => {
    localStorage.setItem(key, convertToString(state));
  }, [key, state, convertToString]);

  return [state, setState];
}

What did we do here?

• We changed the variable count and setCount to state and setState
• We are asking the user to provide the key as an argument. We will store the state in this key in localStorage.
• We are asking the user to also pass the initial default value as an argument. Previously in our example, it was 0.
• We are asking the user to optionally pass the convertToString and convertFromString functions as arguments.
  • If the user doesn't provide them, we are defaulting them to JSON.stringify and JSON.parse.
• We updated the dependency array of useEffect and added all of its dependents.
• Finally, we are returning state and useState in the form of an array, similar to how the inbuilt useState hook returns an array.

Let's change our example to use this custom hook.

function Counter() {
    const [count, setCount] = useLocalStorageHook('count', 0);
    const incrementCount = () => {
        setCount(count + 1);
    };
    return (
        <button className="btn" onClick={incrementCount}>
            {count}
        </button>
    );
}

We can go a bit further and allow the user to also pass a function as the initial value, similar to how useState works.

function getInitialValue(key, defaultValue, convertFromString) {
  const localStorageValue = localStorage.getItem(key);

 // change starts here
  if(localStorageValue) {
    return convertFromString(localStorageValue)
  }
  return typeof defaultValue === 'function' ? defaultValue() : defaultValue
 // change ends here
}

Sometimes, the convertFromString function can throw an error when the value against the given key already exists in the local storage. In that case, we can remove the corresponding key-value pair from local storage before adding it with new values.

function getInitialValue(key, defaultValue, convertFromString) {
  const localStorageValue = localStorage.getItem(key);

  if(localStorageValue) {
    // change starts here
    try {
      return convertFromString(localStorageValue)
    } catch {
      localStorage.removeItem(key)
    }
    // change ends here
  }
  return typeof defaultValue === 'function' ? defaultValue() : defaultValue
}

Let's put everything together.

function getInitialValue(key, defaultValue, convertFromString) {
  const localStorageValue = localStorage.getItem(key);
  if(localStorageValue) {
    try {
      return convertFromString(localStorageValue)
    } catch {
      localStorage.removeItem(key)
    }
  }
  return typeof defaultValue === 'function' ? defaultValue() : defaultValue
}

function useLocalStorageState(
  key,
  defaultValue = "",
  { convertToString = JSON.stringify, convertFromString = JSON.parse } = {}
) {
  const [state, setState] = useState(() =>
    getInitialValue(key, defaultValue, convertFromString)
  );

  useEffect(() => {
    localStorage.setItem(key, convertToString(state));
  }, [key, state, convertToString]);

  return [state, setState];
}

That's it. You can use this hook whenever you want to store the state in localStorage and keep it in sync with the actual state. The API is also very similar to how you use useState

const [state, setState] = useLocalStorageState('state', {})

What have you learned?

• useEffect hook
  • It runs every time the component renders and re-renders when no dependency array is passed.
  • You can pass a dependency array as a second argument.
  • Callback in useEffect only runs when any of the value in the dependency array changes.
  • If you pass an empty array as a dependency array, then the callback will only run after the component is first rendered.
• We also learned how to create a reusable localStorage hook using useState and useEffect.

What's Next?

In the next article, we will see the flow of hooks. We will see exactly at what time different hooks will be run in the component lifecycle especially useState and useEffect.

Until Next Time 👋

References:

• EpicReact.Dev by Kent C. Dodds
• React Hooks Workshop Prod Deployment
• React Hooks Workshop Repo

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects.

Below are the most common hooks that you use:

• useState
• useEffect
• useRef
• useContext
• useReducer

In this article, we will learn in-depth about useState hook.

useState

useState is a built-in function in React. It takes a single argument and returns an array of two elements when executed.

Let's see an example.

const [count, setCount] = useState(0)

• It is used to manage the state of the component.
• When the state of a component changes, React re-renders that component and all of its child components automatically.
• It takes the initial value of the state as an argument.
• It returns an array of two elements.
  • The first element is the value of the state.
  • The second element is a function that you can use to set the value of the state
  • You can name these elements whatever you like, but the common practice is to name them as var and setVar. For instance, in the above example, we named it as count and setCount.

In the above example, we called useState with the argument of 0. This means that the initial value of the state is 0. count contains the value of the state. setCount is a function you can use to set the value of count.

Let's see the complete example of a component to get an idea of how useState is used in React.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function increment() {
        setCount(count + 1)
    }
    return (
        <button onClick={increment}>{count}</button>
    )
}

This renders a simple button that shows the value of count. Initially, it is 0. Whenever you click on the button, the count value is increased by 1 by using setCount. And as soon as the state changes, the component rerenders and the new value of count is shown in the button.

Functional Updates

Let's slightly change the above component.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function incrementBy3() {
        setCount(count + 2)
        setCount(count + 1)
    }
    return (
        <button onClick={incrementBy3}>{count}</button>
    )
}

Now, when you click on the button, what would you expect the increment to be. Will the count be incremented by 2? (or) Will it be incremented by 1? (or) Will it be incremented by 3?

Click and try it out.

Here is the corresponding code sandbox for it.

You can observe that the count will only be incremented by 1. This is because of how React makes state updates. Many state updates are batched together and performed in an asynchronous manner. So, if you have two setState calls at the same place, you cannot rely on React to complete the first state update before doing the second state update.

Let's take the above example.

• Initially, the count is 0.
• Button is clicked.
• First, React starts executing setCount(count + 2).
  • The value of count in that render is 0.
  • React calculates the value of count for the next render to be count + 2, which is 2.
  • But the component is not yet re-rendered. So the current value of the variable count is still 0.
• Now, React starts executing setCount(count + 1).
  • Since the value of count is still 0, React calculates the value of count for the next render to be count + 1 which is 1.
  • The value of next state was 2 when setCount(count+2) is executed. Now, it got overridden by the value of next state of setCount(count+1) which is 1.
• Now since all the state updates are executed, React starts rerendering the component with the value of the next state which is 1.
• And this is the reason why, when you click on the button only 1 is getting incremented instead of 3.

Even though it takes a while to understand the problem that is occurring, the solution to fix this problem is not that complicated.

Till now we have seen that setCount takes a value as an argument. But it also takes a callback as the argument of setCount. The first argument of that callback function is the previous value of the state.

For example, if we want to increment the count by 1, you can do it as follows:

setCount(previousCount => previousCount + 1)

When you use this type of callback function to update the state, you can be assured that the prevCount will always have the correct value of the state even though the component is not yet rerendered. That is why it is always recommended to use this type of update whenever the next value of the state is computed from the previous value of the state.

Let's use this approach and rewrite the above example.

import React, { useState } from "react"

function Counter() {
    const [count, setCount] = useState(0)
    function incrementBy3() {
        setCount(previousCount => previousCount + 2)
        setCount(previousCount => previousCount + 1)
    }
    return (
        <button onClick={incrementBy3}>{count}</button>
    )
}

This correctly increments the count by 3.

Lazy Initialization

const initialValue = resultOfSomeExpensiveOperation()
const [state, setState] = useState(initialValue)

Previously we have seen that the useState takes the initial value as an argument.

Technically React only needs the initialValue when the component is first mounted. After that, the initialValue is no longer applicable. So if the initial value is calculated through some expensive operations, we want those operations to run only at the start. Let's see if that is actually happening or not through an example.

import React, { useState } from "react";

function getInitialValue() {
  console.log('getInitialValue is getting executed');
  // ... do some expensive operations
  return 0;
}

function Counter() {
  const [count, setCount] = useState(getInitialValue());
  function increment() {
    setCount(count + 1);
  }
  return <button onClick={increment}>{count}</button>;
}

Try to click on the button and check the console.

• You will see that the getInitialValue function is being executed every time the button is clicked. So, it is getting called on every rerender.
• So, if there are any expensive operations to be made in that function, they will be executed after every rerender.
• But only the first execution of the getInitialValue is useful for React. All others will be thrown away as the state is already set in the subsequent rerenders.
• You can see why this might cause performance problems for your application.

React gives us a way to handle this type of situation. It's called Lazy Initialization of State.

Instead of directly passing the value as an argument, you have the option to pass a callback function which when executed gives you the initial value. React executes this function only when it is needed. This is needed only at the first, so React executes this function only once at the start.

Let's rewrite the above example to use lazy state initialization.

import React, { useState } from "react";

function getInitialValue() {
  console.log('getInitialValue is getting executed');
  // ... do some expensive operations
  return 0;
}

function Counter() {
  const [count, setCount] = useState(() => getInitialValue());
  function increment() {
    setCount(count + 1);
  }
  return <button onClick={increment}>{count}</button>;
}

All we changed in the above example is that: useState(getInitialValue()) is changed to useState(() => getInitialValue()).

You can check the console of the above code sandbox. You will see that getInitialValue is not getting called when you click on the button. It is only called at the start.

useState with Objects

You can manage any type of state with useState hook, even objects.

For example, let's use useState hook to manage firstName and lastName states in a single object.

const [name, setName] = useState({
    firstName: 'Bhanu Teja',
    lastName: 'P'
})

Now, whenever you call setName to update the name object, you have to provide both firstName and lastName.

For example,

setName({
    firstName: 'New First Name',
    lastName: 'New Last Name'
})

What if we want to update only the firstName or only the lastName. You can do so by using the spread operator.

function setFirstName(firstName) {
    setName({
        ...name,
        firstName
    })
}

function setLastName(lastName) {
    setName({
        ...name,
        lastName
    })
}

Let's put everything together.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState({
    firstName: "Bhanu Teja",
    lastName: "P"
  });

  function setFirstName(firstName) {
    setName({
      ...name,
      firstName
    });
  }

  function setLastName(lastName) {
    setName({
      ...name,
      lastName
    });
  }

  return (
    <>
      <input
        placeholder="First Name"
        type="text"
        value={name.firstName}
        onChange={(e) => setFirstName(e.target.value)}
      />
      <input
        placeholder="Last Name"
        type="text"
        value={name.lastName}
        onChange={(e) => setLastName(e.target.value)}
      />
      <p>
        Your name is:{" "}
        <strong>
          {name.firstName}.{name.lastName}
        </strong>
      </p>
    </>
  );
}

Usage of useState with arrays is very similar to that of with objects.

What have you learned?

You learned about:

• What are hooks and what are some of the common hooks in React ?
• useState hook:
  • It takes the initial value of the state as an argument and returns an array of two elements - one has the value of the state and the other is a function to update the value of the state.
  • How to do functional updates for the state?
  • Why, not using functional updates, causes a problem in certain situations ?
  • It is always recommended to use functional updates to update the state when the next state is computed from the previous state.
  • Lazy initialization of state and when it can be useful.
  • Usage of useState with objects and arrays.

What's Next?

In the next article, we will learn everything about useEffect hook.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

This is the 6th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understood in my own way. This is not in any way officially associated with Kent C. Dodds or EpicReact.Dev. You would learn a lot more when you actually go through the EpicReact.Dev video explanations and workshop material yourself. The workshop material is also self-paced and open source. So, if you want to do the workshop yourself, you can go to React Fundamentals Workshop Repo and follow the instructions there.

In this article, you will learn about how to do styling in React. You will also learn how to handle forms in React.

• Styling
  • Inline CSS
  • Regular CSS
• Handling Forms
  • Using event.target
  • Using Refs
  • Using useState

Styling

In React, there are primarily two ways to style the elements. One is through inline CSS and the other is to just add a className and style it in an external CSS file.

Inline CSS

In HTML, you can add inline styles to elements by adding your styles as a string to the style attribute.

<div style="color: red; font-style: italic;">Red Italic Text</div>

In React, you would add your styles to the style prop, but instead of a string, the style prop accepts a Style Object.

Note:

• The properties in the style object are camel-cased.
  • For example, background-color in CSS is backgroundColor in the style object.
  • Know More

const elementStyle = {
    color: 'red',
    fontStyle: 'italic'
}

<div style={elementStyle}>Red Italic Text</div>

You can even inline elementStyle if you like

<div style={{ color: 'red', fontStyle: 'italic' }}>
    Red Italic Text
</div>

Regular CSS

You can add styles to the elements by adding the className attribute and then styling it in an external CSS file.

<div className="container">Hello World</div>

.container {
    margin: 0 auto;
    background-color: red;
}

Handling Forms

The example used in this section is directly taken from React Fundamentals Workshop by Kent C. Dodds's

Using event.target

Consider the following form

<form>
  <div>
    <label htmlFor="usernameId">Username:</label>
    <input id="usernameId" type="text" name="username" />
  </div>
  <button type="submit">Submit</button>
</form>

Now handling forms in React is very similar to how we do in normal javascript. You just define a submit handler and then assign it to the onSubmit event of the form.

<form onSubmit={handleSubmit}>
    ...
    ...
    ...
</form>

function handleSubmit(event) {
    // This prevents the default behaviour of form submission
    // If you don't add this, the page will be refreshed 
    event.preventDefault()

    /** 
     You can get the value of username in one of the following ways.        
        (through the position of input)
        -> event.target.elements[0].value

        (through id)
        -> event.target.elements.usernameId.value

        (through name)
        -> event.target.elements.username.value
    **/

   // Do whatever you want with the username
}

Notes:

• Know more about Event.preventDefault

Using Refs

There is another way to get the reference to an element in React - using Refs. Refs are special objects in react that stay consistent between rerenders of the component and also changing it will not cause the component to rerender.

You can create a Ref using React.useRef()

const myRef = React.useRef()

Refs will have a current property which contains the value of ref. If you assign a ref to a React element, ref.current will automatically have the reference to the object.

For example

<input ref={myRef} />

Now myRef.current will have reference to that input element.

Let's make use of ref to get the username in our form.

function UsernameForm() {
  const usernameInputRef = React.useRef()

  function handleSubmit(event) {
    event.preventDefault()
    // usernameInputRef.current.value will have the value of the input
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input id="usernameInput" type="text" ref={usernameInputRef} />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

Go through useRef - official docs to learn more about refs.

Using useState

This is the most common way that is used to handle forms in React.

We store the value of the input in a state variable and then add an onChange handler to the input which updates the state variable.

In React, there is a special function called useState which you can use to handle state. It returns an array of two values.

1. The value of the state
2. A function to update the value of the state

Note:

• useState also takes the initial value of the state as its single argument.

Example:

const [count, setCount] = useState(0)

• Here count hold the value of the state.
• setCount is a function that can update the value of count.
• 0 is the initial value of count.

Let's use this to handle forms.

function UsernameForm() {
  const [username, setUsername] = useState('')

  function handleSubmit(event) {
    event.preventDefault()
    // 'username' will have the value of the input
  }
  function handleChange(event) {
    setUsername(event.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input 
            id="usernameInput" 
            value={username} 
            type="text" 
            onChange={handleChange} 
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

Note:

• The reason why we are using useState to handle the state of the application and not normal variables is that if we have a normal variable that holds state, changing it will not cause the component to rerender. So, even though the value changes, we can't see the change. But if we use the function that we got from useState to update the state, then React knows that the state of the application is changed, and it automatically rerenders the component.
• We will learn about useState hook in more detail in later articles.
• This type of input where the value of input is set through value attribute and then updating of that value is handled with onChange event handler is called controlled input.

Go through official docs to learn more about handling forms in React.

What's Next

This is the last article where we learn about React Fundamentals. The next article in this series is about different hooks in React.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

Welcome to the 5th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understood in my own way. This is not in any way officially associated with Kent C. Dodds or EpicReact.Dev. You would learn a lot more when you actually go through the EpicReact.Dev video explanations and workshop material yourself. The workshop material is also self-paced and open source. So, if you want to do the workshop yourself, you can go to React Fundamentals Workshop Repo and follow the instructions there.

If you haven't read the previous articles in this series, please go and read them first before you continue. I will add links to the articles below.

1. Introduction
2. Javascript You Need To Know For React
3. React Fundamentals - Intro to React Raw APIs
4. React Fundamentals - Understanding JSX

In the previous article, you have learned different things about JSX like converting React.createElement() calls to JSX and vice-versa, interpolation in JSX, spreading props in JSX, etc. In this article, we will learn how to create custom components in JSX.

Table of Contents

• Creating Basic Reusable Function
• Using React.createElement
• Using JSX
• Validation with PropTypes
• Using prop-types Package
• React Fragments

The examples shown in this article are taken from Kent C. Dodds's React Fundamentals workshop repo.

Creating Basic Reusable Function

Consider the following JSX markup.

<div className="container">
    <div className="message">Hello World</div>
    <div className="message">GoodBye World</div>
</div>

Now, our goal is to avoid the duplication <div className="message">...</div>.

Like we normally would do in vanilla javascript, let's create a reusable function that takes the text as an argument and returns the JSX that we need.

function message(text) {
    return <div className="message">{text}</div>
}

Now we can write our JSX markup in the following manner.

<div className="container">
    {message("Hello World")}
    {message("GoodBye World")}
</div>

Let's refactor this a bit, instead of accepting the string value as an argument, let's pass an object that has a children key in it.

function message(props) {
    return <div className="message">{props.children}</div>
}

<div className="container">
    {message({children: "Hello World"})}
    {message({children: "GoodBye World"})}
</div>

We can even go a step further and destructure the children prop.

function message({children}) {
    return <div className="message">{children}</div>
}

<div className="container">
    {message({children: "Hello World"})}
    {message({children: "GoodBye World"})}
</div>

Using React.createElement

Previously we have seen that the first argument of the React.createElement() is the type of tag that we want to render.

For example, React.createElement('div', {}, 'Hello World') will render <div>Hello World</div>.

But, the first argument of the React.createElement() will also accept a function as its arguments that generate something renderable like JSX, an expression like string, number, etc.

So, let's refactor the above code and use React.createElement()

function message({children}) {
    return <div className="message">{children}</div>
}

<div className="container">
    {React.createElement(message, {children: "Hello World"})}
    {React.createElement(message, {children: "GoodBye World"})}
</div>

Using JSX

In the previous article, we have seen how to convert React.createElement() calls to JSX.

For example, JSX for {React.createElement("div", {children: "Hello World"})} is <div>Hello World</div>

Let's try to use the similar approach to convert {React.createElement(message, {children: "Hello World"})} to JSX.

<message>Hello World</message>

If we follow the same approach, we would end up with the above JSX markup.

As per our knowledge until now, the above code should work as intended. But it will not. It is because of how babel compiles JSX to React.createElement().

The above JSX will be compiled to React.createElement("message", {children: "Hello World"}) instead of React.createElement(message, {children: "Hello World"}). Notice the difference. In the first case, the argument is the string "message" whereas in the second case, the argument is the reference to the message function.

The way we can achieve this is very simple. We simply have to make the first letter of the name of the function as uppercase.

function Message({children}) {
    return <div className="message">{children}</div>
}

<div className="container">
    <Message>Hello World</Message>
    <Message>GoodBye World</Message>
</div>

Now, this <Message>Hello World</Message> will be compiled to React.createElement(Message, {children: "Hello World"}) which is exactly what we need.

Check the below examples to see how Babel compiles each of the JSX formats.

Validation with PropTypes

Consider the following Message component.

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

Let's use this component in the following way.

<Message name="foo" />
<Message />
<Message name={2} />

This produces

// OK
Hi, your name is foo.

// Should ideally throw an error
Hi, your name is .

// Should ideally throw an error
Hi, your name is 2.

So, If we pass a number as a name prop or if we don't pass any prop, even then the text is rendered, but ideally, it should throw an error because Hi, your name is . doesn't make sense.

Luckily, React gives us a way to achieve this using PropTypes.

const PropTypes = {
    string(props, propName, componentName) {
        if (typeof props[propName] !== 'string') {
            return new Error(`In component ${componentName}, ${propName} needs to be a string, but it was of type ${typeof props[propName]}`)
        }
    },
}

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

// Component accepts an object as its `propTypes`. 
// Each key in that object is the name of each prop. 
// Each value is a function that takes (props, propName, componentName) 
//      as its arguments and returns an error if validation fails.
Message.propTypes = {
    name: PropTypes.string,
}

Now, whenever you try to pass anything other than a string to name prop, it will throw an error.

Note:

• PropTypes will be disabled by React in production environments for performance reasons.

Using prop-types Package

Since cases like the above are so common, React team created a package called prop-types which will work in a similar manner. For example, if we want the name prop to be required and also a string, we can do so with the prop-types package in the following manner.

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

Message.propTypes = {
    name: PropTypes.isRequired.string,
}

Check out prop-types repo for more details.

React Fragments

<div id='root'></div>

Let's consider the following use case. You have to add <span>Hello</span> and <span>World</span> to the rootElement using React.

In the end, the markup should look like

<div id='root'>
    <span>Hello</span>
    <span>World</span>
</div>

Let's see if we can do this.

const rootElement = document.getElementById('root')

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

ReactDOM.render(?????, rootElement)

Now, what should be in the place of ????? in the last line. It can neither be elementOne nor elementTwo, because we want both of them to be rendered (not one). But ReactDOM.render() takes only one react element as an argument and then appends it to rootElement.

One way to achieve this is if we can wrap both of the elements in a new element.

const rootElement = document.getElementById('root')

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

const combinedElement = React.createElement('div', null, elementOne, elementTwo)

ReactDOM.render(combinedElement, rootElement)

The above code may look fine, but it produces different HTML than what we needed.

<div id='root'>
    <div>
        <span>Hello</span>
        <span>World</span>
    </div>
</div>

This is the reason why you can't do something like the following in your code.

function Message() {
    return (
        <span>Hello</span>
        <span>World</span>
    )
}

Because there is no way for babel to be able to convert this to a single React.createElement()

React Fragments are introduced in React v16.2.0 exactly to solve this problem. Now you can return multiple elements by just wrapping them around with React.Fragment.

For example,

function Message() {
    return (
        <React.Fragment>
            <span>Hello</span>
            <span>World</span>
        </React.Fragment>
    )
}

React will ignore this React.Fragment when rendering.

So the previous problem can be solved now in the following way.

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

const combinedElement = React.createElement(React.Fragment, null, elementOne, elementTwo)

ReactDOM.render(combinedElement, rootElement)

Note:

• There is a shorthand representation for React.Fragment.
  • Instead of writing <React.Fragment>{childrent}</React.Fragment>, you can write something like <>{children}</>.
  • Both yield absolutely the same result.

What did you learn?

In this article, you learned about

• Creating custom components.
• The reason why the first letter of the custom component needs to be upper case.
• Validating the props of the custom component using propTypes
• Using prop-types package to validate props
• Rendering multiple elements at the same level using React.Fragment

What's Next

In the next article, we will see how to style React elements. We will also see how to handle basic forms in React.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

Links and References:

• EpicReact.Dev - Series of workshops with video explanations by Kent C. Dodds based on which this blog post series is being written.
• React Fundamentals Workshop Repo - Github Repo if you want to do the self-paced workshop yourself.
• React Fundamentals Workshop Demo - Production application of the above workshop repo.

You might also like the following articles that I wrote:

• I Revamped GitHub Jobs Website Using Design From Frontend Mentor
• React Fundamentals: Understanding JSX
• React Fundamentals: Intro to React Raw APIs
• How I Gave A Modern Look For HackerNews Feed
• Javascript You Need To Know For React
• My Review of Kent C. Dodds's EpicReact.Dev: Introduction
• React Fundamentals
• Create Your Own Super Simple URL Shortener
• Why you should start using HSL color format
• Embed Youtube Videos into Your Markdown Editor
• Babel Plugin To Remove Console Logs In Production
• Create Custom Markdown Parser
• Add Typescript to your Next.js project

Welcome to another project showcase. This time, I will be showing the GitHub Jobs project that I did very recently. The design is from FrontendMentor.Io. The website is available at jobs.bhanuteja.dev.

Let's start with some visuals of how the website looks like.

Loading Home Page

Dark Mode

Light Mode

Home Page

Desktop (Dark Mode)

Desktop (Light Mode)

Tab/iPad (Dark Mode)

Tab/iPad (Light Mode)

Mobile (Dark Mode)

Mobile (Light Mode)

Job Details Page

Desktop (Dark Mode)

Desktop (Light Mode)

Mobile - Filters

Features:

• Dark Mode Support
• Filters - text, location, full time.
• Infinite Scrolling with Skeleton Loading
• Responsive
• Job Details Page

This website is made with Next.js, Tailwind CSS and React Query

Dark Mode

• I used Tailwind CSS's inbuilt dark mode support to achieve this.
• Check this pr for more details.
• I then stored the user's dark mode preference in local storage. So, if the user sets the dark mode, and closes the browser. When he reopens it again, the website will be loaded in dark mode.

GitHub API

• Recently GitHub added a strict CORS policy and we will not be able to request the resources from GitHub using a client.
• So, I had to use a CORS proxy to fetch the data from GitHub Jobs API.
• I tried every one of the proxies mentioned in this blog post. But, the only one that worked for me then was allOrigins.

Filters

Implementing this one was straight-forward. GitHub API itself supports the option to pass the filters as params, it then returns the filtered data.

Infinite Scrolling with Skeleton Loading

• Used React Query's useMutation hook to do this.
• Every time the user presses theLoad More button, a mutation is triggered to fetch the jobs from the next page.
• I then combined the job data fetched from the next page with the current job data to show all the jobs up until then.

I used Tailwind CSS animations utilities to show the loading skeleton.

I made the source code for this project open source. You can take a look at it.

Tell me in the comments if you like me to dig deep into any of the things that I discussed in this article. I will be happy to do so.

Here is the repo 👉 pbteja1998/github-jobs-api

What's Next

The next article will be part of the My Review of Kent C. Dodds's EpicReact.Dev series. It will be the fifth article in the series. To know more, go to the link below.

Until Next Time 👋

You might also like the following articles that I wrote:

• React Fundamentals: Understanding JSX
• Introduction to React Raw APIs
• How I Gave A Modern Look For HackerNews Feed
• Javascript You Need To Know For React
• Create Your Own Super Simple URL Shortener
• Why you should start using HSL color format
• Embed Youtube Videos into Your Markdown Editor
• Babel Plugin To Remove Console Logs In Production
• Create Custom Markdown Parser

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

Welcome to the 4th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understood in my own way. This is not in any way officially associated with Kent C. Dodds or EpicReact.Dev. You would learn a lot more when you actually go through the EpicReact.Dev video explanations and workshop material yourself. The workshop material is also self-paced and open source. So, if you want to do the workshop yourself, you can go to React Fundamentals Workshop Repo and follow the instructions there.

If you haven't read the previous articles in this series, please go and read them first before you continue. I will add links to the articles below.

1. Introduction
2. Javascript You Need To Know For React
3. React Fundamentals - Intro to React Raw APIs

In the previous article, you have learnt about React Raw APIs specifically React.createElement() and ReactDOM.render(). In this article, you will learn all about JSX.

Table of Contents

• Using JSX
  • Writing Markup With JSX
  • Adding Props To JSX
  • Interpolation In JSX
  • Spreading Props

Using JSX

Writing Markup With JSX

JSX is the HTML-like syntactic sugar that finally gets compiled into couple of React.createElement() function calls.

Let's see a Hello World example of how JSX looks like.

// JSX
const element = <div>Hello World</div>

// Above JSX compiles into following
const element = React.createElement("div", null, "Hello World")

Since JSX is not a valid javascript code, you have to add a compiler that compiles this code and converts it into a normal javascript code(in this case React.createElement() calls).

We can use Babel for this purpose. Babel converts our JSX code into javascript code in the browser itself.

Note:

• In actual production-level applications, we would not be following this method of using babel that we see here. We will see more about this in future articles.
• While adding JSX code, Babel needs a way to find out which part of the code it needs to compile into JS. You also need to have a way to tell the browser to not evaluate any JSX code since if it does, it throws errors because JSX code is not a valid JS code. So, you need to wrap the JSX code between <script type="text/babel"> and </script>. Any code between the script tag with type text/babel will be compiled by Babel and not evaluated by the browser.
• You can also play around with Babel REPL to see exactly how JSX is compiled to javascript.

You can add Babel to your application through CDN.

<script src="https://unpkg.com/@babel/standalone@7.9.3/babel.js"></script>

In the previous article, we tried to create nesting elements markup using React.createElement.

// This is the code that we used to create that markup.
const helloElement = React.createElement("span", {children: "Hello"})
const worldElement = React.createElement("span", {children: "World"})
const helloWorldElement = React.createElement("div", {
    children: [helloElement, worldElement]
})

// Let's try to create the same helloWorldElement using JSX
const helloWorldElement = <div><span>Hello</span><span>World</span></div>

// You can even split the JSX into multiple lines for more readability.
// It is recommended to add parenthesis around JSX when splitting them into multiple lines
const helloWorldElement = (
    <div>
        <span>Hello</span>
        <span>World</span>
    </div>
)

From the above example, we can see that JSX is more intuitive to work with than directly using React.createElement.

Adding Props to JSX

consider the below element created using React.createElement API

const element = React.createElement("div", {className: "container"}, "Hello World")

Let's try to convert this to JSX code. Here you have a prop called className. The way to add the React props in JSX is to add them as attributes.

const element = <div className="container">Hello World</div>

Let's see an example with multiple props.

// js
const element = React.createElement("div", {className: "container", id: "hello"}, "Hello World")

// jsx
const element = <div className="container" id="hello"></div>

Note:

• Notice that in JSX we write className instead of class like in HTML. It's because in the corresponding React.createElement API, the name of the prop for class is className. We are directly adding props in React.createElement() to JSX as attributes.

Interpolation in JSX

Let's see the English meaning of interpolation first. A quick google search gave me The insertion of something of a different nature into something else.

You already saw interpolation in one of the javascript concepts that we know - Template Literals. In template literals, we are inserting javascript expressions inside strings.

Interpolation in JSX is inserting javascript expressions into JSX. Let's see a basic example to know what I mean.

// Without Interpolation
const element = <div className="container">Hello World</div>

// With JSX Interpolation
const nameOfClass = "container"
const content = "Hello World"
const element = <div className={nameOfClass}>{content}</div>

You can see in the example above we are interpolating nameOfClass and content into JSX. The way you do that is by wrapping them around inside curly braces.

Let's also look at how Babel compiles this down to.

const element = React.createElement("div", {className: nameOfClass}, content)

So, basically, whatever you write inside those curly braces, the babel directly assigns them to the corresponding prop without changing anything.

You are not just limited to interpolating strings, you can interpolate any type of javascript expression into JSX. Let's see some examples

const element = <div>{count + 1} Blogs</div>

const element = <div id={`blog-${blogId}`}>This is a blog post with id {blogId}.</div>

const element = (
    <div className={isMobile ? "mobile" : "desktop"}>
        This is {isMobile ? "Mobile" : "Desktop"} view
    </div>
)

const element = (
    <div>{isDesktop && (<span>Hello</span>)} World</div>
)

Notes:

• Ternary operator is also an expression, hence we are able to interpolate that in JSX
• Conditional AND and Conditional OR operators are also expressions and can be interpolated in JSX.
• Statements cannot be interpolated in JSX.

Let's see why statements cannot be interpolated in JSX.

Consider the following JSX where we interpolated an if statement

const element = <div className={if(condition) func() }>Hello</div>

// let's try to convert this to React.createElement()
const element = React.createElement("div", {className: if(condition) func()}, "Hello")
// The above statement is not a valid javascript, a statement cannot be assigned to a variable.
// This is the reason why we cannot add statements inside interpolation.

Spreading Props

Consider the below example.

const props = {
    id: "hello",
    className: "container",
    children: "Hello World"
}
const element = React.createElement("div", props)
// This will render <div id="hello" className="container">Hello World</div>

// Let's slightly change how we write props.
// This will produce the same exact result as above
const element = React.createElement("div", {...props})

// Let's try to convert this to JSX
// Note that in JSX, we can use all the tags as self-closing tags.
const element = <div {...props} />

From the above example, we can see that the way to spread the props in JSX is to use {...props}.

Notes:

• In JSX, the attributes are camelCased. For example, the equivalent of HTML attribute aria-label in JSX is ariaLabel and equivalent of onchange is onChange. I will add a couple of links at the bottom to learn more about these changes.
• In JSX, if you add an attribute, but do not assign any value to it, JSX treats it as a boolean attribute and assigns value true to it.

    // Both of these are same
    const element = <button disabled={true}>Button</button>
    const element = <button disabled>Button</button>
  

• When assigning props, the order is important. The attributes to the right will override the same attributes that are to the left.

    const element = <div className="default" className="primary">Hello World</div>
  
    // when the above JSX is rendered, it will be converted to following HTML markup.
    <div class="primary">Hello World</div>
    // The className attribute that is to the right will replace the className attribute that is to the left
  

What's Next

In this article, you learned about JSX, adding props to JSX, interpolation in JSX, spreading props in JSX, etc. In the next article, we will see how to create custom components. We will also see how to style the elements in React.

Until Next Time 👋

You might also like the following articles that I wrote:

• Introduction to React Raw APIs
• How I Gave A Modern Look For HackerNews Feed
• Javascript You Need To Know For React
• My Review of Kent C. Dodds's EpicReact.Dev: Introduction
• React Fundamentals
• Create Your Own Super Simple URL Shortener
• Why you should start using HSL color format
• Embed Youtube Videos into Your Markdown Editor
• Babel Plugin To Remove Console Logs In Production
• Create Custom Markdown Parser
• Add Typescript to your Next.js project

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on twitter @pbteja1998.

Links and References:

• EpicReact.Dev - Series of workshops with video explanations by Kent C. Dodds based on which this blog post series is being written.
• React Fundamentals Workshop Repo - Github Repo if you want to do the self-paced workshop yourself.
• React Fundamentals Workshop Demo - Production application of the above workshop repo.
• Introducing JSX - Official React Docs
• DOM Elements And Their Attributes - Official React Docs

Welcome to the third article of the My Review of Kent C. Dodds's EpicReact.Dev Series which is based on the workshop material from EpicReact.Dev by Kent C. Dodds. If you haven't read the previous articles of the series yet, please go and read them before continuing through this article.

Here are the previous articles.

1. Epic React: Introduction
2. Epic React: Javascript You Need To Know For React

In this article, You are going to learn the very basics of React. We will just be working with basic HTML and javascript using React raw APIs. We will not even be using any JSX in this article(If you don't know what JSX is, don't worry, we will learn about it in the next article.) You will see why it is difficult to work with React raw APIs. Many people skip over these fundamentals before learning React, but it is important to know about these abstractions to understand some things in React which we will see in the next article.

We will follow the similar format of the workshop - meaning for every topic, we will first introduce what we are trying to achieve, then we will see how to achieve that.

Table of Contents

• Basic JS "Hello World"
  • Introduction
  • Generate DOM Nodes
• Intro to Raw React APIs
  • Introduction
  • Raw React APIs
  • Nesting Elements

Basic JS "Hello World"

Introduction

Our goal is to render Hello World using basic javascript.

Our HTML currently has the following

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

We want our HTML to be:

<div id="root">
    <div class="container">Hello World</div>
</div>

Generate DOM Nodes

We can achieve the above result by making use of Javascript's document API.

// Fetches the element with id as `root` from DOM
const rootElement = document.getElementById("root")

// Creates an element with `div` tag
const helloWorldElement = document.createElement("div")
helloWorldElement.textContent = "Hello World"
helloWorldElement.className = "container"

// Appends the helloWorldElement to the rootElement
rootElement.append(helloWorldElement)

Let's break down what we are doing here.

1. Get the element with id as root from DOM.
2. Create a new DOM element and then set its properties.
3. Append the newly created element to the root element that we fetched from DOM.

Even though the above code is very clear, I broke it down into steps, because in the following section, we will use these exact steps to achieve this, but by using React APIs.

Intro to Raw React APIs

Introduction 2

React uses the same document API that we have seen before under the hood. But it abstracts it away and gives you easy to use and intuitive API to work with

Let's try to create the same hello world markup that we did before, this time using React.

Raw React APIs

// Fetches the element with id as `root` from DOM
const rootElement = document.getElementById("root")

// Creates an element with `div` tag
const helloWorldElement = React.createElement("div", { 
    className: "container", 
    children: "Hello World" 
})

// Appends the helloWorldElement to the rootElement
ReactDOM.render(helloWorldElement, rootElement)

Before we understand this code, observe that we have used React and ReactDOM, which are not a part of basic javascript. Hence, they should be added before they become available to us.

Let's add them using their CDN scripts. We will be using unpkg's CDN.

<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>

After adding this, we will be able to access React and ReactDOM from within javascript.

Let's try to understand the code now.

1. Get the element with id as root from DOM.
   • This part did not change. We are still using the document API to get the root element.
2. Create a new DOM element and then set its properties.
   • Here we are introducing the new React API called React.createElement().
   • It takes two arguments
     1. HTML tag that we want to create.
     2. Properties and the corresponding values that we want to set.
   • Note that we have introduced a new property called children.
     • children is basically a replacement of what we want inside of the HTML tag that we create.
     • So, if we want to render <div>Hello World</div>, we will create a React element with a div tag and set the children's property to Hello World.
3. Append the newly created element to the root element that we fetched from DOM.
   • We will be using ReactDOM for rendering. The corresponding API is ReactDOM.render()
   • It also takes two arguments.
     • Element that we want to append.
     • Element which we want to append the above element to.
   • So, if we want to append element1 to element2. You would do ReactDOM.render(element1, element2).

Can you see and appreciate how similar both the React APIs and document APIs are. With the knowledge that we have let's try to create the below markup using React.

Nesting Elements

Lets try to create the following markup with React.

<div id="root">
    <div>
        <span>Hello</span>
        <span>World</span>
    </div>
</div>

Before doing this, you need to know that the children property that we have seen before will also accept an array as its value. For example, both of the following calls will produce the same HTML output.

// 1.
React.createElement("div", { children: "Hello World" })

// 2.
React.createElement("div", { children: ["Hello", " ", "World"] })

Now that we know this, let's try to create the given markup.

// Fetches the element with id as `root`
const rootElement = document.getElementById("root")

// Creates a `span` element with content as `Hello`
const helloElement = React.createElement("span", {children: "Hello"})

// Creates a `span` element with content as `World`
const worldElement = React.createElement("span", {children: "World"})

// Let's put the above two elements in to a single div
const helloWorldElement = React.createElement("div", {
    children: [helloElement, worldElement]
})

The above code will create the HTML markup that we want.

Note:

React.createElement can also take more than 2 arguments. The following two calls generate the same thing.

// 1.
React.createElement("div", {children: [element1, element2, element3]})

// 2.
React.createElement("div", {}, element1, element2, element3)

So, you can essentially unpack the children array and then add them as other arguments.

That's it for now.

What's Next

In this article, you saw how verbose React raw APIs are. So, it becomes a little difficult to write code like this when there are a lot of elements and each element has different properties.

That is why React gave us a way to simplify this and write the code in a format called JSX which looks a bit similar to HTML. In the next article, we will see all about JSX and we will also see how to create custom components and style them with CSS.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on twitter @pbteja1998.

Links and References:

• EpicReact.Dev - Series of workshops by Kent C. Dodds based on which this blog post series is being written.
• React Fundamentals Workshop Repo - Github Repo if you want to do the self-paced workshop yourself.
• React Fundamentals Workshop Demo - Production application of the above workshop repo.

The next article in this series is already live. Click on the link below👇

I made a website showing Hacker News and gave it a modern look. Before we dive into what all I used to make it, let's see some visuals of how the website looks. By the way, the website is at hn.bhanuteja.dev.

Let's get to it.

Here are the screenshots of the website at various screen sizes.

Loading View

Story View

Comments View

Looks clean, right? I like it. If you want to play around with it, visit https://hn.bhanuteja.dev

Let's Get Technical

This project is built using Next.js, Tailwind, and React Query. There are different components to this website, let's see each one of them below.

1. Hacker News API
2. UI
3. Loading
4. Pagination
5. Filters
6. Styling The Comments.
7. Search

I wanted to support the following use-cases. Anything extra is an added bonus

• Users can see articles from Hacker News.
• Users can filter to only see articles about a specific topic.
• Users can filter articles by date.
• Pagination.

1. Hacker News API

We need an API that does the following things:

• Fetch Top Hacker News stories.
• Fetch New Hacker News stories.
• Fetch Show, Ask, and Job Hacker News stories.
• Fetch the stories that matched the given search query.

I ended up using the official API which does 3 of the 4 things that I mentioned above. It doesn't have an API to fetch stories based on the search query. I decided to just implement the search functionality separately on the website itself based on the content fetched.

2.UI

I used the following things for the UI.

• Tailwind CSS
• Tailwind UI
• Heroicons
• Headless UI
  • These are completely unstyled, fully accessible UI components. I tried this for the first time in this project. I like them very much. Will be using these a lot.

I found an amazing package called javascript-time-ago which is a highly customizable relative date/time formatted. I used this to show the relative dates and times like 3 mins ago, 23 hrs ago etc.

3. Loading

I used Tailwind CSS animations utilities to show the loading skeleton.

4. Pagination

I implemented pagination a little unconventionally. I have added infinite scrolling with the Load More button. But I also added page numbers to the website. When you click on a page, the page scrolls down to the first story of that page. I added this to have easy navigation when you load a large number of stories. Check the above gif to understand better.

5. Filters

I have added three types of filters.

1. Show Only
   • All Time
   • Last 24 Hours
   • Past Week
   • Past Month
   • Past Year
2. Sort By
   • Popularity
   • Date
   • Comments
3. Order In
   • Ascending Order
   • Descending Order

6. Styling The Comments

This is a little bit tricky. The comments that we get from API is not just pure text. We get HTML content as the comment text. To style that, I have used @tailwindcss/typography plugin. If you don't know what it is, you should definitely check it out.

7. Search

The search functionality that is present right now is very basic. It just does substring matches and filters the results. I am planning to instead use Fuse.js to do fuzzy searching(approximate string matching). Will get to this when I find the time.

Challenges

The main challenge that I faced is because of API. The API has an endpoint that gives the story ids of approximately 500 stories. Then it has another endpoint that gives the details of a single story.

So, if I fetch all the stories at the page load, it was taking approximately 3-4 mins to fetch everything. Until we fetch everything, the filters wouldn't work. So I have to hide the filters until everything is fetched.

So, I made a compromise and decided to fetch just 50 stories at the start, and added a load more button. And I decided not to show a blank page until all stories are fetched. I immediately showed a story if it is fetched and showed a loading skeleton for the stories that are still being fetched. I hid the filters and added a loading rotating ring in place of that.

I faced some more challenges when I actually sat down to code. Especially because I wanted to show the story on the page as soon as it is fetched, instead of waiting for other stories to be fetched.

I made the code for this open-source. You can take a look at it, star it, fork it, make issues, raise PRS, do whatever you want with it.

Tell me in the comments if you like me to dig deep into any of the things that I discussed in this article. I will be happy to do so.

Here is the repo 👉 pbteja1998/hacker-news-client

What's Next

Tell me in the comments if you like to see more articles in this format.

The next article will be part of the My Review of Kent C. Dodds's EpicReact.Dev series. It will be the third article in the series. To know more, go to My Review of Kent C. Dodds's EpicReact.Dev series.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on Twitter @pbteja1998.

Welcome to the second article of the My Review of Kent C. Dodds's EpicReact.Dev series which is based on the workshop material from EpicReact.Dev by Kent C. Dodds. In the previous article, you looked at the different topics that are going to be covered in EpicReact.Dev workshop. If you haven't read the previous article of the series, please go and read it now and come back. In this article, I am going to explain the basic javascript concepts that you need to know before you start learning React.

Let's get to it.

I am one of those persons who learned React before properly learning the basic concepts of javascript. Because of this, in the early days of my React journey, I didn't know which part of the code is React and which part is the vanilla js. It's important to know the basic javascript concepts to understand better which part of the puzzle is React solving.

In this blog post, I will be writing about different concepts of javascript that you see yourself using very often while working with React. It's better to know these before you deep dive into learning React.

I will be covering the following topics. Feel free to skip over the topics that you already know.

• Logical AND (&&) and Logical OR (||) Operators
  • Logical AND (&&) Operator
  • Logical OR (||) Operator
• Template Literals
• Ternary Operator
• Shorthand Property Names
• Object Destructuring
• Array Destructuring
• Default Parameters
• Optional Chaining
• Nullish Coalescing Operator
• Spread Operator
• Rest Operator
• Arrow Functions
• Array Methods
  • Array map() Method
  • Array filter() Method
  • Array reduce() Method
  • Array sort() Method
  • Array includes() Method
  • Array slice() Method
  • Array splice() Method
• Default Exports vs Named Exports
• Promises
• Basic DOM Document APIs

Logical AND (&&) and Logical OR (||) Operators

Logical AND (&&) Operator

Let's say we have the following expression - where b and c are expressions

b && c

This will be evaluated to the value of c only if b is truthy, otherwise, it will be evaluated to the value of b

Note:

• If b is falsy, then the expression c is not even going to be evaluated.
• This is called short-circuit evaluation.
• This will be used quite a lot while using React.

Logical OR (||) Operator

Let's say we have the following expression - where b and c are expressions

b || c

This will be evaluated to the value of b if b is truthy, otherwise, it will be evaluated to the value of c.

Note:

• Short-circuit evaluation happens here too.
• If b is truthy, then the expression c is not even going to be evaluated.
• You will be using this also quite often while using React.

Template Literals

This is a new ES6 way to create strings.

Let's see an example.

Assume that you want to create the following type of strings:

• 3 blog posts were written by Bhanu Teja in a span of 2 weeks.

You will be given count (number of blogs), name (name of the user), span (time span it took) as variables.

Without using template literals

const count = 3
const user = 'Bhanu Teja'
const span = 2

const result = count + ' blog posts were written by ' 
                     + name + ' in a span of ' + span 
                     + ' weeks.'

Using template literals

const count = 3
const name = 'Bhanu Teja'
const span = 2

const result = `${count} blog posts were written by ${name} in a span of ${span} weeks.`

Template literals start and end with a backtick(`) and you can write strings of text inside them and you have to wrap the javascript expressions around with ${ and }

Let's add another use-case to the above example.

• If we have just 1 blog post you have to use blog post instead of blog posts
• If the time span is just 1 week, you have to use week instead of weeks.

Without using template literals

function pluralize(text, count) {
    if (count === 1) {
        return text
    }
    return text + 's'
}

const result = count + ' ' + pluralize('blog post', count)  
                     + ' were written by ' + name
                     + ' in a span of ' + span 
                     + ' ' + pluralize('week', span) + '.'

Using template literals

function pluralize(text, count) {
    if (count === 1) {
        return text
    }
    return text + 's'
}

const result = `${count} ${pluralize('blog post', count)} were written by ${name} in a span of ${span} ${pluralize('week', span)}.`

Ternary Operator

This is a shorthand representation of the if-else statements.

This is best explained using an example.

if (condition) {
    doSomething()
} else {
    doSomethingElse()
}

The above example when written using ternary operator

condition ? doSomething() : doSomethingElse()

Syntax

condition ? expressionIfTrue : expressionIfFalse

Shorthand Property Names

const id = 2
const name = 'Bhanu'
const count = 2

// This is the normal way
const user = {
    id: id,
    blogs: count,
    name: name,
}

// Using shorthand property names
const user = {
    id,
    blogs: count,
    name,
}

If the name of the variable and the name of the property of the object are same, then you can just write the variable name and omit the rest.

This is one of the things that I did not know when I was initially learning React, and you usually see this being used a lot in code and documentation.

Object Destructuring

This is a short-hand way to get the properties of an object into variables.

// we have a `user` variable that looks like this
const user = {
    name: 'Bhanu Teja',
    blogs: 3,
    timeSpan: 2.
}

// without using object destructuring
const name = user.name
const blogs = user.blogs
const timeSpan = user.timeSpan

// using object destructuring
const { name, blogs, timeSpan } = user

Note: The name of the destructured variables should be same as the name of the object properties.

Array Destructuring

This is a short-hand way to get the elements of an array into variables.

// we have a `name` variable that looks like this
const name = [ 'Bhanu Teja', 'P']

// without using array destructuring
const firstName = name[0]
const lastName = name[1]

// using array destructuring
const [firstName, lastName] = name

Default Parameters

You often want the function parameters to take some default values if that is not passed while calling the function.

Let's see an example

function sum(a = 2, b = 5) {
    return a + b
}

sum(5, 7) // a = 5, b = 7, result = 12
sum(4) // a = 4, b = 5(default value of b), result = 9
sum() // a = 2(default a), b = 5(default b), result = 7

So, whenever you want a parameter to take a default value, simply add a = sign after the parameter and add your default value there.

Optional Chaining

This is a relatively new feature of javascript.

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.

• Taken from MDN Docs

Consider the expression a?.b.

This expression evaluates to a.b if a is not null and not undefined, otherwise, it evaluates to undefined.

You can even chain this multiple times like a?.b?.c

• If a is undefined or null, then this expression evaluates to undefined
• Else if b is undefined or null, then this expression evaluates to undefined
• Else this evaluates to a.b.c

Syntax:

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

Nullish Coalescing Operator

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

• Taken from MDN Docs

Consider the expression a ?? b. This evaluates to b if a is null or undefined, otherwise, it evaluates to a

Spread Operator

This operator spreads the values of an iterable object.

Array Spread

const a = [1, 2, 3]
const b = [5, 6]

console.log(...a) // 1 2 3

// Now, if you want to have an array with values 0, 1, 2, 3, 4, 5, 6
const c = [0, ...a, 4, ...b]

console.log(c) // 0 1 2 3 4 5 6

Object Spread

const first = {a: 1, b: 2}
const second = {c: 3}


// Now to create an object {a: 1, b: 2, c: 3, d: 4}
const result = {...first, ...second, d: 4}

console.log(result) // {a: 1, b: 2, c: 3, d: 4}

• To learn more about spread operator, Check out this amazing article ES6 - Spread Operator by Skay

Rest Operator

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

• Taken from MDN Docs

Function Arguments

function sum(a, b, ...rest) {
    // ...
}

sum(1, 2, 3, 4, 5, 6) // a = 1, b = 2, rest = [3, 4, 5, 6]

Usage with objects

const user = {
    name: 'Bhanu Teja',
    blogs: 3,
    span: 2,
}
const {name, ...rest} = user
console.log(name) // Bhanu Teja
console.log(rest) // { blogs: 3, span: 2}

Arrow Functions

This is a new ES6 way to write functions.

// without using arrow functions
const sum = function (a, b) {
    return a + b
}

// (or)

function sum (a, b) {
    return a + b
}

// Using arrow functions
const sum = (a, b) => {
    return a + b
}

// (or)

const sum = (a, b) => a+ b

const multiplyBy2 = (a) => a * 2

(or)

const multiplyBy2 = a => a * 2

As you can see from the above example, converting the normal function to arrow functions can be done as follows:

• Remove the function keyword.
• Add an => after the parameters.

Note

• If the body of the function is a simple expression you can even omit the return keyword and also need not wrap it between { and }
• If there is only one argument, you have the option to remove parenthesis around the arguments.
• There are still some more differences between arrow functions and normal functions, Checkout the following amazing articles to know more.
  • A Simple Guide To Arrow Functions by Victoria Lo
  • ES6 => Arrow Functions by Skay

Array Methods

There are so many array methods, but we frequently use some of these. I will be covering the following array methods.

• map
• filter
• reduce
• sort
• includes
• slice
• splice

Array map() Method

This method creates a new array from an existing array by calling a function for every element of the array.

I always remember this as mapping the values in an array to some other values.

Let's see an example.

const names = [
    { firstName: 'Bhanu Teja', lastName: 'P' },
    { firstName: 'Florin', lastName: 'Pop'},
    { firstName: 'Brad', lastName: 'Traversy'},
]

// Let's say we have to create a new array with full names.

// First let's write a callback function which takes an array element as an argument.
function callback(name) {
    return name.firstName + ' ' + name.lastName
}

// Now let's call .map() method on the array
console.log(names.map(callback)) // ["Bhanu Teja P", "Florin Pop", "Brad Traversy"]

// You can even inline the callback function which is how most of the people write this.
names.map(function(name) { return name.firstName + ' ' + name.lastName })

// Let's write the same using arrow functions and template literals that we just learned earlier
names.map((name) => `${name.firstName} ${name.lastName}`)

// You can even omit the parenthesis around name
names.map(name => `${name.firstName} ${name.lastName}`)

// Let's use object destructuring
names.map(({firstName, lastName}) => `${firstName} ${lastName}`)

Syntax:

// callback takes a single array element as an argument.
// values is an array
values.map(callback)

Note:

• Calling this method will not change the original array

Array filter() Method

Now that we know the Array map method, it's easy to understand other array methods. They all have a similar syntax.

The array filter method creates a new array with elements that satisfy some given criteria.

I always remember this as the filter method filters out elements that do not satisfy the criteria.

// consider the following array of users
const users = [
    {id: 1, posts: 2},
    {id: 2, posts: 1},
    {id: 3, posts: 5},
    {id: 4, posts: 4},
    {id: 5, posts: 3},
]

// Let's say we want to have all users who have at least 3 posts.
users.filter((user) => user.posts >= 3) // [{id: 3, posts: 5}, {id: 4, posts: 4}, {id: 5, posts: 3}]

Syntax:

// callback takes a single array element as an argument.
// values is an array
values.filter(callback)

Note:

• Calling this method will not change the original array

Array reduce() method

The array reduce method reduces the array of values into a single value. It executes the callback function for each value of the array.

Lets see the syntax of the reduce method before seeing an example.

array.reduce(function(totalValue, currentValue, currentIndex, arr), initialValue)

const values = [2, 4, 6, 7, 8]

// Let's say that we want to have a sum of all these values.
// Let's see how we do it using a traditional for loop
let total = 0
for(let i = 0; i < values.length; i++) {
    const value = values[i]
    total = total + value
}
console.log(total)


// Let's use reduce method now
const initialValue = 0
values.reduce((total, currentValue) => total + currentValue, initialValue)

Notes:

• initialValue is optional parameter.
• Calling this method will not change the original array

Array sort() method

The callback function takes two different values as arguments. Based on the return value of the callback function, the two elements' positions are decided.

• If the return value is negative, then the first value is considered to be before the second value.
• If the return value is zero, then there will be no change in the order of the values.
• If the return value is positive, then the first value is considered to be after the second value.

const values = [4, 10, 2, 1, 55]

// Let's say we want to sort this array in descending order
// so if a and b are given
// a should be before b if a > b
// a should be after b if a < b
// a and b can be at their own places if a === b

values.sort((a, b) => {
    if(a > b) {
        return -1
    }
    if(a < b) {
        return 1
    }
    return 0
}) // [55, 10, 4, 2, 1]


// You can also do this as follows
values.sort((a, b) => b - a)

Note:

• The return value of the function is the sorted array
• This changes the original array
• If you do not pass any callback function, this sorts the values as strings and in ascending order.

Array includes() Method

This returns true if the element is included in the array, otherwise returns false. Syntax:

array.includes(element)

const values = [2, 3, 4]
values.includes(1) // false
values.includes(2) // true

Note:

• You can pass an optional parameter specifying the start index to start the search from. array.includes(element, startIndex)

Array slice() method

Syntax

array.slice(start, end)

Array slice will return the elements in the given range.

• start
  • starting index to select the elements from
  • This is an optional parameter and by default, it takes the value of 0
  • You can even pass a negative number.
  • Negative number represents the position from the end.
    • -1 refers to the last element of the array, -2 refers to last but one element, and so on.
• end
  • ending index up to where to select the elements
  • This is an optional parameter. If this is not passed, then all elements up to the end of the array will be selected.
  • the element at end will not be selected
  • This also accepts a negative number as an argument and the meaning is the same as before.

const numbers = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(numbers.slice())  // [0, 1, 2, 3, 4, 5, 6, 7]
console.log(numbers.slice(2)) // [2, 3, 4, 5, 6, 7]
console.log(numbers.slice(2, 6)) // [2, 3, 4, 5]
console.log(numbers.slice(-1)) // [7]
console.log(numbers.slice(-3)) // [5, 6, 7]
console.log(numbers.slice(-3, -1)) // [5, 6]

Note:

• This doesn't change the original array

Array splice() method

Syntax:

array.splice(index, count, item1, ....., itemX)

This method is used to add or remove elements in an array.

• index
  • The index at which the elements need to be added or removed. Can be a negative value too.
• count
  • Number of elements to remove.
• item1, ....., itemX
  • Items that will be added at index

const numbers = [0, 1, 2, 100, 6, 7]
// let's say we have to convert this array to [0, 1, 2, 3, 4, 5, 6, 7]
numbers.splice(3, 1, 3, 4, 5) 
console.log(numbers) // [0, 1, 2, 3, 4, 5, 6, 7]

Note:

• The return value of the splice method is the array of items removed.
• This changes the original array

To know more about different array methods, check out the amazing series Javascript Array Methods made by @aman__tyagi

Default Exports vs Named Exports

You often see yourself using ES Modules imports and exports while working with React. It's important to know how to import them when they are exported as default exports vs when they are exported as named exports.

Check out the following amazing articles to read about these.

• JavaScript Modules and how to effectively work with Export Import by Tapas Adhikary
• ES Modules by Kent C. Dodds

Promises

You also need to have a basic knowledge of what promises are and how to work them. They will be used quite often in React.

Check out the following amazing articles to read about these.

• What are JavaScript Promises? by Skay
• Promises and Async Await by Kent C. Dodds

Basic DOM Document APIs

It is also good to be familiar with basic Document Apis like createElement, getElementById etc. If you know these, you will appreciate the similarity and differences between React APIs and Document APIs.

If you are working with javascript for a while now, it is most likely that you already know basic Document APIs.

MDN Docs are the best place to read up on these.

• Document - Web APIs | MDN

You might already know some of the topics that I have explained in this article. Even if you didn't before, now you know. These concepts are enough for you to follow along with EpicReact series. If you find something that can be improved or added to this article, feel free to comment on this article. I will try to incorporate your suggestions. Subscribe to my blog if you don't want to miss the next article in this series.

What's Next

In the next article, we are actually going to start the workshop - starting with React Fundamentals workshop.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on twitter @pbteja1998.

If you want to learn more about the topics mentioned in this article, you can go through the following articles that I found being published on Hashnode. Will be adding more articles to this list as they come along. Different people will find different explanations better.

• Spread and Rest Operators
  • ES6 - Spread Operator by Skay
  • The Three Dots of JavaScript: Rest and Spread Operator by Subha Chanda
• Arrow Functions
  • A Simple Guide To Arrow Functions by Victoria Lo
  • ES6 => Arrow Functions by Skay
• Optional Chaining and Nullish Coalescing
  • Optional Chaining is amazing, here's why? by Soumya Mishra
  • Nullish Coalescing is not as scary as it sounds by Soumya Mishra
• Destructuring
  • ES6 - Understanding Destructuring by Skay
  • JS Bits - Destructuring arrays in JavaScript! by Sedat Can Yalçın
  • ES6: Destructuring by Rohit Kumawat
• Array Methods
  • Javascript Array Methods by Aman Tyagi
  • JavaScript Array methods in one picture by FeStack
  • Array Methods Part 1 and Array Methods Part 2 by Sergio Rueda
• ES Modules
  • JavaScript Modules and how to effectively work with Export Import by Tapas Adhikary
• Promises
  • What are JavaScript Promises? by Skay
  • Creating a JavaScript promise from scratch, Part 1: Constructor by Nicholas Zakas
  • Creating a JavaScript promise from scratch, Part 2: Resolving to a promise by Nicholas Zakas
  • 4 Promise Methods you need to know by Kannan

The next article in this series is already live. Click on the link below👇

Welcome to the new series that I am starting on React called My Review of Kent C. Dodds's EpicReact.Dev. This is the first article in this series and I will start it off with the introduction to what this series will be about.

This series is based on the workshop content from EpicReact.Dev by Kent C. Dodds. While I go through the workshops, I will write blog posts explaining what I understand from the content. Hope you are as excited as I am to be part of this epic journey.

In this article, I will list out all the things that will be covered in Epic React workshops. These workshops are also self-paced, and the content in it is open source. So, you can go through the content on your own if you like. But I highly recommend that you buy the license and watch the video explanations if you are planning on going through this content by yourself. I will most probably combine multiple lessons while writing a blog post or may write multiple blog posts for some of the lessons.

Workshops

Epic React is divided into 8 different workshops.

1. React Fundamentals
2. React Hooks
3. Advanced React Hooks
4. Advanced React Patterns
5. React Performance
6. Testing React Apps
7. React Suspense
8. Building an Epic React App

1. React Fundamentals

In this workshop, we will learn everything you need to be effective with the fundamental building blocks of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.

➖ Summary Taken From EpicReact.Dev

• React Fundamentals Welcome
• Basic JS "Hello World"
• Intro to Raw React APIs
• Using JSX
• Creating Custom Components
• Styling
• Forms
• Rendering Arrays
• React Fundamentals Outro

Articles already published as a part of this section:

2. React Hooks

Learn the ins and outs of React Hooks. I will take you on a deep dive into React Hooks, and show you what you need to know to start using them in your applications right away.

➖ Summary Taken From EpicReact.Dev

• React Hooks Welcome
• useState: greeting
• useEffect: persistent state
• Hooks Flow
• Lifting state
• useState: tic tac toe
• useRef and useEffect: DOM interaction
• useEffect: HTTP requests
• React Hooks Outro

Articles already published as a part of this section:

3. Advanced React Hooks

We’ll look at some of the more advanced hooks and ways they can be used to optimize your components and custom hooks. We’ll also look at several patterns you can follow to make custom hooks that provide great APIs for developers to be productive building applications.

➖ Summary Taken From EpicReact.Dev

• Advanced React Hooks Welcome
• useReducer: simple Counter
• useCallback: custom hooks
• useContext: simple counter
• useLayoutEffect: auto-growing textarea
• useImperativeHandle: scroll to top/bottom
• useDebugValue: useMedia
• Advanced React Hooks Outro

4. Advanced React Patterns

Not only learn great patterns you can use but also the strengths and weaknesses of each, so you know which to reach for to provide your custom hooks and components the flexibility and power you need.

➖ Summary Taken From EpicReact.Dev

• Advanced React Patterns Welcome
• Context Module Functions
• Compound Components
• Flexible Compound Components
• Prop Collections and Getters
• State Reducer
• Control Props
• Advanced React Patterns Outro

5. React Performance

Learn everything you need to diagnose, profile, and fix performance problems in your React application using the Browser Performance Profiler, React DevTools Profiler, and proven React optimization techniques.

➖ Summary Taken From EpicReact.Dev

• React Performace Welcome
• Code Splitting
• useMemo for Expensive Calculations
• React.memo for Reducing re-renders
• Window Large Lists with react-virtual
• Optimize Context Value
• Fix Perf Death by a Thousand Cuts
• Production Performance Monitoring
• React Performance Outro

6. Testing React Apps

In this hands-on workshop you'll learn everything you need to test React components and applications with ease and get the knowledge you need to ship your applications with confidence.

➖ Summary Taken From EpicReact.Dev

• Testing React Apps Welcome
• Simple Test with ReactDOM
• Simple Test with React Testing Library
• Avoid Implementation Details
• Form Testing
• Mocking HTTP Requests
• Mocking Browser APIs and Modules
• Context and Custom Render Method
• Testing Custom Hooks
• Testing React Apps Outro

7. React Suspense

Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

➖ Summary Taken From EpicReact.Dev

• React Suspense Welcome
• Concurrent Mode
• Simple Data-Fetching
• Render as You Fetch
• useTransition
• Cache Resources
• Suspense Image
• Suspense with a Custom Hook
• Coordinate Suspending Components with SuspenseList
• React Suspense Outro

8. Building an Epic React App

The React and JavaScript ecosystem is full of tools and libraries to help you build your applications. In this (huge) workshop we’ll build an application from scratch using widely supported and proven tools and techniques. We’ll cover everything about building frontend React applications, from the absolute basics to the tricky parts you'll run into building real-world React apps and how to create great abstractions.

➖ Summary Taken From EpicReact.Dev

• Build an Epic React App Welcome
• Walkthrough of Project Setup
• Render a React App
• Add Styles
• Make HTTP Requests
• Authentication
• Routing
• Cache Management
• Context
• Compound Components
• Performance
• Render as You Fetch
• Unit Testing
• Testing Hooks and Components
• Integration Testing
• E2E Testing
• Build an Epic React App Outro

I previously wrote an article based on the first workshop (React Fundaments). It was received quite well. But many people were unable to go through it as it is too long. That's why I will be republishing that article too as a part of this series. I will be dividing it into multiple articles this time.

What's Next

In my next article, I will explain the javascript concepts that you need to get familiar with before you deep dive into React. Subscribe to my blog if you don't want to miss the next article in this series.

Until Next Time 👋

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on twitter @pbteja1998.

The next article in this series is already live. Click on the link below👇

This article is HEAVILY based on React Fundamentals workshop by Kent C Dodds which will also be a part of Epic React course soon to be released. If you are more like a learning by doing type of person similar to me, head over to the React Fundamentals repo and follow the instructions in the README. This article is more or less a compilation of things in that repo with my own explanations. I will add some more things to this article in the future based on feedback.

Table of Contents

• Basic JavaScript-rendered Hello World
• Intro to raw React APIs
  • React.createElement()
• Using JSX
  • Interpolation in JSX
  • Conditionals and Loops
• Creating custom components
  • PropTypes
  • React Fragments
• Styling
  • Inline CSS
  • Regular CSS
• Forms
  • Using Refs

Basic JavaScript-rendered Hello World

Let's see how to render Hello World using basic javascript.

My HTML contains a single div with id as root

<div id='root'></div>

Now, I want to add <div class='container'>Hello World</div> to that root div.

We can do that using javascript's document API. Let's see how

// Fetching the root div element
const rootElement = document.getElementById('root')

// Creating a new div as per our requirements
const divElement = document.createElement('div')
divElement.textContent = 'Hello World'
divElement.className = 'container'

// Appending newly created div element to the root element.
rootElement.append(divElement)

What we are doing here is very simple.

1. Get a reference to the actual DOM root element
2. Create a new div element using document.createElement and then set its class and textContent
3. Append this newly created element to the root div element.

This produces the following HTML markup.

<div id='root'>
    <div class='container'>Hello World</div>
</div>

Intro to raw React APIs

Now let's try to use React's raw APIs to create markup that we need instead of (vanilla) javascript.

We need two important APIs to achieve our task. In vanilla javascript. they are:

document.createElement()
rootElement.append(domElement)

The React's equivalent of these two APIs are:

React.createElement()
ReactDOM.render(reactElement, rootElement)

Let's see React.createElement() in more detail.

React.createElement()

This accepts three parameters

1. Component or Tag to use to create the element
2. Props for the component
3. Children

The API looks like React.createElement(component, props, ...children)

So, to create an element like <div class='container'>Hello World</div>, you would do

React.createElement('div', { className: 'container' }, 'Hello World')

Our HTML will have

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

Now, to append <div class='container'>Hello World</div> to the root element using React, we do:

const rootElement = document.getElementById('root')

const divElement = React.createElement('div', {className: 'container'}, 'Hello World')

ReactDOM.render(divElement, rootElement)

Can you see how similar the React's API is to the normal vanilla js document API?

Note that, you can even create nested elements using this.

For example, let's try to create the following markup.

<div class='container'>
    <span>Hello</span>
    <span>World</span>
</div>

To create the above markup

const rootElement = document.getElementById('root')

const helloElement = React.createElement('span', null, 'Hello')
const worldElement = React.createElement('span', null, 'World')
const divElement = React.createElement('div', {className: 'container'}, helloElement, worldElement)

ReactDOM.render(divElement, rootElement)

You can even use a special children prop to add the children like the following

React.createElement('div', {className: 'container', children: [helloElement, worldElement]})

The above code is same as the below code

React.createElement('div', {className: 'container'}, helloElement, worldElement)

Using JSX

If you have already been using React or saw the React code any time, you most probably would not have seen React.createElement being used. Instead, you might have seen some code that looks similar to HTML. Let's see what it is.

JSX is HTML-like syntactic sugar on top of raw React APIs.

Let's see an example.

const divElement = <div id='container'>Hello World</div>

The above code is equivalent to

const divElement = React.createElement('div', {id: 'container'}, 'Hello World')

But JSX is not a valid javascript code, so we use a compiler called Babel to convert JSX code to its corresponding React.createElement code.

Now, let's see how easy it is to create the following markup using JSX.

<div class='container'>
    <span>Hello</span>
    <span>World</span>
</div>

const rootElement = document.getElementById('root')

const divElement = <div className='container'><span>Hello</span><span>World</span></div>

ReactDOM.render(divElement, rootElement)

Note that there are some subtle differences between JSX and HTML.

For example, in HTML to add class to an element, we add it like class='container', whereas in JSX, we need to write className='container'.

There are some other differences when using JSX which I will explain later in the post.

Interpolation in JSX

Since JSX is written in javascript itself, there are some very interesting things which you can do. One of those is using JSX interpolation. It basically gives us the ability to use javascript inside of JSX. Whenever you do interpolation, you would surround it with { and }. This tells the Babel compiler that interpolation is being used here.

For example, take the following code

const divElement = <div className='container'>Hello World</div>

Now, you want the class name and text content to be dynamic, you can do something like

const divClassName = 'container'
const divTextContent = 'Hello World'

const divElement = <div className={divClassName}>{divTextContent}</div>

Can you see the flexibility that interpolation gives us?

Conditionals and Loops

You can even add conditionals and loops in JSX

{ condition ? <div>Hello World</div> : <div>Goodbye World</div> }

As you can see above, to use conditionals in JSX, you would make use of the tertiary operator.

{items.map((item) => <div key={item.id}>{item.title}</div>)}

To use loops, you will use the map function.

You can even use template literals in JSX like

const element = <div id={`item-${itemId}`}>{itemContent}</div>

To learn more about JSX, head over to JSX in Depth - React's official docs

Creating custom components

Consider the following JSX code

<div className='container'>
  <div className='message'>Hello World</div>
  <div className='message'>Goodbye World</div>
</div>

Here you can see the code <div className='message'></div> is duplicated at two places.

To avoid duplication, the simplest thing we can do is to create a function and then call it instead.

function message(text) {
    return <div className='message'>{text}</div>
}

<div className='container'>
    {message('Hello World')}
    {message('Goodbye World')}
</div>

Let's refactor this a bit.

function message({children}) {
    return <div className='message'>{children}</div>
}

<div className='container'>
    {message({children: 'Hello World'})}
    {message({children: 'Goodbye World'})}
</div>

Let's refactor this even more to use React.createElement

function message({children}) {
    return <div className='message'>{children}</div>
}

<div className='container'>
    {React.createElement(message, null, 'Hello World')}
    {React.createElement(message, null, 'Goodbye World')}
</div>

Previously in all the examples that we have seen, the first argument of React.createElement() is a string like 'span' or 'div'.

But React.createElement also accepts a function that returns something renderable like JSX, some string, number etc.

That's why the above code works.

Now, let's convert the above code to JSX

function message({children}) {
    return <div className='message'>{children}</div>
}

<div className='container'>
    <message>Hello World</message>
    <message>Goodbye World</message>
</div>

The above code seems to be perfect, right? Actually it's not. The above code will not work as intended. The reason being how babel compiles the JSX code to it's corresponding React.createElement() code.

<message /> is compiled by babel to React.createElement('message'). But what we want is React.createElement(message). In the first case, the first argument is a string, in the second case, it's a function.

For the babel to convert it into what we needed, we have to make the message function name uppercase.

function Message({children}) {
    return <div className='message'>{children}</div>
}

<div className='container'>
    <Message>Hello World</Message>
    <Message>Goodbye World</Message>
</div>

Now, this <Message>Hello World</Message> will be compiled to React.createElement(Message, {children: 'Hello World'}), which is exactly what we needed.

Check the below examples to see how Babel compiles each of the JSX formats.

So, we can see that the component name needs to be UpperCamelCased for it to work as intended.

PropTypes

Let's slightly change the previous message component so that it accepts name prop.

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

<Message name='foo' />
<Message />

This produces

Hi, your name is foo.
Hi, your name is .

This doesn't look good. Does it? So what if there is a way we can enforce that the name needs to be passed and it needs to be a string.

Luckily, React gives us a way to do that using PropTypes. Let's create a PropType to enforce the type of name to be string.

const PropTypes = {
    string(props, propName, componentName) {
        if (typeof props[propName] !== 'string') {
            return new Error(`In component ${componentName}, ${propName} needs to be a string, but it was of type ${typeof props[propName]}`)
        }
    },
}

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

Message.propTypes = {
    name: PropTypes.string,
}

Now every time you pass anything other than string for name prop, it throws an error.

Since cases like these are so common, the React team developed a library called prop-types which you can use in a similar way - PropTypes.string.isRequired. Check out the repo for more details.

Note that PropTypes will be disabled in a production environment for performance reasons.

React Fragments

<div id='root'></div>

Let's consider the following use case. You have to add <span>Hello</span> and <span>World</span> to the rootElement using React.

In the end, the markup should look like

<div id='root'>
    <span>Hello</span>
    <span>World</span>
</div>

Let's see if we can do this.

const rootElement = document.getElementById('root')

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

ReactDOM.render(?????, rootElement)

Now, what should be in the place of ????? in the last line. It can neither be elementOne nor elementTwo, because we want both of them to be rendered (not one). But ReactDOM.render() takes only one react element as an argument and then appends it to rootElement.

One way to achieve this is if we can wrap both of the elements in a new element.

const rootElement = document.getElementById('root')

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

const combinedElement = React.createElement('div', null, elementOne, elementTwo)

ReactDOM.render(combinedElement, rootElement)

The above code may look fine, but it produces different HTML than what we needed.

<div id='root'>
    <div>
        <span>Hello</span>
        <span>World</span>
    </div>
</div>

This is the reason why you can't do something like the following in your code.

function Message() {
    return <span>Hello</span><span>World</span>
}

Because there is no way for babel to be able to convert this to a single React.createElement()

React Fragments are introduced in React v16.2.0 exactly to solve this problem. Now you can return multiple elements by just wrapping them around with React.Fragment.

For example,

function Message() {
    return (
        <React.Fragment>
            <span>Hello</span>
            <span>World</span>
        </React.Fragment>
    )
}

React will ignore this React.Fragment when rendering.

So the previous problem can be solved now in the following way.

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

const combinedElement = React.createElement(React.Fragment, null, elementOne, elementTwo)

ReactDOM.render(combinedElement, rootElement)

There is a short hand representation for React.Fragment.

Instead of writing <React.Fragment>{childrent}</React.Fragment>, you can write something like <>{children}</>. Both yield absolutely same result.

Styling

There are two general ways to style React components.

1. Inline CSS
2. Regular CSS

Let's see inline CSS first

Inline CSS

In normal HTML too, you can add inline styles to your HTML elements by adding your styles as a string to style attribute.

<div style="color: red; font-style: italic;">Red Italic Text</div>

In React also you would add your styles to style prop, but instead of a string, style prop accepts an object.

For example,

const elementStyle = {
    color: 'red',
    fontStyle: 'italic'
}

<div style={elementStyle}>Red Italic Text</div>

You can even inline elementStyle if you like

<div style={{ color: 'red', fontStyle: 'italic' }}>
    Red Italic Text
</div>

Another difference with styles in React from that of HTML is property names needs to be camelCased instead of kebab-cased. For example, in React styles, background-color will become backgroundColor, font-style will become fontStyle, etc.

Also the value of the style property is always string or number(since style needs to be a proper javascript object, things like #fff or 20px are not proper javascript values). So you cannot write something like fontSize: 20px, instead you need to write fontSize: '20px'. Similarly you cannot write color: #fff, you need to write color: '#fff'.

Regular CSS

Using regular css is straight forward. You just add the classNames and ids that you need and then style your elements using those accrodingly.

Forms

Consider the following form

<form>
  <div>
    <label htmlFor="usernameId">Username:</label>
    <input id="usernameId" type="text" name="username" />
  </div>
  <button type="submit">Submit</button>
</form>

Now handling forms in React is very similar to how we do in normal javascript. You just define a submit handler and then assign it to the onSubmit event of the form.

function handleSubmit(event) {
    event.preventDefault()
    // You can get the value of username in one of the following ways.
    // event.target.elements[0].value
    // event.target.elements.usernameId.value
    // event.target.elements.username.value
   // Do whatever you want with the username
}

Using Refs

There is another way to get the reference to an element in React - using Refs. Refs are special objects in react that stays consistent between rerenders of the component and also changing it will not cause the component to rerender.

You can create a Ref using React.useRef()

const myRef = React.useRef()

Refs will have a current property which contains the value of ref. If you assign a ref to a React element, ref.current will automatically have the reference to the object.

For example

<input ref={myRef} />

Now myRef.current will have reference to that input element.

Let's make use of ref to get the username in our form.

function UsernameForm() {
  const usernameInputRef = React.useRef()

  function handleSubmit(event) {
    event.preventDefault()
    // usernameInputRef.current.value will have the value of the input
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input id="usernameInput" type="text" ref={usernameInputRef} />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

Go through useRef - official docs to learn more about refs.

There is more to learn about React Forms. Go through official docs to learn more.

This article is HEAVILY based on React Fundamentals workshop by Kent C Dodds which will also be a part of Epic React course soon to be released. If you are more like a learning by doing type of person similar to me, head over to the React Fundamentals repo and follow the instructions in the README. This article is more or less a compilation of things in that repo with my own explanations. I will add some more things to this article in the future based on the feedback that I receive.

Did you learn anything new from this article? Tell me in the comments.

Links and References

• React Fundamental Workshop by Kent C Dodds
• Epic React
• Beginner's Guide to React
• React Documentation
• React Without JSX
• Introducing JSX
• JSX in Depth
• Typechecking with PropTypes
• React Fragments
• Inline Styles
• Styling and CSS
• Forms
• useRef

I have always wanted to create my own URL shortener and use it to shorten all my links. But I always felt like creating it would take a lot of effort, although I never actually gave much thought to it.

But I came across a tweet containing a link to the video which showed how to create a simple URL shortener. This blog post is my attempt to share that approach with you.

Before we see how to create your own URL shortener, let's see why having a URL shortener can be useful.

If you are already convinced that having your own URL shortener can be useful, you can skip this section and directly jump to Creating Your Own URL Shortener section.

Benefits of Shortening Your URLs

It masks the original links.

Masking the URL has many advantages

For example, take this URL - hashnode.com/series/how-i-made-a-markdown-editor-with-ability-to-embed-youtube-videos-codepens-etc-cke6g1y2x00afxms17vp30803

This URL is the link to the series that I am writing on Hashnode where I am developing a full-featured Markdown editor from scratch. But, the URL is so long and difficult to read and share on platforms like twitter.

Instead, wouldn't it be nice to have a simple short URL like pbt.im/markdown-series which redirects to the above URL. It's short, crisp, readable, and also equally conveys what one can expect in that link.

Sharing affiliate links.

Other places where URL shortening can be useful is when you want to share or brand an ugly affiliate link, or when the domain of the link that you want to share is very long.

Social Media Profiles

Take a look at some of the shortened links that I frequently use.

Sharing the above links is so easy. You don't even have to copy them. You can just type them out yourself. They are short, consistent, readable and can easily be remembered.

Links can change

Another disadvantage of sharing normal links is that the links can potentially change in the future.

If they do change, you can't hunt down every post and every place where you posted or shared that link and then update it. And it might not always be feasible to redirect the old URL to a new URL.

Shortened links can come in very handy in this situation. The shortened link that you share need not change ever. Whereas the URL that the short link should redirect to can change as you wish.

Bookmarks

I even started using my URL shortener to create bookmarks. I added a short URL(/bookmarks) that redirects to a GitHub page which contains all my other short URLs. Then whenever I want to bookmark a very useful URL, instead of bookmarking it normally, I started shortening it, which will automatically add it to my list of short URLs (which means it will also be available at /bookmarks)

Now that we saw some of the reasons of how shortened URLs can help us, let's see how to create one yourself.

Creating Your Own URL Shortener

This is the tweet that inspired me to explore and create a URL shortener for shortening my links. I finally ended up using the approach that Kent suggested. I will be explaining the same in this article.

Netlify Redirects

Before we jump into the actual content, let's see what Netlify redirects are. Netlify gives us an easy way to handle redirects for any site that is hosted on the platform. All you have to do is create a _redirects file and then add the redirect rules in that file.

In a _redirects file, each redirect rule must be listed on a separate line, with the original path followed by the new path or URL. Any line beginning with # will be ignored as a comment.

Here is an example:

# Redirects from what the browser requests to what we serve
/home              /
/blog/my-post.php  /blog/my-post
/news              /blog
/cuties            https://www.petsofnetlify.com

This is the bare minimum that you need to create your own URL shortener.

• Create an empty project with a single file called _redirects.
• Add your short and complete URLs there.
• Deploy that project to Netlify.

You now have your own simple URL shortener.

Every time you want to add a new URL, you can just add it in the _redirects file and then deploy it. If using this workflow is good enough for you, you can stop here and use it.

But Kent went a step further and created a package called netlify-shortener which simplifies the workflow of creating short URLs even further.

Follow these steps to start using netlify-shortener and set up your own URL shortener

Step 1: Create an empty project

mkdir url-shortener
cd url-shortener

Step 2: Initialize it as npm project

npm init -y

Step 3: Create a _redirects file and add the following content.

# fallback
/*       https://your-website.com

your-website.com will act as a fallback when the URL doesn't match any of the available short URLs. Replace it with whatever URL you want to have as a fallback.

Step 4: Add homepage and shorten script to your package.json (Add your own short domain URL to the homepage)

{
  "homepage": "https://pbt.im",
  "scripts": {
    "shorten": "netlify-shortener"
  }
}

Now, you can run the following commands.

# Formats your _redirects file
npm run shorten 

# Generates a short code and adds it for you
npm run shorten https://yahoo.com

# Adds gh as a short URL for https://github.com
npm run shorten https://github.com gh

The npm run shorten command

• Generates a shortcode automatically if it is not provided.
• Validates your URL.
• Automatically check for URL collisions and throws an error if there is a collision.
• Adds the URL to the top of the _redirects file and reformats the file properly.
• Pulls the changes from remote, adds the new shortened URL, commits the code, and then pushes the commit to the remote again.
• Automatically copies the short URL to your clipboard.

You don't even have to provide https://, by default it assumes that the original link is https://

You can even add it as a global command in your shell using these instructions

My workflow for shortening a URL

Open the terminal and simply write shorten original-URL short-slug.

For example, to shorten the link to my Github profile, I will run the following command

shorten github.com/pbteja1998 gh

TL; DR

• Checkout netlify-shortener
• Checkout demo at kcd.im/shortener

If you have any more questions or want to explore more about this, go to netlify-shortener. The instructions that are in there are very clear, There is also a youtube video explaining this process at kcd.im/shortener

Which URL do you prefer when sharing in social media or with others? Short URL or the original one? Tell me in the comments.

Links and References:

• Netlify Redirects
• Netlify Shortener
• Watch a Demo
• Example Repo

Look at the picture above and see if you can tell that they are different shades of red color? You can, right?

Now, look at their hex and RGB values below, now can you tell the same thing by looking at these values? Or can you tell if there is any relationship between these three colors by just looking at their hex or RGB values?

This is one of the many problems that HSL coloring format fixes.

RGB Color Format - What is it?

RGB colors and HEX color formats are designed by keeping the computer in mind like add some x parts of red, and y parts of green and z parts of blue, the resulting color you get is the color (x, y, z). But as humans, we will not be able to tell the resultant color that we will get with (x, y, z).

HSL System

HSL color format represents the color based on the attributes that the human eye perceives naturally - Hue, Saturation, and Lightness.

Let's look at each one of these below.

Hue

To understand what hue is, you need to know about the color wheel. Look at the picture below.

Each degree in the above color wheel represents a different color. For example, 0° is red, 120° is green, 240° is blue.

Hue is the position of the color on this color wheel. For example, if we want a shade of red color, we will select hue as 0 which is equivalent to selecting color at 0°.

This is the attribute in HSL that helps us to identify that the following three colors are red even though they are different.

Saturation

Saturation tells us how clear a color looks. For example, 100% saturation is the most intense color that we can get for a specific hue, whereas 0% saturation implies that the color is grey.

If the saturation is 0%, then the color will not change even though the hue changes.