How To Create Reactjs Hooks

Introduction

In this article, we will learn to create a new ReactJs project using npm new command, After that, we will create a simple Hooks Function using useState and reduce example in Visual Studio code.

Steps to follow,

Now we will start by creating a new project. 

Step 1

Create a React project setup using the below commands or however you create your React app. 

npx create-react-app projectname 

Example,

npx create-react-app sample-hook 

Step 2 - Introduction Hooks

React Hooks are a new addition in React 16.8 that lets you use state and other React features without writing a class component. Hooks are functions that let you “hook into” in other words React state and lifecycle features from function components. 

Step 3

Now, we will import the above component into the app.js file.

import React, { useReducer, useState, useContext, createContext } from 'react'; 
import { render } from 'react-dom'; 
import Hello from './Hello'; 

React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components. We’ll look at the built-in Hooks first. 

const [value, setState] = useState("Mani") 

Step 4

Now we will create App.js File then we initialState the name  

const initialState = { name: "Hooks" } 

And now we will create a Form and handling onchange submit Method using updating the Name

return ( 
 <Context.Provider value={"Satheesh"}> 
   <form onSubmit={e => { 
       e.preventDefault() 
       dispatch(set(value)) 
      }}> 
        <Hello {...state} /> 
        <Context.Consumer> 
          {contextValue => <p>my name is {contextValue}</p>} 
        </Context.Consumer> 
        <input value={value} onChange={({ target: { value } }) => setState(value)} /> 
        <input type="submit" value="Update Name" /> 
     </form> 
  </Context.Provider> 
)

Src/App.js  

import React, { useReducer, useState, useContext, createContext } from 'react'; 
import { render } from 'react-dom'; 
import Hello from './Hello'; 
const Actions = { 
  Update: "SET" 
} 
const set = name => ({ type: Actions.Update, payload: { name } }) 
const reducer = (state, { type, payload }) => { 
  switch (type) { 
    case Actions.Update: 
      return payload 
    default: 
      return state 
  } 
} 
const Context = createContext(null); 
// Hooks can only be called inside the body of a function component. 
// const value = useContext(Context) 
const initialState = { name: "Hooks" } 
const App = () => { 
  const [value, setState] = useState("Mani") 
  const [state, dispatch] = useReducer(reducer, initialState) 
  return ( 
    <Context.Provider value={"Satheesh"}> 
      <form onSubmit={e => { 
        e.preventDefault() 
        dispatch(set(value)) 
      }}> 
        <Hello {...state} /> 
        <Context.Consumer> 
          {contextValue => <p>my name is {contextValue}</p>} 
        </Context.Consumer> 
        <input value={value} onChange={({ target: { value } }) => setState(value)} /> 
        <input type="submit" value="Update Name" /> 
      </form> 
    </Context.Provider> 
  ) 
} 
export default App; 

Now we will create Hello.js File then we implement the name. 

Src/Hello.js

import React from 'react'; 
export default ({ name }) => <h1>HI {name}!</h1>; 

Step 5

Now we will run the application. 

npm run start 

On successful execution of the above command, it will show in the browser, 

Summary 

In this article, we learned how to implement Hooks in a ReactJS application. first of all create a new project in the command prompt then we can create a Form and create an input name Field then we can be using Hook to update the Name. finally showing the updated value.