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

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:

  • In React, you render your components using React components like <div> and <ul> which are wrappers around DOM elements.
  • In React Native, you render your components using React Native components like <View> and <ListView> which are wrappers around native components.

The Sample Application

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:

Highlights:

Employee Directory uses the following React Native features:

Installing the Application

  1. Follow the React Native getting started instructions to install React Native. Make sure you select your Mobile OS and Development OS, for the right instructions. The instructions below assume ios.
  2. Create a new React Native app named EmployeeDirectory:
    react-native init EmployeeDirectory
    cd EmployeeDirectory
    react-native run-ios
    
  3. Clone the sample app repository:
    git clone https://github.com/ccoenraets/employee-directory-react-native
    
  4. Copy the app folder from employee-directory-react-native into your EmployeeDirectory project folder
  5. Open index.ios.js. Delete the existing content and replace it with:
    import {AppRegistry} from 'react-native';
    
    import EmployeeDirectoryApp from './app/EmployeeDirectoryApp';
    
    AppRegistry.registerComponent('EmployeeDirectory', () => EmployeeDirectoryApp);
    
  6. Hit Cmd + R to refresh the app in the emulator

Mock and REST Services

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

  • The Mock service implementation (employee-service-mock.js) uses in-memory data and is used for prototyping or testing purpose.
  • The REST service implementation (employee-service-rest.js) uses fetch to access Node.js-based REST services hosted on Heroku. You can find the source code for the Nodes.js services in this GitHub repository.

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';

Source Code

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.

Additional Resources

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:

  • Pingback: Employee Directory: Sample Application with React Native and Node.js - ReactJS News()

  • Gayathri

    Explanations shared here is very useful

    By,
    Hope Tutors

  • Navjeet Chabbewal

    Downloaded and checked out the app. Loved the way it is coded. It was a good example to lear navigation in react native and I really liked the way you abstracted mock v/s RESTful service to get employee data.

  • Oktay Seo

    İyi hafta sonları değerli takipçilerimiz. Haftanın tüm yorgunluğunu üzerinizden atabileceğiniz ruhunuzu ferahlatacak bir çok aktivite bulunmaktadır. Bu aktivitelerden ruhu ferahlatan, ufkunuzu geliştiren resim kursu ve bahçeşehir bale kursu eğitimleride bunlar arasında yer almaktadır.

    7 ile 15 yaş arası çocukların deneme sürecinde her hangi bir ücret talep etmemek ile beraber çocukları sanata yönlendirmek ve geliştirmek hiç şüphe yok ki gelecekleri adına atmış olacakları adımlar için oldukça ideal bir seçim olacaktır.

    Bahçeşehir bale kursu eğitimlerini vermekten olan eğitmenimizin pozitif enerjisini sizde yüreğinize hissedecek sanatın her alanından ayrı bir tat alacaksınız.

    http://ruyaavcisi.com/bale-ve-modern-dans-gelisim-atolyesi/

    bahçeşehir bale, bahçeşehir bale kursu, bale kursu, bale kursu bahçeşehir,

  • Oktay Seo

    İstanbul’un en gözde semtlerinden biri olan bahçeşehir de bahçeşehir bale kursu eğitimi almak istiyorsanız en ideal adres olan rüya avcısı sanat merkezi ile tanışmanızı tavsiye ederiz. geniş kadrosu ve eğitici kadrosu ile özellikle çocuk ve gençlerin gelişimine olumlu katkı sağlamaktayız. Sizde çocuklarınızı güvenli ve sanata aşık olan bu kuruma teslim edebilirsiniz.

    Avcılar’ da bulunan resim kursu ile birlikte bahçeşehirde bulunan resim kursunun yanı sıra bale eğitimlerinede hız kesmeden devam etmekteyiz.

    http://ruyaavcisi.com/bale-ve-modern-dans-gelisim-atolyesi/

  • Pingback: Sample Application with React Native and the Salesforce Mobile SDK | Christophe Coenraets()

  • Ayşe Gül

    Resim Akademi Güzel Sanatlara Hazırlık Kursu ile sınavlara hazırlanan, yetenekli öğrencilerimiz, ülkemizdeki güzel sanatlar liselerinde eğitim almaya başlayarak kariyerlerine adım atabilirler. Güzel Sanatlar Liselerinin yetenek sınavlarına hazırlanan öğrenciler için Türkiye’de bulunan liseler ve kontenjanları… Devamı için, http://www.guzelsanatlarahazirlikkursu.com.tr/

  • Chandrakanth Bairy

    Can I know how to run this example in Android device? I tried the same changes in index.android.js and copied app folder from employee-directory-react-native to EmployeeDirectory. I reloaded the app in Android emulator but I end up getting error like,
    Could not connect to the development server

  • Oktay Seo

    İstanbul’un en gözde ve en işlem mekanı olan kadıköy ‘ de osmanlının yüzyıllardır süre gelen kına organizasyonlarına bağdat kaftan aracılığı ile ulaşabileceksiniz.
    Kadıköy kaftan kiralama olarak yüzlerce çeşit ürünü farklı renk ve tarzda sizlere sunmaktadır. Asalet , Hurrem Bordosu , Sultani Yeşil , Gece Büyüsü , Pembe İncili kaftan çeşitlerini magazamızda bulabilirsiniz.
    Bağdat Caddesinde bulunan mağazamız web sitemiz üzerinden sipariş alınmaktadır.
    Bizi Takipte kalınız…

    http://bagdatkaftan.com/

  • Which language of coding you advise for novice programmer. That would be either easy and effective.

  • janki gandhi

    how to install this app in android device?

  • divp

    thanks for sharing very well explained

  • Anh Minh Multimedia

    I have error message about “Navigator” . I’m using the react-native: 0.45.1

    • sudhir

      in node_modules
      npm install react-native-deprecated-custom-components

      in EmployeeDirectoryApp.js add
      import { Navigator } from ‘react-native-deprecated-custom-components’;

      and remove Navigator from line 2

  • Abhishek

    I am also facing issue with Navigator.

  • nuru deen

    get Naija Mp3
    Download and Naija news

css.php