PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

1.1.2

npm

2020-react

TheFlyingCoders 2020 React Framework

Published25 Jun 2020
Direct dependencies8
Transitive dependenciesNot calculated

README

Current package documentation

🚨 This accelerator is constantly improving, feel free to submit bugs and ideas! 🚨

TheFlyingCoder's 2020 React Accelerator

If you are building enterprise applications like me, you need full architectural freedom and code transparency to design the custom solutions your client's deserve.

This framework delivers the common tooling and code structures I found myself wanting day to day, so that you have a strong foundation when starting your next project.

Try it out using my npx installer:

npx 2020-react <project-name>

Check it out on npm

The Tools

It's 2020 and there are a whole wealth of tooling options for React, but these are the staples for every project I work on.

✔️ Typescript - Because I can't trust you to code alone
✔️ Emotion.js - Imagine if CSS got better? Now here we are.
✔️ Prettier/Eslint/Stylelint - Don't you dare touch these configs
✔️ Storybook - This will change your life, take the time to learn all it's possibilities
✔️ React Hooks - Hello functional components and simple state management
✔️ Code Scaffolding - Why do the same thing more than once? Make it a node command

The UI

There is none. Because building a great UI usually happens with your client by your side, (There are exceptions of course)

What to know?

When you first try out this framework have a good look around the tools, there is a lot of potential hidden under the hood ready to be switched on.

Progressive web app
If you find yourself needing some offline functionality, simple cacheing, or the ability to install on a phone, PWA's are for you.

To activate the simple PWA settings, just go into webpack.config.ts and flip const isPWA = false to true and update the public/manifest.json to match your app's details

WARNING: This will turn on service workers, which means cacheing! keep your dev tools open and cache off otherwise you won't any changes.

Persistent State
Ever needed your local state to stick around after a refresh? Now this is easier than ever.

Just add the persistenceId key to your App.state.ts, and give it a unique string. This will create a local storage item which is updated every time you alter the global state.

Remember once this is active remember to use your different routes to reset the state back to normal when you need it!

Async State provider
Does your app require data for it's first render? then use the AsyncStateProvider in App.tsx!

This lets you pass an Async function that can do API calls or validate routes/data etc before rendering the rest of your app. In the meantime you can pass App.loader.tsx to render a full page loader.

React will have this functionality locked down soon with Suspense, but for the time being here we are.

Server Side Rendering
Server side rendering doesn't have to be difficult!

In this framework we register all our routes ahead of schedule (with the exception being dynamic routes), so in server.tsx we loop through our routes, pre-render the html and set it up to be served!

Webpack is used at build time, to compile all the Typescript and application files correctly, to generate a server.js in your dist folder.

You could also follow a similar pattern, and render all the html to static files for each route.

Custom scaffolding
in /tools you'll find scaffolding code which you SHOULD customise.

Out of the box you can run yarn scaffold <ComponentName> to automate component creation, keeping consistency and speeding up development.

Update the code template of scaffoldUtils/Component to suit your project needs and if you want You can add the same flow for Routes/Api's, whatever you like, just follow the same structure as the component folder.

VS Code Extensions
To have the best experience with this framework and the tools in general, you need to have the right setup, so let me share some relevant ones (Alphabetical):

  • Bracket Pair Colorizer 2: Unique colours for matching brackets
  • Color Highlight: Highlights web colors inline
  • ESLint: You know what this does
  • Prettier: Same as above
  • Stylelint: And again
  • Vscode-icons: One of the best icon themes
  • Vscode-styled-components: Helps syntax highlting with CSS in JS

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 8

Native requirements
8 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
arg
Environment
{
  "local_name": "arg",
  "alias": false,
  "peer_metadata": null
}
^4.1.1runtime
chalk
Environment
{
  "local_name": "chalk",
  "alias": false,
  "peer_metadata": null
}
^2.4.2runtime
esm
Environment
{
  "local_name": "esm",
  "alias": false,
  "peer_metadata": null
}
^3.2.25runtime
fs
Environment
{
  "local_name": "fs",
  "alias": false,
  "peer_metadata": null
}
^0.0.1-securityruntime
ncp
Environment
{
  "local_name": "ncp",
  "alias": false,
  "peer_metadata": null
}
^2.0.0runtime
os
Environment
{
  "local_name": "os",
  "alias": false,
  "peer_metadata": null
}
^0.1.1runtime
path
Environment
{
  "local_name": "path",
  "alias": false,
  "peer_metadata": null
}
^0.12.7runtime
tmp
Environment
{
  "local_name": "tmp",
  "alias": false,
  "peer_metadata": null
}
^0.1.0runtime

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-mh/6oD5rR/qidQxglo1z5S3poMvh/WdDNMkvQVwx3r1MEqA+KlVKyvE29m9Jp7RF1ynCyRXotZcwVmI7+CaMPA==",
  "shasum": "e798892503922e7ee3be8b45e3c7565bdb32fc83",
  "tarball": "https://registry.npmjs.org/2020-react/-/2020-react-1.1.2.tgz",
  "fileCount": 62,
  "unpackedSize": 219702,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9DVRCRA9TVsSAnZWagAAVQMQAIIc25LIu/XtGW8oddiI\nqT3pzLjOIV02pWKIkzfeGI/guX7n1m+DY8oM8Sfuup24P1oIMy69OeAvKLUR\n5HSE+IoGmp3LkmFjvot5iXq7dzpOE884A+cvE+cm4nj7EsK2pYEc83eXDg6j\nU0iYlXWK8xJABIFdWGIdQIdvr9mnNskCxMH/Vdy/Gb+WUoabFW+k4inm5Pdx\ngmctKiJQ9MtmrSwTfpLXNhL+bBtVCV/lHcpjIYAO5lIxAE1wEceXCWCcQYzO\nbJO6AwF4FTsC6arjCMXjHQRwzVRKcVRNHBY8L7aWWtdPowmHC2hd2dN9yCpk\nGpN2sN95lVbaJUa1TZ668/hZ7kZ9/W7c3+irycxn1+eiPIEP/MQI7uiwSvL3\nfMvJYWai5AymRgwwiCJ9NQRAPPQdKVB/fB5hU3TJ2HqrMSlBymQI6eg5qBuc\ndkvxuN8HuNYFBFBFuFsrLyvfwQ6dAOZ+hAv4ioTUikCE01cuEa15V3qLcjTl\nmDZQzEhmgPFureX2Sy0Px1w7/YQeXZOaVw2CgX1U+3I5S+XvM9TrphZz2fI0\nTlQrURl0ujhsk+m8a46LgZ38xLq/9hS66D2pzMrVraVIyLOijL4C5u2CrpD9\nDmqyLDh7V/leLne3nBq5t8zIzrycJsFOwI22jQdJpqa5Go86ZFL2YmaQWj45\nBwZD\r\n=52H1\r\n-----END PGP SIGNATURE-----\r\n",
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIE5UjHM4Hhz8j0qt2AlQD+cPavwDtT1fXKmVUB+qXQklAiEAwp/nAj1icj2Z+aJ3Ff/RLGldmbbz3ffmbseZ7IO9M8Y="
    }
  ]
}

Repository

ACCESSIBLE
therealflyingcoder/2020-react

Shared repository data · GitHub

License detected in repository
MIT
License branch / ref
master
Last push
18 Jan 2022
Archived
Yes
Contributor identities
— · partial collection

Public sponsor counts have not been collected. These signals belong to the repository owner.

Downloads & popularity

1count
Gauge · observed snapshots20 Oct 2026
10.50
2026-10-20: 1 · observed 2026-10-20T21:25:18.0346634Z
20 Oct20 Oct

github · 1 observations shown. Missing days are unknown.

View observed values
Date / source periodValueObserved at
2026-10-2012026-10-20T21:25:18.0346634Z

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 18:53 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:2e9ec799aa1c3d05f995d2472be4ce748bd8b227fa108f6ba75fa68446c9104f

Other collected versions

1.2.63 Sept1.2.53 Sept1.2.43 Sept1.2.33 Sept1.2.23 Sept1.2.110 AugView all collected versions →