├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── data.json ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.scss ├── components └── App.js ├── index.js ├── local-json └── users.json └── utils └── books.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Steps to clone and run locally 2 | 3 | > git clone https://github.com/akhtarvahid/local-json-react.git 4 | 5 | > cd local-json-react 6 | 7 | > local-json-react> npm i 8 | 9 | > local-json-react> npm start 10 | 11 | 12 | 13 | # Article - 14 | https://medium.com/@akhtarvahid543 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "localjsonreact", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.4.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "axios": "^0.19.2", 10 | "enzyme-adapter-react-16": "^1.15.2", 11 | "node-sass": "^4.14.1", 12 | "react": "^16.12.0", 13 | "react-dom": "^16.12.0", 14 | "react-scripts": "3.4.0", 15 | "uuid": "^8.3.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "userId": 1, 4 | "title": "delectus aut autem" 5 | }, 6 | { 7 | "userId": 2, 8 | "title": "quis ut nam facilis et officia qui" 9 | }, 10 | { 11 | "userId": 3, 12 | "title": "fugiat veniam minus" 13 | }, 14 | { 15 | "userId": 4, 16 | "title": "et porro tempora" 17 | }, 18 | { 19 | "userId": 5, 20 | "title": "laboriosam mollitia et enim quasi adipisci" 21 | } 22 | ] -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akhtarvahid/local-json-react/04dae61707a4d62e3c640a39830b331a70b40540/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | React 12 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background-color: #104c8ecc; 5 | 6 | } 7 | .App { 8 | width: 50%; 9 | color: white; 10 | margin: 0 auto; 11 | .list-row { 12 | margin: 5px 0px; 13 | padding: 3px; 14 | background: #072852ed; 15 | } 16 | hr { 17 | border-top: '1px solid rgb(255 255 255)'; 18 | } 19 | .title-text { 20 | strong { 21 | font-size: 40px; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from "react"; 2 | import axios from "axios"; 3 | import "../App.scss"; 4 | 5 | 6 | // 1st way - from json file inside src 7 | import userData from "../local-json/users.json"; 8 | 9 | // 3rd way - from js file inside src 10 | import { booksArray } from "../utils/books"; 11 | 12 | export default function App() { 13 | const [users, setUsers] = useState([]); 14 | const [books, setBooks] = useState([]); 15 | const [albums, setAlbums] = useState([]); 16 | useEffect(() => { 17 | setUsers(userData); 18 | setBooks(booksArray); 19 | 20 | 21 | //2nd way 22 | axios 23 | .get("./data.json") 24 | .then((res) => setAlbums(res.data)) 25 | .catch(err=>console.log(err)) 26 | },[]); 27 | 28 | return ( 29 |
30 |

Fetched from local

31 |
users(JSON data from json file inside src)
32 | {users && 33 | users?.map(({ name, id }) => ( 34 |
35 | {name} 36 |
37 | ))} 38 |
39 |
books (JSON data from js file inside src)
40 | {books && 41 | books?.map(({ title, id }) => ( 42 |
43 | {title} 44 |
45 | ))} 46 |
47 |
albums (JSON file using react API call(fetch, axios))
48 | {albums && 49 | albums?.map(({ title, userId }) => ( 50 |
51 | {title} 52 |
53 | ))} 54 |
55 | ); 56 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /src/local-json/users.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name": "Leanne Graham", 5 | "username": "Bret", 6 | "email": "Sincere@april.biz" 7 | }, 8 | { 9 | "id": 2, 10 | "name": "Ervin Howell", 11 | "username": "Antonette", 12 | "email": "Shanna@melissa.tv" 13 | }, 14 | { 15 | "id": 3, 16 | "name": "Clementine Bauch", 17 | "username": "Samantha", 18 | "email": "Nathan@yesenia.net" 19 | }, 20 | { 21 | "id": 4, 22 | "name": "Patricia Lebsack", 23 | "username": "Karianne", 24 | "email": "Julianne.OConner@kory.org" 25 | }, 26 | { 27 | "id": 5, 28 | "name": "Chelsey Dietrich", 29 | "username": "Kamren", 30 | "email": "Lucio_Hettinger@annie.ca" 31 | }, 32 | { 33 | "id": 6, 34 | "name": "Mrs. Dennis Schulist", 35 | "username": "Leopoldo_Corkery", 36 | "email": "Karley_Dach@jasper.info" 37 | }, 38 | { 39 | "id": 7, 40 | "name": "Kurtis Weissnat", 41 | "username": "Elwyn.Skiles", 42 | "email": "Telly.Hoeger@billy.biz" 43 | }, 44 | { 45 | "id": 8, 46 | "name": "Nicholas Runolfsdottir V", 47 | "username": "Maxime_Nienow", 48 | "email": "Sherwood@rosamond.me" 49 | }, 50 | { 51 | "id": 9, 52 | "name": "Glenna Reichert", 53 | "username": "Delphine", 54 | "email": "Chaim_McDermott@dana.io" 55 | }, 56 | { 57 | "id": 10, 58 | "name": "Clementina DuBuque", 59 | "username": "Moriah.Stanton", 60 | "email": "Rey.Padberg@karina.biz" 61 | } 62 | ] -------------------------------------------------------------------------------- /src/utils/books.js: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid'; 2 | 3 | export let booksArray = [ 4 | { 5 | id: uuid(), 6 | title: "Sass", 7 | description: "Learn from ", 8 | completed: false 9 | }, 10 | { 11 | id: uuid(), 12 | title: "Node", 13 | description: "Nodejs documentation", 14 | completed: false 15 | }, 16 | { 17 | id: uuid(), 18 | title: "EcmaScript", 19 | description: "Learn from es6.org", 20 | completed: false 21 | }, 22 | { 23 | id: uuid(), 24 | title: "Angular", 25 | description: "One framework Mobile & desktop.", 26 | completed: false 27 | } 28 | ]; --------------------------------------------------------------------------------