React University: Sample Application with React, Node.js 4, and the Lightning Design System

Christophe Coenraets
2 min readOct 14, 2015

--

React University is a sample project demonstrating how to build real-life applications with React, Node.js, and the Lightning Design System. React University is written using ECMAScript 6 at the client-side (leveraging Babel) and at the server-side (leveraging the new ES6 support in Node.js 4).

Watch the video for a quick walkthrough of the application:

Highlights

React

  • React University demonstrates how to build a React app using ES6 modules
  • It also demonstrates how to use React Router 1.0 (RC3 at the time of this writing)

Lightning Design System

The Lightning Design System is a new UI toolkit focused on business apps available from Salesforce as an open source project. In addition to traditional components, it provides specialized components that are useful when manipulating data: activity timeline, data tables, record headers, etc. And in addition to UI components, it provides UI patterns to solve the common problems you face when building data-driven apps. The list of components used in this specific application includes:

  • DataGrid
  • Record Header
  • Record Home
  • Spinner
  • Toast

Node.js 4

  • The Node.js back-end exposes a set of REST services
  • It uses the new ES6 support available in Node 4.x
  • In particular it uses the built-in ES6 promises instead of the q module
  • The Node.js application accesses data stored in a Postgres database

One-Click Deployment to Heroku

To deploy your own instance of the application, simply click the Heroku button in the Github readme page.

Source Code

The source code of the application is available in this Github repository.

--

--