CRUD USING REACT HOOKS AND CONTEXT API

React Hooks and Context API are two relatively new features that have been added to React from v16.8 and v16.3 respectively. In this post, I’m going to create an app that can perform CREATE, READ, UPDATE and DELETE utilizing Hooks and Context API together.

REACT HOOKS

This new concept was introduced in v16.8 which is an alternative to classes. The Devs who used React before are familiar with functional components and class components. Many of these features available to classes – such as lifecycle methods and state weren’t available to React until Hooks were introduced. The new Hooks add those class component’s features to functional components. Let’s see an example of functional component and class component.

Functional Components

const ExampleComponent = () => {
  return <div>I'm a simple functional component</div>
}

Class Components

class ExampleComponent extends Component {
  render() {
    return <div>I'm a class component</div>
  }
}

REACT CONTEXT API

The inception of the Context API resolves one of the most talked issues of React – prop drilling which was introduced in v16.3. This is a process of manipulating data from one component to another through layers of nested components.

Now it’s the time to start coding.

Please to be noted, I’m going to use Tailwind CSS to style our app. Let’s bootstrap our project using Create-React-App with the following command:
npx create-react-app hooks_and_context

Make sure you have the latest Node version is installed. This will create a folder hooks_and_context and bootstrap our project. If we have a close look at the package.json and we will see the following:

{
  "name": "hooks_and_context",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Before going into more coding thing we are going to enhance our development environment by installing a few packages.

ESLINT AND PRETTIER

It’s the time we are going to add ESLint and Prettier to make our development environment more friendly. ESLint is a JavaScript linter that will help us find syntax or other errors while we do our code. ESLint can be extended by plugging in pre-defined configs or we can completely configure it by ourselves. Regardless of the OS, I’ll recommend anyone to use VSCode as editor. Going forward I’ll be assuming we are using VSCode.

INSTALL VSCODE PLUGINS

First of all, we need to install ESLint and Prettier – Code formatter plugins for VSCode. And we need to make sure they are enabled.

Now, we need to install the required dependencies for ESLint and Prettier into our project. To do so, please run the following command into the project root:

npm install eslint-config-prettier eslint-plugin-prettier prettier --save

Read the full article here