JavaScript Code Design

Open-source JavaScript projects categorized as Code Design

Top 23 JavaScript Code Design Projects

  • GitHub repo create-react-app

    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.

  • GitHub repo react-router

    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.

  • GitHub repo react-boilerplate

    :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:

  • GitHub repo react-redux

    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.

  • GitHub repo reselect

    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.

  • GitHub repo electron-react-boilerplate

    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
  • GitHub repo react-relay

    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.

  • GitHub repo recompose

    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

  • GitHub repo classnames

    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.

  • GitHub repo redux-form

    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.

  • GitHub repo react-redux-universal-hot-example

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

  • GitHub repo react-jsonschema-form

    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
  • GitHub repo react-final-form

    🏁 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.

  • GitHub repo reflux

    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.

  • GitHub repo 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)

  • GitHub repo react-hot-boilerplate

    Minimal live-editing example for React

  • GitHub repo react-server

    :rocket: Blazing fast page load and seamless navigation.

  • GitHub repo alt

    Isomorphic flux implementation

  • GitHub repo react-refetch

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

  • GitHub repo wouter

    🥢 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

  • GitHub repo generator-react-webpack

    Yeoman generator for ReactJS and Webpack

  • GitHub repo react-templates

    Light weight templates for react

  • GitHub repo formsy-react

    A form input builder and validator for React JS

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-06-14.

Index

What are some of the best open-source Code Design projects in JavaScript? This list will help you:

Project Stars
1 create-react-app 88,451
2 react-router 43,358
3 react-boilerplate 27,576
4 react-redux 21,061
5 reselect 17,985
6 electron-react-boilerplate 17,756
7 react-relay 15,738
8 recompose 14,742
9 classnames 14,108
10 redux-form 12,553
11 react-redux-universal-hot-example 12,038
12 react-jsonschema-form 10,138
13 react-final-form 6,514
14 reflux 5,413
15 nwb 5,348
16 react-hot-boilerplate 3,958
17 react-server 3,933
18 alt 3,469
19 react-refetch 3,404
20 wouter 3,118
21 generator-react-webpack 2,888
22 react-templates 2,789
23 formsy-react 2,598