If you already have previous ReactJS experience, it’s time to get started building your own web applications. ReactJS makes it easy, but what if we need a tested framework made for fast application prototyping and building? Fear not, some developers already created full-fledged front-end UI frameworks to support ReactJS.
 
Here are five frameworks you can use to kick-start your first web or mobile application using ReactJS.
 
Note: Don’t get me wrong, this article is work in progress. Everything mentioned here except one framework is still in production. So expect things will change over time, and I will update them accordingly.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
 
1
React Native
 
 


  • Intended For: Mobile Development
  • Release Date: 2015
  • Status: In development
 
Official Site Documentation GitHub
 
 
 
Just like ReactJS, React Native is a new open source framework made by Facebook that allows you to create native mobile applications (iOS, Android) using JSX and JavaScript. JSX is a JavaScript syntax extension similar to XML usable with React.
 
This way we can achieve the best of both worlds, we’ll blend both classic native and hybrid approaches. Will it work? Who knows, we still have a long way to go.
 
Hopefully, React Native will change mobile app development industry, but only if this approach can outclass what’s already been done with Xamarin and Appcelerator. I still need some time before I can safely say that this is what we were waiting for all these time.
 
 
 
 

Good

  • JavaScript to Native
  • Fast
  • Large community
  • Already there’s a huge number of plugins
 

Bad

  • Too early to tell if if its going to suffer from the same problems like Xamarinn and Appcelerator (bugs and memory leaks)
 
 
 
 
2
React Bootstrap
 
 


  • Intended For: Mobile Development
  • Release Date: 2014 (very late 2013)
  • Status: In development
 
Official Site Documentation GitHub
 
 
 
What would happen if we would merge ReactJS with Bootstrap? React Bootstrap of course.
 
React Bootstrap is a library of reusable front-end components, made from the most popular front-end UI framework, rebuilt with ReactJS.
 
This way you’ll get the well-known look-and-feel of Bootstrap 3, wrapped around the power horse that’s ReactJS. All that without jQuery, mmm sexy.
 
Unfortunately, this library is still under active development, so please be careful. Though, I can safely say it’s mature enough. If you already own a site runung BootStrap now it’s time to change.
 
 
 
 

Good

  • Stable
  • BootStrap
  • Near perfect conversion
  • Large community
  • Some new components were included
  • Excellent documentation
 

Bad

  • Some classic components are missing
 
 
 
 
3
Material UI
 
 


  • Intended For: Web Development
  • Release Date: 2014
  • Status: In development
 
Official Site Documentation GitHub
 
 
 
As you can probably see, Material-UI is a library of React Material Design looking components. As everything on this list, this library is still work in progress, and far from production level. Though you should not expect this step until we reach React 1.0.
 
UI is reproduced almost pixel perfect following Google Material Design Guidelines. If you like this kind of UI, then this is a framework for you.
 
 
 
 

Good

  • Material Design
  • Pixel perfect conversion
  • Excellent documentation
 

Bad

  • A huge number of open bug tickets doesn’t sound positive
  • Far from production usability
 
 
 
 
4
Semantic UI
 
 


  • Intended For: Web Development
  • Release Date: 2013
  • Status: Stable (version 2.0)
 
Official Site Documentation GitHub
 
 
 
Semantic is a UI framework that helps create beautiful, responsive layouts using HTML.
 
I was uncertain if this framework deserves to be included in this list. While it has a superb React support, it was not initially created on top of it. Because of this, it also provides support for AngularJS, Meteor, and Ember. This is precisely the reason provided GitHub link points directly to SemanticUI-React repository.
 
If you are still interested, prepare to be amazed. Unlike other frameworks mentioned here, Semantic UI is in stable 2.0 version. UI looks fabulous, subjectively better than BootStrap or Foundation UI.
 
 
 
 

Good

  • Stable
  • Fast
  • Production Ready
  • Large number of plugins and available themes
  • Big community
 

Bad

  • Nothing particular
 
 
 
 
5
Elemental UI
 
 


  • Intended For: Web Development
  • Release Date: 2015
  • Status: In development
 
Official Site Documentation GitHub
 
 
 
Elemental UI is a flexible and beautiful CSS UI framework for ReactJS. It’s designed to be installed from npm and built into your project with browserify or webpack.
 
The framework is not that shiny or colorful like React Bootstrap, provided UI is minimal, but you should expect an easy integration into your project.
 
If you want a distinctively looking UI not related to BootStrap or Foundation or complicated like Semantic UI then you have found the right one. Unfortunately, this framework is far from production status. It’s still missing some components to be considered as a React BootStrap competition.
 
 
 
 

Good

  • Fast
  • Minimalistic
 

Bad

  • Mising components
  • Faaaaaar from usuable state
 
 
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • React Native now supports Android, please update your article! Thank you 🙂

  • Deckard Cain

    This is a very nice article, it does reference foundation and meteor in the same place! Wow, you’ll now what you’re talking about. I’m glad that you studied all these approaches.