We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

5 UI Libraries to Use With React

Andreas Reiterer 7 February, 2018 | 2 min read

If you’re a developer who – like me – is not a good designer or a CSS pro, you might know how troublesome it can be to put together the design for your React app. You spend a lot of time tinkering with the styles, but in the end, it just doesn’t look quite nice.

This is not only annoying, it’s demotivating … after all, you just want to have a good-looking app that is also responsive to support mobile devices. How hard can it possibly be?

If this sounds familiar to you, I can assure you’re definitely not alone.

Use UI Libraries to Style a React App

Styling a web app is a huge pain for many developers. Maybe that’s why there are so many UI libraries out there in the wild. Here are some examples of libraries for styling React apps for you to try out:

React-Bootstrap

boostrap.png

React Bootstrap

You might already know the Bootstrap Framework. It helps you to create responsive grid layouts on your website and offers a whole lot of controls like buttons and form elements. React-Bootstrap offers the functionality of Bootstrap through handy-to-use React components.


Website: https://react-bootstrap.github.io

Semantic UI

semantic.png
Semantic UI

Semantic focuses on making front-end development a better experience for developers. You can not only use it with React, but it also supports other frameworks like Angular or Ember.


Website: https://semantic-ui.com/

Material-UI

material.svg
Material UI

If you want to build a React app that complies with Google’s Material Design, this might be worth a look. Material-UI provides a bunch of React components that you can use and customize for your app.


Website: http://www.material-ui.com

Rebass

rebass.jpg
Rebass

Rebass provides React components for primitive UI elements like grid layouts, buttons or boxes. It is built with styled-components, which allows you to customize all the provided elements and use real CSS in your code.


Website: http://jxnblk.com/rebass

Atlaskit

UI-Library-atlaskit.jpg
Atlassian’s Atlaskit

Atlaskit is Atlassian’s (Jira, Confluence, Trello) official UI library and complies to their own Design Guidelines. It is also built with styled-components and provides a lot of customizable UI elements in form of React components.


Website: https://bitbucket.org/atlassian/atlaskit-starter

Get your hands dirty

All of the above-mentioned libraries are a bit different. The best way to find out which library actually suits your needs, or which one you’re the most comfortable with, is to try them out:

  • Find a mini example project (e.g.: Build a static Twitter card component)
  • Open your Code Editor of Choice
  • Build the example project once with each of the above libraries

Spend some time with each of the libraries. You’ll soon see which library you’re the most comfortable with, or which one you like best. If you create the same project with each of them, you can directly compare the differences.

If you’re passionate about Front End development, check out the JavaScript Works job-board here!

Originally published on www.andreasreiterer.at

Related Jobs

Related Issues

viebel / klipse-clj
viebel / klipse-clj
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • Open
  • 0
  • 0
  • Advanced
  • Clojure
  • $80
viebel / klipse
  • Started
  • 0
  • 2
  • Advanced
  • Clojure
  • $180
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 3
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • 1
  • 0
  • Advanced
  • Clojure
  • $300

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email