Fecovanje podataka u React aplikaciji

Tvoj primer je bio zanimljiv gde sam video strukturu kako to radi i u ovom delu napravio
sam da mogu da procitam podatke iz json faila. Za sada sam napravio da mogu da
procitam podatke iz json faila sledece ce biti ostalo: POST, PUT, DELETE I ADD
podataka u isti fail. Prvo cu odraditi posebno sve a kasnije povezacu u jedan meni sa
dodatkom rutera I filtra u kombinaciji sa map, kao I manju paginaciju.

Struktura aplikacije:

Projektni folder
folder node_modules

folder public:
index.html
favicon.ico
manifest.json
people.json // fail koji se cita

folder src:

folder: radni
post.js // fail koji cita podatke iz people.json
App.js
App.css
index.js
registerServiceWorker.js

.gitignore
package.json
package-lock.json
READEME.md

Nacin izrade

Izrada aplikaicje standardno pokrenuta upotrebom

create-react-app korisnik

nakon toga sam izvrsio instalcije zavisnih delova paketa portebnih za rad
npm i --save babel-polyfill es6-promise isomorphic-fetch

i paketa za razvoj
npm i --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
webpack

Kod failova

/* post.js*/
import React from 'react';
import 'isomorphic-fetch';
import 'es6-promise';

export default class Person extends React.Component {

constructor(props) {
super(props);
this.state = {
korisnik: [],
};
}
componentDidMount(){
fetch('http://localhost:3000/people.json',{
method:'get',
headers:{
"Content-Type":' application/json',
'Accept':' application/json' }
})
.then(response => response.json())
.then(json => {
console.log(json);
this.setState({
korisnik: json.korisnik
})
}).catch(error => this.setState({ error}));
}

render() {
return(
<div>
<h2> Procitani podaci iz post.json faila </h2>
<ul>
{
 this.state.korisnik.map(kor=>{
return(
<div key={kor.id} >
<li>ID Korisnika {kor.id} </li>
<li>IME Korisnika {kor.name} </li>
<li>EMAIL Korisnika {kor.email} </li>
<li>NASLOV Korisnika {kor.title} </li>
<li>TEKST Poruke {kor.body} </li>
</div>
)
})
}
</ul>
</div>
);
}
}

/* App.js*/

import React, { Component } from 'react';

import logo from './logo.svg';
import './App.css';
import Podaci from './radni/post';

class App extends Component {

render() {

return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Podaci/>

<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;

/* people.json */
{
"korisnik": [
{
"id": 0,
"name": "Negan1",
"email": "negan@gmail.com",
"title": "Naslov treci ",
"body": "neki tekst treci"
},
{
"id": 1,
"name": "Negan2",
"email": "negan@gmail.com",
"title": "Naslov treci ",
"body": "neki tekst treci"
},
{
"id": 2,
"name": "Negan3",
"email": "negan@gmail.com",
"title": "Naslov treci ",
"body": "neki tekst treci"
},
{
"id": 3,
"name": "Negan4",
"email": "negan@gmail.com",
"title": "Naslov treci ",
"body": "neki tekst treci"
}
]
}

/*index.js*/

import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

/* .gitignore*/
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Napomena:
kod mene je radilo i sa ovim kodom package.json faila
{
"name": "korisnik",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"es6-promise": "^4.2.4",
"isomorphic-fetch": "^2.2.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
}
}