Steps to Create a React Application

Step 1: Open the terminal and create a react app.

npx create-react-app my-first-app

Step 2: Change the directory to that folder by executing the command.

cd my-first-app

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: This example demonstrates parsing json data from data.json file and display as a table on the UI.

Javascript

// Filename - App.js
 
import JsonDataDisplay from "./MyPractice/GeekTable";
function App() {
    return (
        <div className="App">
            <h1>Hello Geeks!!!</h1>
            <JsonDataDisplay />
        </div>
    );
}
 
export default App;

Javascript

// Filename - /MyPractice/GeekTable.jsx
 
import React from 'react'
import JsonData from './data.json'
 function JsonDataDisplay(){
    const DisplayData=JsonData.map(
        (info)=>{
            return(
                <tr>
                    <td>{info.id}</td>
                    <td>{info.name}</td>
                    <td>{info.city}</td>
                </tr>
            )
        }
    )
 
    return(
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                    <th>Sr.NO</th>
                    <th>Name</th>
                    <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    {DisplayData}
                </tbody>
            </table>
        </div>
    )
 }
 
 export default JsonDataDisplay;

Javascript

// File Name: /MyPractice/data.json
[
    {
        "id":1,
        "name":"Akshit",
        "city":"Moradabad"
    },   
    {
        "id":2,
        "name":"Nikita",
        "city":"Lucknow"
    },
    {
        "id":3,
        "name":"Deeksha",
        "city":"Noida"
    },
    {
        "id":4,
        "name":"Ritesh",
        "city":"Delhi"
    },
    {
        "id":5,
        "name":"Somya",
        "city":"Gurugram"
    },
    {
        "id":6,
        "name":"Eshika",
        "city":"Mumbai"
    },
    {
        "id":7,
        "name":"Kalpana",
        "city":"Rampur"
    },
    {
        "id":8,
        "name":"Parul",
        "city":"Chandigarh"
    },
    {
        "id":9,
        "name":"Himani",
        "city":"Dehradun"
    }
]

Step to run the application: Open the terminal and type the following command.

npm start

Output: This output will be visible on the http://localhost:3000

How to parse JSON Data into React Table Component ?

In React parsing JSON Data into React Table Component is a common task to represent data by building UI components.

Tags:

#Blogathon-2021 #React-Questions #Blogathon #ReactJS #Web Technologies

Approach:

Steps to Create a React Application

Javascript

Javascript

Javascript

How to parse JSON Data into React Table Component ?

Similar Reads