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

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 on GitHub. 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 file.

Source Code

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

  • is the meta tag in your index.html file necessary for to render aura components?

  • Jayme

    Very nice & clean readable code!
    Do you have any tips for when you’re developing, to reload the app whenever you change something in the code or do you run $ npm start && npm run build-client; each time again?

    Right now there isn’t any validation present. What do you suggest as best practice?I guess for a real live app you need serverside validation anyhow. Would be nice to see how the flow would be and how you handle this in a clean way in react without having too much validation duplication.

    • I think you can use the npm package watchify with browerify to get live builds.

  • Marcin

    Hello

    What IDE You use to create visual web application (angularjs, bootstrap and Slim) in work ? In ASP.NET environment is “Microsoft Visual Web Developer”

    Thak You for any answer

    M.K.

    • Perhaps Eclipse based IDE exists?

  • First time hearing of Lightning Design System (not having had any Salesforce experience) but it does look very neat! Thanks for the post up :)

  • Marcin

    Thanks for answer

    Maybe I must use only NetBeans 8.x environment ?
    Lightning Design System is only to create front-end (visual site of web application) ?

    M.K.

  • Formalarımızda kullandığımız kumaş; birinci sınıf mikro-interlok olup; esnek-fit, anti-bakteriyel, termo-balans ve hemen kuruma özelliğine sahiptir. Futbol maçlarınızda size hareket özgürlüğü sunan bu formalar; günlük olarak giyilebilecek kadar şık tasarlanmıştır. Forma Modellerimiz özel dikim ve Dijital baskılı olarak iki tür üretilmektedir.
    Firmamızın en fazla üretim yaptığı, spor çoraplarında kullandığımız ürünler: pamuk ,koton, polyester, naylon ve likradır. Anti-bakteriyel içermektedir.

  • Very nice & clean readable code!

  • Really its very helpful for me , thanks

  • thanks for the video

  • thanks you admin http://tr.bedavasohbet.org adresi bir numaradir.

  • good video

  • Türkiyenin en büyük servis sağlayıcısı olan Turkcell ile interneti fiber hızda kullanmaya ne dersiniz ?
    Superonline internet ile hızınızı 16 katına çıkarttın. Anı Turkcell ayrıcalıklar ile yaşamak için bizimle iletişime geçebilirsiniz.

    http://www.superonlinenet.net/

  • Çizmeye başlamak ilginç ve bazen de yıldırıcı bir iştir. Giderek yeteneklerinizi geliştirerek çizim alanına ilginizi arttırabilirsiniz. Bakırköy resim kursu olarak yüzlerce çeşit çizim tekniğini sizlerle paylaşarak çizim alanında ilginizin arttmasına resim kursu muz ayrıcalıkları eşlik etmekteyiz. Gerek duvar sanatı olsun gerekse karakalemi, yağlı boya, kuru boya gibi alanlarda sizlerin gelişimine olanak sağlamaktayız.

    http://ruyaavcisi.com/

  • Vita Şişli Tercüme Bürosu , başta İngilizce tercüme, Almanca tercüme, Fransızca tercüme, Rusça tercüme ve Arapça tercüme olmak üzere tüm dünya dillerinde tercüme hizmeti veren bir bürodur. Vita Tercüme olarak, etik, profesyonel ve hızlı çeviri hizmetimizle siz müşterilerimizin memnuniyetini esas alırız. Tercüme bir sanat olduğundan , her dil bilenin tercüme yapması söz konusu değildir. Bu nedenle, Vita Şişli Tercüme olarak alanında uzman ve profesyonel kadromuzla tüm çeviri ihtiyacınızı karşılamaya hazırız.Basit belge çevirilerinden, edebi ve sanatsal tecümelere, noter tasdikli resmi belge çevirilerine, teknik çevirilere ve yerelleştirmeye kadar çok çeşitli alanlarda Vita Tercüme Bürosunu tercih edebilirsiniz.

    http://www.vitatercume.com/

css.php