react.js

A JavaScript library for building user interfaces

Inbox

My public reactjs side projects

Quickstart generators

  • rogue - SSR for React that’s invisible (zero config! - only needs an App.js) and quick (no Webpack! - Parcel <3)
  • create-react-app - Create React apps with no build configuration.
  • nwb - A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
  • neutrino - Create and build modern JavaScript projects with zero initial configuration. https://neutrino.js.org
  • vortigern - A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more. https://barbar.github.io/vortigern

TypeScript

Websockets

React frameworks

  • next.js - Next.js is a minimalistic framework for server-rendered React applications.
  • ink - 🌈 React for interactive command-line apps

Components

Logic control using components

Audio players

Calendars

  • tui-calendar - TOAST UI Calendar is a full-featured calendar. Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

Datepickers

Routing

Passing state key within to property allows to pass state to the referenced route

1
2
3
4
5
6
7
8
<Link
  type='submit'
  to={{pathname: '/buy-tickets', state: this.props}}
  className='btn btn-block btn-lg btn-primary'
  disabled={!this.props.tickets.selectedCount}
>
  Confirm
</Link>

Forms

Charts

  • victory - A collection of composable React components for building interactive data visualizations .
    • it uses d3
    • Supports candlestick charts
    • easy to implement
  • reactd3 - A Javascript Library For Building Composable And Declarative Charts
  • react-chartjs - rich interactive react charting components using chart.js (NOTE This is a CommonJS component only)
  • recharts - Redefined chart library built with React and D3 http://recharts.org
  • nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries https://nivo.rocks

Diagrams

  • react-diagrams - a super simple, no-nonsense diagramming library written in react that just works

Toggles

i18n

High order components

Differences between containers and HOC

Higher-Order Components (HOC) and Container Components are different. They have different use cases and solve similar, but different problems.

HOC are like mixins. They are used to compose functionality that the decorated component is aware of. This is opposed to Container Components that wrap children and allow the children to be dumb (or not aware of the Container’s decorated functionality).

It is true when transferring props, that Containers can add functionality to their children. But, this is usually in the form of props being passed down to the children. In Containers, this is also awkward because of the limitation that you cannot simply add props to an already created Element:

So, if you wanted to add a new prop to a child from this.props.children, you would have to use cloneElement. This is not as efficient because it means you have to re-create the elements.

Also, HOC is simply a way (factory) for creating Components. So, this can happen outside the render.

Hooks

  • usehooks.com - One new React Hook recipe every day
  • rest-hooks - Delightful data fetching for React. resthooks.io

Virtual lists

Functional stateless components

1
const Username = ({ username }) => <p>The logged in user is: {username}</p>

State management

Styling

Animations

Static sites generator

Static content server

  • serve - Static file serving and directory listing

Desktop app frameworks

Testing

Databases

  • WatermelonDB - 🍉 Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast zap

GraphQL

  • awesome-react-graphql - A curated collection of resources, clients and tools that make working with GraphQL and React/React Native awesome

Performance testing

  • react-perftool - A browser developer tool extension, which will help you to inspect the performance of React Js components.
  • react-performance - Helpers to debug and record component render performance

Tips

Demos

Feature toggle

Books

  • React in Patterns - 📚 A free book that talks about design patterns/techniques used while developing with React.

Styleguides

UI Frameworks

Comments

⬆︎TOP