Using React Hooks in a Node.js App

Photo by Lautaro Andreani on Unsplash

Using React Hooks in a Node.js App

Ripplestacks's photo
Ripplestacks
·

3 min read

React Hooks are a powerful feature of the React library that allows you to use state and other React features in functional components. While React Hooks are primarily used in client-side web applications, they can also be used in Node.js applications to simplify code and make it more modular.

In this article, we'll walk through an example of how to use React Hooks in a Node.js app to manage user authentication.

To get started, create a new Node.js app using the following command:

mkdir myapp
cd myapp
npm init -y

This will create a new directory called myapp with a package.json file. Next, install the necessary dependencies:

npm install express react react-dom react-router-dom

This installs the Express web framework and the necessary React libraries.

Next, create a new file called server.js in the root directory of your app. This file will contain the code for our Node.js server:

const express = require('express');
const app = express();

app.use(express.json());
app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

This sets up a basic Express server that listens on port 3000 and serves static files from the public directory. We'll use this directory to serve our React components.

Next, create a new directory called public in the root directory of your app. In this directory, create a new file called index.html. This file will contain the HTML code for our React app:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

This sets up a basic HTML page with a div element for our React app and a script tag to load our bundled JavaScript file.

Next, create a new file called index.js in the public directory. This file will contain the code for our React app:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={handleLogout}>Log Out</button>
      ) : (
        <button onClick={handleLogin}>Log In</button>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

This sets up a basic React component with a button that allows the user to log in and out. We use the useState hook to manage the state of whether the user is logged in or not.

Finally, we need to bundle our React app using a tool like webpack or Parcel. For this example, we'll use Parcel. Install Parcel using the following command:

npm install parcel-bundler

Next, create a new file called package.json in the public directory with the following contents:

{
  "name": "myapp",
  "version": "1.0.0",
  "scripts": {
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^2.2.0"
  }
ReactHooksNode.js