Getting started with ReactJS, Play 2.4.x, Scala, Anorm and WebJars

playing-reactjs

This blog describes a basic example to render UI using React(A JavaScript library for building user interfaces) with Play 2.4.x, Scala, Anorm and WebJars. It also demonstrates the use of evolution in Play 2.4.x

This is a classic CRUD application, backed by a JDBC database. It demonstrates:

• Handling asynchronous results, Handling time-outs
• Achieving, Futures to use more idiomatic error handling.
• Accessing a JDBC database, using Anorm.
• Replaced the embedded JS & CSS libraries with WebJars.
• Play and Scala-based template engine implementation
• Integrating with a CSS framework (Twitter Bootstrap). Twitter Bootstrap requires a different form layout to the default one that the Play form helper generates, so this application also provides an example of integrating a custom form input constructor.
• Flat-UI with Twitter Bootstrap to improve the look and feel of the application

Instructions :-

• Clone the project into local system
• To run the Play framework 2.4.x, you need JDK 8 or later
• Install Typesafe Activator if you do not have it already. You can get it from here
• Execute activator clean compile to build the product
• Execute activator run to execute the product
• playing-reactjs should now be accessible at localhost:9000

All the screens:

Play Evolution

Home Page

Dashboard Page

References :-

• Play 2.4.x
• ReactJS
• Anorm
• WebJars
• Bootstrap
• Flat-UI
• ReactJS Tutorial

This is the start of using ReactJS with Play, from next week onwards we would be working on this application to make it grow. We would look at how we can add more functionality into it , then we would be adding more modules to it together. If you have any changes then feel free to send in pull requests and we would do the merges :) Stay tuned.