Top 23 JavaScript Code Design Projects

• create-react-app

  113 88,451 8.3 JavaScript

  Set up a modern web app by running one command.

  

  Project mention: Understanding the role of "react" in a javascript application | reddit.com/r/AskProgramming | 2021-06-12

  create-react-app is... hmmm. Well, it's a curated list of packages with everything one might need to create a modern frontend application, plus a CLI and a couple files to get you started. The project is essentially trying to make it easier to start up a new React application, which can be quite complex these days, so it hides a lot of the underlying configuration and gives you a one-size-fits all system for development. Just take a look at their What's Included? section.

• react-router

  11 43,358 4.4 JavaScript

  Declarative routing for React

  

  Project mention: React Boilerplates in 2021 - The complete guide | dev.to | 2021-06-13

  The main difference between other tools on this list and react-boilerplate is that, post setup, we get a highly opinionated, yet highly feature-rich development setup with feature support for react-router for routing, redux for state management, redux-saga for enhancing redux, reselect for optimization, immer for immutability and styled components for fast-tracking development. Even the project structure is highly opinionated with separation between containers (connected to redux store) and components that are pure components.

• Scout APM

  Sponsored scoutapm.com

  Scout APM - Leading-edge performance monitoring starting at $39/month. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

• react-boilerplate

  7 27,576 0.0 JavaScript

  :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

  

  Project mention: React Boilerplates in 2021 - The complete guide | dev.to | 2021-06-13

  Another tool worth adding to the list when it comes to setting up a react project is react-boilerplate. On its landing page, react-boilerplate provides this description:

• react-redux

  15 21,061 7.0 JavaScript

  Official React bindings for Redux

  

  Project mention: useReducer & useContext design patterns? | reddit.com/r/reactjs | 2021-06-06

  Maybe you've got WYSIWYG state. That should definitely go in Redux, so it can be saved and rehydrated easily.

• reselect

  7 17,985 3.2 JavaScript

  Selector library for Redux

  

  Project mention: Filtering array in redux | reddit.com/r/reactjs | 2021-05-15

  You shouldn't be filtering in the reducer, you will want to use selectors. Take a look at Reselect. There are filtering examples in the readme. For example, you might save the search term in the reducer, create a selector to get your list, and a selector to get your search term. Combine those with `createSelector` to create a filtered list of your items.

• electron-react-boilerplate

  11 17,756 6.2 JavaScript

  A Foundation for Scalable Cross-Platform Apps

  

  Project mention: Any official tool to create electron project with Typescript and ReactJS? | reddit.com/r/electronjs | 2021-06-05

• react-relay

  7 15,738 9.9 JavaScript

  Relay is a JavaScript framework for building data-driven React applications.

  

  Project mention: Understanding render-as-you-fetch with Relay | dev.to | 2021-06-02

  I've been moving an existing codebase to a GraphQL API over the last few weeks using Relay as the front-end client. One thing I've been struggling with has been implementing the render-as-you-fetch (or fetch-as-you-render) pattern. A big part of the difficulty here is how our tools rely on the render path for coordinating work. I'm using this article as a way to write down what I've learned researching and figuring out this pattern in practice.

• SaaSHub

  Sponsored www.saashub.com

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

• recompose

  2 14,742 0.0 JavaScript

  A React utility belt for function components and higher-order components.

  Project mention: Writing purely functional stateful components without hooks | reddit.com/r/reactjs | 2021-06-05

  I might look like an asshole, but that also can save you time on future work: recompose includes withState and many other HOCs

• classnames

  13 14,108 7.1 JavaScript

  A simple javascript utility for conditionally joining classNames together

  Project mention: Real-world CSS vs. CSS-in-JS performance comparison | news.ycombinator.com | 2021-06-08

  Added one more point on API side. Also, you'll probably end up using one more library called classname for better classname management.

  https://www.npmjs.com/package/classnames

  In the end, I generally prefer to use tailwind + emotion. My goals usually is to save time and make system more consistent rather than optimizing JS bundle, etc.

• redux-form

  1 12,553 1.2 JavaScript

  A Higher Order Component using react-redux to keep form state in a Redux store

  

  Project mention: Form validation in React using the useReducer Hook | dev.to | 2021-04-26

  There are a lot of libraries out there for validating forms in react. Redux-Form, Formik, react-final-form are few among them.

• react-redux-universal-hot-example

  0 12,038 0.0 JavaScript

  A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

• react-jsonschema-form

  6 10,138 7.9 JavaScript

  A React component for building Web forms from JSON Schema.

  

  Project mention: Creating form field components dynamically and then saving the data from those fields to an object on form submission | reddit.com/r/reactjs | 2021-06-14

• react-final-form

  6 6,514 4.4 JavaScript

  🏁 High performance subscription-based form state management for React

  

  Project mention: Form validation in React using the useReducer Hook | dev.to | 2021-04-26

  There are a lot of libraries out there for validating forms in react. Redux-Form, Formik, react-final-form are few among them.

• reflux

  1 5,413 0.0 JavaScript

  A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux

  

  Project mention: Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript | dev.to | 2021-04-13

  One downside to relying on the type definitions in DefinitelyTyped is that occasionally the library types are not written by the maintainers. Instead, community users contribute types, and because of that some types are missing or incorrectly defined. We encountered this with the versions of ECharts and Reflux we were using. Our solution here was to add additional type definitions in our code.

• nwb

  0 5,348 1.8 JavaScript

  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)

• react-hot-boilerplate

  0 3,958 0.3 JavaScript

  Minimal live-editing example for React

• react-server

  0 3,933 0.5 JavaScript

  :rocket: Blazing fast page load and seamless navigation.

  

• alt

  0 3,469 0.0 JavaScript

  Isomorphic flux implementation

• react-refetch

  0 3,404 1.0 JavaScript

  A simple, declarative, and composable way to fetch data for React components

  

• wouter

  1 3,118 7.9 JavaScript

  🥢 A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS.

  Project mention: The tiniest CSS-in-JS solution for your open-source React components | dev.to | 2021-02-18

  wouter — a minimalist-friendly 1.3KB routing solution for React and Preact

• generator-react-webpack

  0 2,888 0.0 JavaScript

  Yeoman generator for ReactJS and Webpack

  

• react-templates

  0 2,789 0.0 JavaScript

  Light weight templates for react

  

• formsy-react

  0 2,598 0.0 JavaScript

  A form input builder and validator for React JS

Index