Martin Bokša Blog

Necessary React libraries and skills!

January 19, 2019☕️☕️ 9 minutes read Read in sk

Last year, I’ve discovered many new libraries that are related to React. It’s especially due to the fact I didn’t have previous experience and also javascript is such fast programming language with a lot of libraries released every day. On this blog, I would like to describe my experience with React and also bring you closer to what I think: What do I see and consider today to be necessary when working with React? Libraries can help those who start with it. I started with React at the official tutorial from Facebook. After you understand the basic terms and find out how to structure the React project, then you need to get some background to the current popular libraries. Here is the list of libraries I find important.

Don’t overthink it. If you’re just starting a project, don’t spend more than five minutes on choosing a file structure.

React

Boilerplate

create-react-app - if you do not have a React experience, this library will create a boilerplate for your application. It contains all the necessary configurations and dependencies, so you can write React and do not have to worry about anything. In the beginning, you do not have to know so many tools and connections. This utility will take care of it.

What's included? React, JSX, ES6, TypeScript and Flow syntax support.

State Container

Redux - this is a global store with variables. Why? You do not have to send the variable through other x components to depth. Instead, you connect it to the global store. It is commonly used in applications. For example user data, current theme, application status, … I recommend installing the plugin to develop into Chrome. If you want to avoid a boilerplate (without shares, switches, …) which are associated with Redux, I recommend rematch.

Redux

React Context - it’s a relatively new feature in React. It is the theoretical replacement for Redux. Concept: The provider is set up and his internal components can be read by the consumer.

React Context

MobX - another option for state container.

Storage

store.js - Helps with local storage-based applications. Older iPhones do not support it 😅.

Server Communication

fetch - native command from ES6 which can query the server. Some features such as abort are missing.

Axios - an extended version of fetch, based on XMLHttpRequests.

const axios = require('axios')
axios
  .get('/user?ID=12345')
  .then(function(response) {
    console.log(response)
  })
  .catch(function(error) {
    console.log(error)
  })

Ky - my colleague advised me the work with this library, which is based on fetch. Comparison of Axios vs. Ky:

Yes. Axios is based on XMLHttpRequests, while Ky is based on Fetch. Axios has manually implemented a lot of things we get for free with Fetch. Fetch-based libs should be more stable and less buggy in general. Ky also has retry functionality.

Sindre Sorhus

Apollo Client - Fully supported library for GraphQL. It also offers dev tools for Chrome. I recommend looking at it. GraphQL at a glance: Multiple queries can be merged into one, or instead of chain calls to the server, they can be replaced by one.

GraphQL

CSS

Styled Components - visualization of components in javascript using CSS. An advantage, for example: is to avoid class-name conflicts.

const Button = styled.a`
  display: inline-block;
  color: #e62076;
`
render(<Button href="http://www.martinboksa.eu/">GitHub</Button>)

CSS-in-JS - a similar library like Styled Components, we use it at work.

classnames - I’ve put it in CSS category, but it’s a utility that helps create class-names for components. It’s one of my most favorite tools. I think the code is much cleaner.

classNames('foo', { bar: true }) // => result class name: 'foo bar'

react-responsive - a simple way to use the media query in React to create a responsive web.

import MediaQuery from 'react-responsive'
const Example = () => (
  <div>
    <div>Device Test!</div>
    <MediaQuery query="(min-device-width: 1824px)">
      <div>You have a huge screen</div>
    </MediaQuery>f<MediaQuery query="(max-width: 1224px)">
      <div>You are sized like a tablet or mobile phone though</div>
    </MediaQuery>
  </div>
)

React DnD - library to create a Drag & Drop interface.

react-beautiful-dnd - at work, guys have an excellent experience with this DnD.

it has great performance. have plenty of examples to cover most of the basic cases.

Denis Slávik

React Spring - animation library. I have a very good experience with the performance it can achieve. I recommend looking at “Why does React need another animation library?”.

React Spring - Drag&Drop

Semantic UI - UI framework to create a responsive web. Contains completed components.

Carbon Components - Collection of different UI components from IBM.

Fabric - Various components from Microsoft.

There are missing libraries like React Bootstrap or Material UI, libraries were selected so that you could create a nice web as simple as possible 📚.

Internationalization

React Intl - a translation library that also provides formatting of dates, numbers, strings, pluralizations, …

react-i18next - internationalization for reactjs / reactnative, which is based on i18next.

React Intl Redux - translations are kept in redux store.

FBT - a framework for translation, used in Facebook.

In this part, I wrote mainly from the experience of my colleagues.

Testing

Jest - test platform with zero configuration. It is also used on Facebook.

Enzyme - a test tool from Airbnb.

Meta Tags

React Document Title - set document.title.

React Helmet - tool for <head> management.

Forms

Redux Form - State of forms is in the state container. Need to know HOC and Redux.

Formik - complete solution for forms, including validation, … One of the most popular solutions.

Utilities

lodash - Extends javascript with many interesting functions like debounce.

Moment.js - parsing, manipulating, and displaying the date and time 📅. There are many more options to work with the date. I think it’s not a good utility. But it is popular and known in the world of javascript.

date-fns - instead of momentjs you can use this library.

Good library if you’re looking to replace Moment.js for one reason or another. Immutable too.

Dan Abramov

Rich Editor

Draft.js - a framework which creates a rich editor. Rich Editor

Type Checking

PropTypes - check props in runtime.

flow - static typechecker.

TypeScript - a language that translates into javascript but has types. I recommend seeing it.

Nice to know

Storybook - developer interface for UI Components. You see how your components look (imo, components can be simple reused and tested). A nice example of using here.

Storybook intro

Prettier - one of my favorite tools. It’s a code formatter and is integrated into all well-known editors. Just press the shortcut key to format the document.

ESLint - The pluggable linting utility for JavaScript and JSX. I used it in all my javascript projects. Sometimes it’s annoying.

TSLint - As ESLint but for TypeScript to static code analysis.

PixiJS - Last year I was working on graphical editor based on React and PixiJS. I can fully recommend both.

Gatsby - helps to create pages without “a headache”. For example, this technology has been used in React Docs or in this blog.

SENTRY - the tool I used to capture bugs in production. I can recommend it. Suitable to combine perfectly with React, especially when adding Error Boundaries in the componentDidCatch() method.


There are lot of libraries and utilities we can use to work with React and javascript. I think this is just a fraction of the list that could be useful to you. You can see more libraries here. The libraries you choose are up to you. It depends on what you want to achieve. All libraries are opensource and if necessary, the redesign may not be so demanding.

When I was writing the blog, I was thinking about who will read this article. I finally decided to dedicate it to people who do not have a great experience with React. Consequently, I did not to describe the tools like webpack, parcel, grunt, … I think these are things that are not necessary at the beginning.

Discuss on TwitterEdit this page

Martin Bokša

Personal blog by Martin Bokša who is technology enthusiast, lives in Brno and works primary in React 🍻.