Andrew-Colman / react-blazing

the react toolchain 🔥

react-blazing 🔥

[wip] we're moving for a monorepo ( to include easy template / feature generation)

React Blazing Toolchain

• developer friendly
• blazing fast
• robust
• zero config to get you app running (shining on the web ✨)

Table of Contents:

0. Requirements
1. Running on localhost
2. Building
3. Features
4. Routes
5. Parcel (bundler)
6. Styling
7. Deployment
8. Testing
9. FAQ
10. Roadmap

Requirements

• Node.js

• Yarn (recommended)

• basic knowledge of react

Running on localhost

First install dependencies:

yarn install

This project uses yarn package manager but you can use npm instead

To run dev server in hot module reloading mode:

yarn dev

Opens by default: localhost:1234/ in your browser

Building

To create a production build:

yarn build

It creates production-ready bundles that contain very little to no unused development code, ensuring your end-user gets fast load times. Output: /dist folder

Deployment

Features

• Aliases

.babelrc alias

      "alias": {
        "@app": "./src",
        "@components": "./src/components",
        "@pages": "./src/pages",
        "@hooks": "./src/hooks"
      }

Add new alias:

        //new alias example:
        //"key: "path"
        "@helpers": "./src/lib/utils/helpers"

for IDE intellisense you should add it at jsconfig.json or tsconfig.json

//"key/*": ["./path/*"],
"@helpers/*": ["./lib/utils/helpers/*"],
//           please omit /src/ as it is specified in baseUrl:

Usage:

//instead of importing:
import MyComponent from '../../../../../../../components/MyComponent';
// just use:
import MyComponent from '@components/MyComponent';

• Code splitting

---

React Lazy preferred

Parcel dynamic imports

Routes

Wouter - client side routing for react

@components/Routes

add new pages at @pages folder pages/

Read more at Routes guide

Bundler

Parcel: Zero configuration web application bundler

most features like parsing js/ts files, importing scss/svg/... are presented by parcel learn more at their docs

Styling

Sass / Css Modules / Less files are supported out of the box.

Read more at Styling guide

Deployment

Make sure your web server rewrites all requests to '/' since react is a SPA and we're using client-side routing to make multi pages available

Read more at Deployment guide

guides for apache, express, vercel, netlify, ...

Testing

you can implement any test runners / strategies at this point

recommendations:

• for component level: jest + testing-react
• for end-to-end: playwright or cypress

FAQ

What React Blazing is ?

• a complete react development toolchain focused on speed

• implements the latest tools in the industry (modern react)

• set of packages to improve your dev life even further like: blazing-cli / reaxi

• not a react framework like next, gatsby

• not a react component library

• not boilerplate

• not like create-react-app

comparison to create-react-app

• No need of deleting a lot of files like app.css, index.css, and other boilerplate...

• No need to eject or adding a config override 😗

• No tons of packages like react-scripts that sometimes doesn't even required =

• (But) If you are complete new to react, it's highly recommended choosing cra as it can prevent making beginner mistakes

---

Roadmap

• Implement React 18 (when released)

• Templates/examples

• documentation website

planned feature generation:

• parcel config
• add linters (eslint )
• add bundle analyzer

Formerly Ultimate React, now called React Blazing 🔥

• React 17 ready, including the New JSX transform