In this lab we will take a step further to make an advanced REST client, and familiarise with ReactJS.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React is component-based, and goes by the LOWA (Learn Once, Write Everywhere) philosophy. React can render:

• on the server, using NodeJs
• deploy to mobile devices using React Native
• desktop applications using electronjs
• VR using React VR

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. The base class privided by React is React.Component.

Normally you would define a React component as a plain JavaScript class:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}
 
// Example usage: <ShoppingList name="Mark" />

Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens.

These methods are called when an instance of a component is being created and inserted into the DOM:

• constructor()
• componentWillMount()
• render() - the main required function that displays data
• componentDidMount()

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

Each component also provides some other APIs:

• setState()
• forceUpdate()

• defaultProps
• displayName

• props - read-only arbitrary inputs
• state - contains data specific to this component that may change over time. Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

const element = <h1>Hello, world!</h1>
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
)

This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. JSX produces React “elements”.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

You can embed any JavaScript expression in JSX by wrapping it in curly braces. Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

const element = <img src={user.avatarUrl} number={2+2}></img>

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function. The JSX code:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

compiles into:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

You can provide more JSX elements as the children. This is useful for displaying nested components:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

Routing in react can be done using multiple libraries. The most popular one is `react-router`.

The library defines simple route components that can be nested:

import { Router, Route, hashHistory } from 'react-router';
<Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>

You can find some examples here: https://codepen.io/pantharshit00/pen/OpZLoa, https://codesandbox.io/s/vvoqvk78

In order to make a HTTP request, you can use the same axios package, similar to how it was used in VueJs:

import React from 'react';
 
import axios from 'axios';
 
export default class PersonList extends React.Component {
  state = {
    persons: []
  }
 
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }
 
  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}
 

As an assignment for this lab you will have to make a small web application client in order to access e-health formatted data with more advanced features. The application must have at least the following:

1. Home page with menu and two different pages

• Patients
• Medication

2. Patients Page

• Paginated table with at least 20 patients. Filter patients in page by name (search)
• Data source: http://hapi.fhir.org/baseR4/Patient?_format=json&_pretty=true
• Each patient must have a detailed page containing:
  • Encounters: http://hapi.fhir.org/baseR4/Encounter?_format=json&_pretty=true
  • CarePlan: http://hapi.fhir.org/baseR4/CarePlan?_format=json&_pretty=true
  • Appointment: http://hapi.fhir.org/baseR4/Appointment?_format=json&_pretty=true
  • AllergyIntolerance http://hapi.fhir.org/baseR4/AllergyIntolerance?_format=json&_pretty=true

3. Medication Page

• Paginated table with Medication
• Data source: http://hapi.fhir.org/baseR4/Medication?_format=json&_pretty=true

The resulting application must be submitted as an online snippet in order to be checked and graded. You can use Plunker or any other suitable online snippet tool. If you worked locally, you could publish it to a public repository on github for example and submit the url.