wiki:front_end/snippets

Code snippets for UI

During UI development you must install a plug-in which enables CORS in your browser. Browser won't allow web pages to make calls to ressources from other domains. This also implies ports and subdomains. For Firefox there is the CORS Everywhere plugin.

Fetching data from REST API

import React from 'react';
import ReactDOM from 'react-dom';

class RestSample extends React.Component{ 
    
    constructor(props) {
        super(props);
        this.state = { hotels: [] };
    }
    
    fetchHotels(event){
        fetch('http://localhost:8000/ui/rest/hotel')
            .then(response => response.json())
            .then(json=> {
                this.setState({hotels:json.map(child => child)});
            });
    }
    
    render(){
        return(
            <div>
                <button onClick={(event)=>this.fetchHotels(event)}>Hotel list</button>
                <table>
                    <tbody>
                        {this.state.hotels.map(function(hotel){
                            return(
                                    <tr key={hotel.code}>
                                        <td>{hotel.code}</td>
                                        <td>{hotel.name}</td>
                                        <td>{hotel.city_name}</td>
                                    </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        )
    }
}

ReactDOM.render(
  <RestSample />,
  document.getElementById('root')
);

Routing to different views with React

You will need to install react-router: npm install --save react-router-dom. A nice tutorial can be found at https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

Set up reactjs project for acco 3

create-react-app acco3ui`
cd acco3ui`
npm install --save @blueprintjs/core
npm install --save react-router-dom
npm install --save react-addons-css-transition-group
git init
Last modified 11 months ago Last modified on Jan 10, 2018 9:12:16 AM