DEV Community: Bhanu Teja Pachipulusu

Next.js Starter With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint

Bhanu Teja Pachipulusu — Sun, 22 Nov 2020 08:09:13 +0000

Hello World 👋

Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily.

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.

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

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

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:

30+ Git Commands That I Frequently Use

Bhanu Teja Pachipulusu — Sat, 14 Nov 2020 22:47:07 +0000

Hello World 👋

In this article, I will list out all the git commands that I use very frequently. This is not in any way a complete list, just the commands that I use very often. This is intended to be used as a quick reference to perform an action that you want.

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 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. Checkout the series page for more info.

Until Next Time 👋

If you liked this article, check out

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

The Lifecycle of React Hooks Component

Bhanu Teja Pachipulusu — Fri, 13 Nov 2020 08:06:36 +0000

Hello World 👋

In this article, we will see the order in which different useEffect callbacks and cleanups happen. We will also see how it differs when the app mounts, unmounts, updates.

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:

Mount
Update
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:

Run lazy initializers
- Lazy initializers are functions that we pass to useState and useReducer. Those functions will be run only in this mount stage.
Render
- This is where all the useState hooks and other things are present.
React updates DOM
- Updating of DOM is not same as the browser painting the screen.
Run Layout Effects
- We will see layout effects in future articles.
Browser paints the screen
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.

useEffect with no dependencies
useEffect with empty dependencies
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:

App is mounted
Child is mounted by updating the state in App
Child is updated by updating the count in Child
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

✅ Run lazy initializers of App
✅ Render of App
✅ React updates DOM of App
❌ Cleanup layout effects of App
✅ Run Layout Effects of App
✅ Browser paints screen of App
❌ Cleanup Effects of App
✅ Run Effects of App

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

App: render start
- App rendering starts.
App: useState(() => false)
- App lazy initializer is getting executed.
App: showChild = false
- App renders.
App: render end
- App rendering finishes.
App: useEffect(() => {})
- App useEffect with no dependecies is being executed.
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.
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

✅ Run lazy initializers of Child
✅ Render of Child
✅ React updates DOM of Child
❌ Cleanup layout effects of Child
✅ Run Layout Effects of Child
✅ Browser paints screen of Child
❌ Cleanup Effects of Child
✅ Run Effects of Child

And for App,

❌ Run lazy initializers of App
✅ Render of App
✅ React updates DOM of App
✅ Cleanup layout effects of App
✅ Run Layout Effects of App
✅ Browser paints screen of App
✅ Cleanup Effects of App
✅ Run Effects of App

We will see the following console logs.

App: render start
- App rendering starts.
- Lazy initializer will NOT be run now. It runs only on the initial mount.
App: showChild = true
- App renders.
App: render end
- App rendering finishes.
Child: render start
- Child is mounted and Child starts getting rendered.
Child: useState(() => 0)
- Child lazy initializer is getting executed since this is the mount phase of Child.
Child: count = 0
- Child renders.
Child: render end .
- Child rendering finishes.
App: useEffect(() => {}) cleanup
- App useEffect with no dependencies cleanup.
App: useEffect(() => {}, [showChild]) cleanup
- App useEffect with showChild dependencies cleanup.
- This cleanup happens because showChild is getting updated here.
Child: useEffect(() => {})
- Child useEffect with no dependencies is being executed.
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.
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.
App: useEffect(() => {})
- App useEffect with no dependencies is being executed.
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

❌ Run lazy initializers of Child
✅ Render of Child
✅ React updates DOM of Child
✅ Cleanup layout effects of Child
✅ Run Layout Effects of Child
✅ Browser paints screen of Child
✅ Cleanup Effects of Child
✅ Run Effects of Child

We will see the following console logs

Child: render start
- Child rendering starts.
Child: count = 1
- Child renders
Child: render end
- Child rendering ends.
Child: useEffect(() => {}) cleanup
- Child useEffect with no dependencies cleanup.
Child: useEffect(() => {}, [count]) cleanup
- Child useEffect with count as dependency cleanup.
- This is getting called because count has updated.
Child: useEffect(() => {})
- Child useEffect with no dependencies is being executed.
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

❌ Run lazy initializers of Child
❌ Render of Child
❌ React updates DOM of Child
✅ Cleanup layout effects of Child
❌ Run Layout Effects of Child
❌ Browser paints screen of Child
✅ Cleanup Effects of Child
❌ Run Effects of Child

And for App,

❌ Run lazy initializers of App
✅ Render of App
✅ React updates DOM of App
✅ Cleanup layout effects of App
✅ Run Layout Effects of App
✅ Browser paints screen of App
✅ Cleanup Effects of App
✅ Run Effects of App

We will see the following console logs

App: render start
- App rendering starts.
App: showChild = false
- App renders
App: render end
- App rendering ends
Child: useEffect(() => {}) cleanup
- Child useEffect with no dependencies cleanup
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.
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.
App: useEffect(() => {}) cleanup
- App useEffect with no dependencies clean up
App: useEffect(() => {}, [showChild]) cleanup
- App useEffect with showChild as dependency clean up.
- This is getting called because showChild has updated here.
App: useEffect(() => {})
- App useEffect with no dependencies is getting executed
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

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

3 Simple Steps To Setup Authentication in Next.js

Bhanu Teja Pachipulusu — Thu, 05 Nov 2020 13:44:12 +0000

Hello World 👋

In this tutorial, we will see how to easily set up authentication for Next.js apps.

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/callback 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:

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

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

Easily Detect Outside Click Using useRef Hook in React

Bhanu Teja Pachipulusu — Tue, 03 Nov 2020 05:01:20 +0000

Hello World 👋

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.

We need a reference to the div with id modal.
We need to detect a click.
We need to see if the click happened outside of the modal div.
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.

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

You can also follow me on Twitter at @pbteja1998.

How to Create a Reusable LocalStorage Hook

Bhanu Teja Pachipulusu — Thu, 29 Oct 2020 18:28:31 +0000

Hello World 👋

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:

React Hooks: Managing State With useState Hook

Bhanu Teja Pachipulusu — Mon, 26 Oct 2020 20:26:02 +0000

Hello World 👋

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 👋

React Fundamentals: Styling And Handling Forms

Bhanu Teja Pachipulusu — Thu, 22 Oct 2020 08:55:52 +0000

Hello World 👋

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.

The value of the state
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 👋

React Fundamentals: Creating Custom Components

Bhanu Teja Pachipulusu — Wed, 21 Oct 2020 04:56:32 +0000

Hello World 👋

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.

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.

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.

JSX	React.createElement()
`<Capitalized />`	`React.createElement(Capitalized)`
`<property.access />`	`React.createElement(property.access)`
`<Property.Access />`	`React.createElement(Property.Access)`
`<Property['Access'] />`	`SyntaxError`
`<lowercase />`	`React.createElement('lowercase')`
`<kebab-case />`	`React.createElement('kebab-case')`
`<Upper-Kebab-Case />`	`React.createElement('Upper-Kebab-Case')`
`<Upper_Snake_Case />`	`React.createElement(Upper_Snake_Case)`
`<lower_snake_case />`	`React.createElement('lower_snake_case')`

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 👋

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

Bhanu Teja Pachipulusu — Sun, 18 Oct 2020 10:23:36 +0000

Hello World 👋

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.

My Review of Kent C. Dodds's EpicReact.Dev

Until Next Time 👋

You might also like the following articles that I wrote:

React Fundamentals: Understanding JSX

Bhanu Teja Pachipulusu — Fri, 16 Oct 2020 08:53:01 +0000

Originally published at blog.bhanuteja.dev.

Hello World 👋

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.

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.

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:

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 blog. 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

Introduction to React RAW APIs

Bhanu Teja Pachipulusu — Mon, 12 Oct 2020 19:01:24 +0000

Hello World 👋

Welcome to the third article of the My Review of Kent C. Dodd'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.

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.

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.

Get the element with id as root from DOM.
Create a new DOM element and then set its properties.
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.

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.
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.
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 👋

You might also like the following articles:

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.

DEV Community: Bhanu Teja Pachipulusu

Next.js Starter With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint

Hello World 👋

What all does this starter template has?

1. Use Template

2. Create Repo

3. Deploy to Vercel

3.1. Import Project

3.2. Import Git Repo

3.3.

3.4. Create Vercel Project

3.5. Successful Deployment

3.6. Dashboard

3.7. Web Application Demo

4. Create a database

4.1. Create a new Heroku app

4.2. Go to Resources Tab and add Heroku Postgres addon

4.3.

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

4.5. View Credentials

4.6. Copy Database URI

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

Until Next Time 👋

Links and References:

30+ Git Commands That I Frequently Use

Hello World 👋

git clone

git init

git add

git commit

git status

git log

git diff

git remote

git checkout

git push

git branch

git clean

git merge

git pull

git reset

What's Next?

Until Next Time 👋

The Lifecycle of React Hooks Component

Hello World 👋

Mount - Hooks Flow

Update - Hooks Flow

Unmount - Hooks Flow

Types of useEffect callbacks

1. useEffect with no dependencies

2. useEffect with empty dependencies

3. useEffect with some dependencies

Example

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

Links and References:

What's Next?

Until Next Time 👋

3 Simple Steps To Setup Authentication in Next.js

Hello World 👋

Step 1. Create Next.js application

Step 2: Install NextAuth and SQLite packages

Step 3: Setup NextAuth API Route

Links and References:

What's Next?

Until Next Time 👋

Easily Detect Outside Click Using useRef Hook in React

Hello World 👋

useRef

Detect Click Outside

Step 1: Getting reference to Modal

Step 2. Add a click event listener

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

4.2. Go to Resources Tab and add `Heroku Postgres` addon

Create `NEXTAUTH_URL` variable

Using `prop-types` Package