Data representation in React:
We have represented the data in two forms as follows:
- Table View
- Card View
Data manipulation
To download the data from "https://finance.yahoo.com/quote/%5EGSPC/history?p=%5EGSPC" link in CSV format. We convert the data from CSV to JSON format through online link 'http://www.convertcsv.com/csv-to-json.htm' and bind the JSON data in the Table and Card View.
Dependencies
We have used the following packages for this sample
- react
- react-dom
- material-table – for rendering in Table view
- @material/react-card – for rendering in Card view
- react-router-dom - for Routing
Table View
We have used React Material UI Table for represent the data in tabular view.
Card View
We have used React Material UI Card for represent the data in Card view.
Run the application:
To use the following command to run the application as :
- npm start
Note: Need to install the package in first time run the application . To use the following command for install react packages as :
- npm install or yarn install