⭐ A non-SSR React starter with TypeScript / No Redux repo with the aim to implement scalable gold star standards from the get go!

Overview

React Starter 🚀

Pop the kettle on, all the boilerplate is sorted!

A React starter repo with the aim to implement "scalable gold star" standards from the get go giving some examples with a couple of screens.

Intro / Motivation

This hopefully exists as a "living document" in the sense that as popular patterns change and packages update, this starter app will also update.

To be honest it exists to fill that gap when you want to start a new side project / hobby project where you have that cracking idea but you say: "I really can't be bothered setting everything up and putting boilerplate in... "

Getting Started

Unlike the React Native starter kit (see here) with this being a React Web App there's no extra boilerplate other than having npm/yarn installed. It's built on top of Create React App (CRA) and you can find more here: https://create-react-app.dev/

Outline

This starter will setup you up with a project has:

  1. Structure/Architecture with Prettier and ESLint and TSConfig
  2. React (from TypeScript Template.)
  3. React Context
  4. React Router Dom
  5. Axios
  6. React Hook Form
  7. Basic pages / Navigation
  8. TypeScript (Nothing too scary)
  9. TypeScript Jest & React Testing Library

In the future maybe? 🤔

  • Detox/Appium (E2E tests)
  • Fastlane?
  • Analytics?
  • Crashes? Sentry?
  • Deeplinks?
  • Firebase? Push Notifications?
  • React-Query / More complex opinionated state management.
  • PWA?

Reccomended VS Code Extensions

These are the ones that I've found help with the dev workflow - you might equally find them not so helpful.

  • Auto Close Tag (Essential)
  • Auto Rename Tag (Essential)
  • Babel JavaScript (Essential)
  • ESLint (Essential)
  • Prettier (Essential)
  • Code Spell Checker (Handy)
  • Color Highlight (Handy)
  • Partial Diff (Handy allows selection of text CTRL+C and then right click on another selection to - get a git like compare view)
  • Path Intellisense (Handy)
  • Rainbow Brackets (Depends on how much you like colours - but it's quicker nested function identification)
  • vscode-icons (VSCode's icons have come along way but these are still a litle better)
  • Sass (Handy for styling)
  • Scss IntelliSense (Handy for styling)
  • CSS Modules (Handy for styling)
  • GitLens (This can be a bit resource intensive)

Lets address the React elephants in the room 🐘

  • We're not using NextJS / RemixJS - this is because these are big frameworks for use cases where static site rendering / generation is important. This starter kit assumes you're only going to need single page web app, it is worth thinking about how much you REALLY need SSR for what is a web app at a single domain.
    • It'll bring a lot of overhead when developing new screens / using state and how they'll work in the lifecycle of the client bundle and when they've been rendered through SSR.
      • There's even complexities when dealing with styling.
  • There is a TON of documentation discussing frameworks, so I'll cut this section short, but it's some food for thought.

Let's address the CSS-in-JS elephant in the room 💅

  • Preface: I agree that styled-components and the various litter of other libraries have a nicer dev experience to a degree.
  • They're not included here because they're not necessary, the website is faster just using CSS and a smaller bundle size, using CSS modules means we have the benefit of scoped class names based on the component easy enough.
    • We can even import our theme files we use in scss into our js files thanks to the sass-loader in the create-react-app base!
  • Everyone is familiar with CSS + CSS workarounds, where as CSS-in-JS libraries have their own perculiarities and just move issues elsewhere, for example we shun !important yet styled-components just has a different implementation: https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
  • There's an argument on markup being more verbose based on the styled component reading as what it is... but there's not much difference at a glance ...
    • vs
      ...
  • CSS-in-JS abstracts away the semantic benefit of HTML, e.g. we don't know if a is an li or ol or span or just mapped div elements.
    • Or is a div, aside, article, section ?
    • It'd be mentally taxing and pretty ugly if we were to start doing or ContainerAside ...
  • CSS-in-JS packages tend to bring in dependency issues, they're doing a lot under the hood and are relying on a lot of packages, and there can be issues in niche cases.
  • Keeping styles with where a component is defined only works for small components, as soon as they're complex you'd abstract the styles into styles.tsx file anyway. Why not a css file from the start?
  • There's a lot of comparisons out there and if the marginally better developer experience is that crucial then it won't be a big job to bring a css-in-js library in.
  • It's mindblowing that these libraries have the ability to introduce JavaScript / TypeScript errors in CSS. JS issues in CSS! What?! 😠
    • We won't even talk about the mess of introducing TypeScript to type the CSS-in-JS styles ...

Assumptions

  • You enjoy single line quotes, no semi-colon enforcement and pretty much all the auto-formatting from Prettier out of the box.
  • You agree with the current ESLint ruling for both React / React Hooks / TypeScript
  • You're ok with having a font added by default, as it can be a quirk to setup and it'll show you where it needs to go.
  • You're ok with TypeScript / React Hook Form -> These are probably the most opinionated parts. TS is in here for a laundry list of reasons.
    • React Hook Form however is a lighter alternative to Formik which is kinda heavy - but has it's own downsides, this at the least makes it functional for basic forms.
  • You're ok with ts-jest for TypeScript backed testing, and react-testing-library for rendering the components for tests.
    • The tests here are also focused on the behaviour of the components as opposed to strictly checking data / display rendering.
  • To be honest I probably wouldn't be bothered about putting screens inside of a pages/ folder however Next and other frameworks have popularised this to the point where it feels 'weird' to not have a folder for it.
    • Similarly loggedIn/ and loggedOut/ folders are just a method of keeping a mental map of what pages relate to what section of the web app. Easy enough to just not do that if you disagree!
  • You're ok with a CSS reset being done by Normalize.css. There's probably more aggressive resets, but that's not my decision to enforce. A lot of frameworks will use Normalize by default.
  • You're ok having the font-size set to a percentage based on the browsers default and then we user rem throughout for our sizing. E.g. 62.5% is 10px, therefore 1 rem = 10px. This just makes life easier.
  • You're ok with SASS and CSS modules.
    • CSS Modules is just auto generated BEM so we don't have to mentally look after those class names.
    • CSS Module native variables and modules aren't particularly easy to setup / SASS variables are compiled so we get values in the css build output which is faster.
You might also like...
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

⚡️ realtime scalable server performance monitor application built using react, node, redis and socket.io with clusters module.
⚡️ realtime scalable server performance monitor application built using react, node, redis and socket.io with clusters module.

PERFMonitor - Performance Monitoring System Introduction PERFMonitor is a web application that shows you performance and problems of one or more serve

Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.
Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.

Mini-React Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates. Demos A simple running screenshot: Intr

⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.
⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.

ScoutBar ⌨️ Spolight for your app See Demo On Codesandbox See Documentation ⚡️ Overview Users enjoy hitting CMD + K to search and perform complex acti

AuthBee: a NPM package to implement authentication logic for the front end of your JavaScript project
AuthBee: a NPM package to implement authentication logic for the front end of your JavaScript project

AuthBee AuthBee is a NPM package to implement authentication in your JavaScript

A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

XeCours A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

A lightweight open source alternative to linktree, complete with Docker container that hosts your web server and code.  Written in ReactJS SSR.
A lightweight open source alternative to linktree, complete with Docker container that hosts your web server and code. Written in ReactJS SSR.

🔗 LittleLink-Server This project is based on the great work from littlelink It takes the same simple approach to a link page and hosts it within a No

Just made this repo to test firebase with my react app.

Firebase Setup Deployment Status Just created this repo because I tend to forget the steps to add firebase to my projects. Steps Go to Firebase home p

The repo shows how to connect your React app to StarkNet

StarkNet.js + Cairo + Hardhat + React This repo shows how to connect your React app to StarkNet. Scripts helper mkdir -p build starknet-compile contra

Owner
Kenneth*
Senior Software Engineer > React, React Native, JavaScript 💪 > *Not Hank Scorpio 🔥
Kenneth*
Star Wars is a React App that's consumes an external Star Wars' API

Star Wars Star Wars is a React App that's consumes an external Star Wars' API. Installation First, download the zip or clone this repository into your

Victor Kamei Kay 2 May 7, 2022
Open-source project. Hacktoberfest2022 - Contribute given programs in any language you want, every valid PR will be accepted!!! Make sure to star this repo.

Hacktoberfest-React-Project About PowerTheWeb is an open-source project to help web developers make their road easy to become a successful web develop

DevvSakib 19 Nov 13, 2022
Gold news is a free news website where you can access any news around the world. This project is made with react

Gold news is a free news website where you can access any news around the world. This project is made with react

Yash sharma 3 Nov 6, 2022
A full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.

Appo Music About Appo Music is a full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features

Ori Ravid 81 Oct 30, 2022
A Password saver app that saves all of your social and non social accounts secure

A Password saver app that saves all of your social and non social accounts secure please give it a star ?? This project was created Using Reactjs, and

Hashim Aliyu Hashim 1 Feb 13, 2022
a simple implement of react redux, redux-thunk with hexagonal architecture

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Cuong Nguyen 3 Aug 18, 2022
STAR WARS web page using the SWAPI API information build with React

Star Wars Página web de STAR WARS usando la información de la API SWAPI. La web desarrollada es una web con información sobre las naves de Star Wars y

Carlos 4 Aug 8, 2022
Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind)

Twitter 2.0 with REACT.JS! ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE Sanity HERE This project was bootstrapped with Create Rea

Sashen Jayathilaka 4 Aug 21, 2022
Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind & GoogleAuth)

Twitter 2.0 with REACT.JS! ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE Sanity HERE This project was bootstrapped with Create Rea

Sashen Jayathilaka 5 Sep 12, 2022