Employee data display sample project using ReactJS

Here’s a sample project that demonstrates how to display employee data using React:

First, make sure you have Node.js and npm (Node Package Manager) installed on your machine. Then, follow these steps:

  1. Set up a new React project by running the following command in your terminal:

npx create-react-app employee-data-display

Change into the project directory:

cd employee-data-display

cd employee-data-display

  1. Open the project in your preferred code editor.
  2. Create a new file called employees.js in the src directory and add some sample employee data:

export const employees = [
    id: 1,
    name: "John Doe",
    position: "Manager",
    department: "Sales",
    id: 2,
    name: "Jane Smith",
    position: "Developer",
    department: "Engineering",
    id: 3,
    name: "Bob Johnson",
    position: "Designer",
    department: "Marketing",

Replace the contents of src/App.js with the following code:

import React from 'react';
import { employees } from './employees';

function App() {
  return (
      <h1>Employee Data</h1>
          {employees.map((employee) => (
            <tr key={employee.id}>

export default App;

Save the changes and run the project using the following command:

npm start

  1. Open your browser and visit http://localhost:3000 to see the employee data displayed in a table.

That’s it! You’ve created a basic React application that displays employee data. The sample data is imported from employees.js, and then it is mapped over to render each employee’s information in a table.

Feel free to modify the code to fit your specific needs and style the table using CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *