Day-2 Live Demo-4: DHIS2 User List App by React JS

DAY-2 LIVE DEMO-4: DHIS2 USER LIST APP BY REACT JS

Step-1: React Project Setup In your terminal, type:

create-react-app react-dhis2-user-list-app

Project Directory:

Step-2: Run this app Type the below command in your terminal:

npm start

Go to browser and type: http://localhost:3000

Step-3: Install React and React-Dom packages:

npm install –save react
npm install –save react-dom
npm install –save react-scripts

Now update your package.json file:

{
  "name": "react-dhis2-user-list-app ",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },  
  "keywords": [
    "DHIS2",
    "App"
  ],
  "author": "Julhas Sujan",
  "dependencies": {
    },
  "description":"This is for demo Apps",
  "icons": {
        "48": "/images/icon.png"
    }
}

Step-4: Create manifest.webapp

Run in your terminal: touch manifest.webapp

Generate manifest: Or Add the below code:

{
  "launch_path": "index.html",
  "default_locale": "en",
  "activities": {
    "dhis": {
      "href": "*"
    }
  },
  "appType": "APP",
  "name": "react-dhis2-user-list-app ",
  "version": "0.1.0",
  "description": "This is for demo Apps",
  "developer": {
    "name": "Julhas Sujan"
  },
  "icons": {
    "48": "/icon.png"
  },
  "manifest_generated_at": "Mon Nov 06 2017 20:23:35 GMT+0600 (Bangladesh Standard Time)"
}

Step-5: Update index.js file that located at src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
const rootEl = document.querySelector('#root');
const fetchOptions = {
  headers: {
    Authorization: `Basic ${btoa('admin:district')}`
  }
};

// List of users
function UserList({users}){
  return (
    
        Number of users: {users.length} 
         
        {
        	users.map((user)=> 
        	
    			{user.name}
  			)
		    } 
		
    
  ); 
}

fetch('http://localhost:8080/dhis/api/users.json?fields=:all', fetchOptions)
  .then((result) => result.json() )
  .then((jsonData) => {
    ReactDOM.render(
      , rootEl);
    
  }).catch((error) => { console.warn('Error:', error); });

Let’s run the application:

		npm start

Step-6: Build the application and upload in app store.

Run in console: npm run build

Zip the build files and upload it in App-Management. See the output!

DAY-2 LIVE DEMO-4: DHIS2 USER LIST APP BY REACT JS