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.