Employee Directory: Sample Application with React Native and Node.js

Employee Directory: Sample app with #ReactNative and #NodeJS

  • In React Native , you render your components using React Native components like and which are wrappers around native components.
  • React Native is a framework for building native mobile applications using JavaScript.
  • Trivia application built with React (hosted live )
  • The source code for the React Native application is available in this GitHub repository.
  • The REST service implementation (employee-service-rest.js) uses fetch to access Node.js-based REST services hosted on Heroku .

Over the past few years, I’ve built many versions of the Employee Directory application as a way to explore new languages and frameworks. In this post I’ll share a version of the Employee Directory sample app built with React Native.

@ccoenraets: Employee Directory: Sample app with #ReactNative and #NodeJS

Over the past few years, I’ve built many versions of the Employee Directory application as a way to explore new languages and frameworks. In this post I’ll share a version of the Employee Directory sample app built with React Native.

React Native is a framework for building native mobile applications using JavaScript. It uses the same programming model as React, with one key difference: instead of rendering DOM elements in a browser window, a React Native application renders native components in your mobile platform UI system (i.e. UIKit on iOS). In other words:

The Employee Directory application allows you to search for employees by name, view the details of an employee, call, text, or email an employee, and navigate up and down the org chart.

Watch the Video:

Employee Directory uses the following React Native features:

The app comes with two interchangeable implementations of the data service:

The application uses the mock service by default. To use the REST service instead, open EmployeeList.js and EmployeeDetails.js, and replace:

import * as employeeService from ‘./services/employee-service-mock’;

with:

import * as employeeService from ‘./services/employee-service-rest’;

The source code for the React Native application is available in this GitHub repository.

The source code for the REST services is available in this GitHub repository.

If you are new to React or ECMAScript 6, check out my React and ECMAScript 6 tutorials:

And/or check out my React sample apps:

Employee Directory: Sample Application with React Native and Node.js