3 prakt

index:
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
);



userapicontroller:


import React,{Component} from 'react';

class UserApiController {
    constructor(){
        this.getUsers = this.getUsers.bind(this)
    }
    _usersList(){
        return[
            {id: 1, name: 'Jonas', surname: 'Grybas'},
            {id: 2, name: 'Ernestas', surname: 'Arlauskas'}
        ]
    }

    getUsers(req, res, next){
        const users = this._usersList()
        return res.json(users)
    }
}



module.exports = UserApiController

app:


import React,{Component} from 'react';

class App extends Component {
constructor(props){
    super(props)
    this.onHandleUsers = this.onHandleUsers.bind(this)
    this.state = {
        isLoaded: false,
        users: []
    }
}

onHandleUsers() {
    fetch("http://localhost:3000/api/users")
    .then(res => res.json())
    .then(result => {
        this.setState({
            isLoaded: true,
            users: result
        })
    })
    .catch(e => console.log(e))
}

render() {
    return (
        <div>
            <button onClick={this.onHandleUsers}>Gauti vartotojus</button>
        <ul>
            {
                this.state.isLoaded && this.state.users.map(item => {
                    return (
                        <li>Vardas: {item.name}, pavarde: {item.surname}</li>
                    )
                })
            }
        </ul>
        </div>
    )
}

}

export default App




routes:

import React,{Component} from 'react';


const UserApiController = require('./controllers/UserApiController')
const userApiController = new UserApiController()

module.exports = (app) => {
    app.get('/', (req,res) => {
        res.render('home')
    })
    app.get('/api/users', userApiController.getUsers)
return app
}