Skip to content
This repository has been archived by the owner on Feb 28, 2024. It is now read-only.

Latest commit

 

History

History
229 lines (143 loc) · 5.14 KB

README.md

File metadata and controls

229 lines (143 loc) · 5.14 KB
Raw

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:

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

Requirements

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:

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 🔥