My Top 10 Favorite React Open Source Libraries

10 Sep, 2019

Create React App, Styled Components, Material UI, Next.js, Gatsby, Typography.js, React Admin, Formik, Enzyme, React Markdown

This is my curated top 10 favorite open-source libraries I've been using for the last 2 years. I only pick projects I personally used and sometimes read the source code. This blog only acts like my bookmarked list which means I just copy introduction and usage code from repositories.

1. Create React App

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

# install cli
npm install -g create-react-app

# npx comes with npm 5.2+ and higher
# create a new app
npx create-react-app my-app

# move to new app directory
cd my-app

# start hacking
npm start

2. Next.js

Next.js is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

npm install next

3. Gatsby

Gatsby is a modern web framework for blazing fast websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.

# install cli
npm install -g gatsby-cli

# create a new Gatsby site using the default starter
gatsby new my-blazing-fast-site

# move to new site's directory
cd my-blazing-fast-site/

# start it up
gatsby develop

4. Styled Components

Utilizing tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps!

npm install styled-components
import React from 'react'

import styled from 'styled-components'

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`

// Use them like any other React component – except they're styled!
;<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

5. Material UI

React components for faster and easier web development. Build your own design system, or start with Material Design

npm install @material-ui/core
import React from 'react'
import ReactDOM from 'react-dom'
import Button from '@material-ui/core/Button'

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))

6. React Admin

A frontend Framework for building admin applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest.

npm install react-admin
import React from 'react'
import { render } from 'react-dom'
import { Admin, Resource } from 'react-admin'
import restProvider from 'ra-data-simple-rest'

import { PostList, PostEdit, PostCreate, PostIcon } from './posts'

render(
  <Admin dataProvider={restProvider('http://localhost:3000')}>
    <Resource
      name="posts"
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
      icon={PostIcon}
    />
  </Admin>,
  document.getElementById('root')
)

7. Formik

Forms are really verbose in React. To make matters worse, most form helpers do way too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts: getting values in and out of form state, validation and error messages, handling form submission.

npm install formik
import React from 'react'
import { Formik } from 'formik'

const Basic = () => (
  <div>
    <h1>Anywhere in your app!</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        let errors = {}
        if (!values.email) {
          errors.email = 'Required'
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address'
        }
        return errors
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2))
          setSubmitting(false)
        }, 400)
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        /* and other goodies */
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
)

export default Basic

8. Typography.js

A powerful toolkit for building websites with beautiful typography. The goal of Typography.js is to provide a high-level elegant API for expressing typographic design intent.

Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order. Trying one design change can mean making dozens of tedious recalculations and CSS value changes. Creating new Typography themes with CSS feels hard.

npm install typography
import Typography from 'typography'

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.45,
  headerFontFamily: [
    'Avenir Next',
    'Helvetica Neue',
    'Segoe UI',
    'Helvetica',
    'Arial',
    'sans-serif',
  ],
  bodyFontFamily: ['Georgia', 'serif'],
  // See below for the full list of options.
})

// Output CSS as string.
typography.toString()

// Or insert styles directly into the <head> (works well for client-only
// JS web apps.
typography.injectStyles()

9. Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using

npm install --save-dev enzyme enzyme-adapter-react-16
import React from 'react'
import { expect } from 'chai'
import { render } from 'enzyme'

import Foo from './Foo'

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />)
    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3)
  })

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />)
    expect(wrapper.text()).to.contain('unique')
  })
})

10. React Markdown

Markdown is an awesome format to write technical blog or documents. react-markdown is obviously the best React component to render markdown out there.

npm install react-markdown
const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)

Same series:

A Developer Lost in Thoughts