Useful libraries
Common libraries to use with React
- react-redux: Redux is a predictable state container for JavaScript apps.
- ImmutableJS: Immutable persistent data collections for Javascript which increase efficiency and simplicity.
- redux-orm: If the redux state becomes complex, this library creates an ORM on it. This allows for easier querying and modification of the state structure (while maintaining immutability).
- redux-saga: redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.
- reselect: Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.
- MobX: Simple, scalable state management. It's an alternative to react-redux.
- React-Bootstrap: React-Bootstrap is a complete re-implementation of the Bootstrap components using React.
UI Libraries
- ReactCSSTransitionGroup: For animating items. Defining initial and final state, this library animates the frames between them.
Development
- Redux Async Initial State: Redux middleware for async loading of initial app state.
- Why did you update: Tool that will output a warning every time a component is updated and the state didn't change.
- Structor: Generate the source code for components, containers, actions, reducers, selectors and sagas. Amazing.
- redux-query: redux-query is a library for querying and managing network state in React/Redux applications.
Boilerplates
Utilities
- faker.js: Generate massive amounts of fake data in the browser and node.js. (Warning: there's a duplicate of this repository with the same name that's not mantained. Only use the one in this link)
- fake-json-stream: Make Faker return json data. Useful for creating fake APIs.
- mockable.io: Tool for creating and publishing fake APIs.
- React Developer Tools:React Developer Tools for Chrome. Useful for debugging.
- Redux DevTools:Redux DevTools for Chrome.
Continuous Integration
- CircleCI: The modern continuous integration and delivery platform that software teams love to use.
Heroku
- Heroku: CDN to host React apps. Allows to create a pipeline with different environments. Also integrates with git for automatically deploying pull request apps. All this features are included in the free plan.
- Deploying React with Zero Configuration: Article that explains how to deploy a create-react-app (CRA) to Heroku
IDEs
Atom
- Atom: Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
Atom plugins
- React: React.js (JSX) language support, indentation, snippets, auto completion, reformatting. Essential
- file-icons: Add file icons to project tree
- highlight-selected: Highlight selected text in other parts of the file
- linter: Linter is a base linter provider for the Hackable Atom Editor.
- linter-eslint: This linter plugin for Linter provides an interface to eslint. It will be used with files that have the "JavaScript" syntax.
- minimap: A preview of the full source code.
- minimap-hide: Hide the minimap when pane isn't focus
- open-recent: Open recent files in the current window, and recent folders (optionally) in a new window.
- zentabs: Keep the opened tabs amount below specified limit
- js-hyperclick: A hyperclick provider that lets you jump to where variables are defined.
- sync-settings: Synchronize settings, keymaps, user styles, init script, snippets and installed packages across Atom instances.
- git-time-machine: Visually interact with git commit history for a file instances.
Nuclide
- Nuclide: Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects. It is made by Facebook and has incredible features (debugging, remote development, etc).