ultimate-react

React Blazing The fatest Toolchain

React 17 ready, including the New JSX transform

Table of Contents:

0. Requirements
1. Setup
2. Features
3. Routes
4. Linting / code style
5. Parcel (bundler) / Babel (compiler)
6. React Features
7. Styling
8. Testing
9. Deployment
10. Additional Packages
11. FAQ
12. Roadmap

Requirements

• Node.js
• Eslint extension (recommended)
• Prettier extension (recommended)
• Yarn (highly recommended)

Building and running on localhost

First install dependencies:

yarn install

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

To run in hot module reloading mode:

yarn start

Open localhost:1234/ in your browser

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

To visualize the size of your final bundle:

yarn bundle_analyze

It creates two new folders ./build-report & ./parcel-bundle-reports and opens a page in your browser

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"

Usage:

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

• Code splitting

React Lazy

Parcel dynamic imports

Routes

React Router

@components/Routes

add new pages at @pages folder

Bundler / Compiler

Parcel: Blazing fast, zero configuration web application bundler

Babel Babel is a compiler for writing next generation JavaScript.

Linting / code style

Eslint (airbnb style)

Prettier

yarn format // run prettier on all /src js/jsx files
yarn format:check // check for unmatched prettier code style

React Features

React Lazy: Load different parts of the application only when they're needed (code-splitting)

Suspense: Display useful loading states

Context Api: Provides a way to pass data through the component tree without having to pass props down manually at every level

Hooks: Let you use state and other React features without writing a class component. In other words, Hooks are functions that let you “hook into” React state and lifecycle features from function components.

Styling

Sass / Less files are supported out of the box.

import './custom.scss';

can be imported at any scope:
//global (App.js) <- will be applied at everything, great for reseting css, defining color variables, importing sass/css libraries
//page example: (home/index) <- styles will be applied at /home but not at other pages
//component (MyComponent) <-

if you'd like an css in js approach:

recommended

Styled components (with Global Style)

import styled from 'styled-components';

const StyledContainer = styled.div`
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
`;

Deployment

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

Vercel:

vercel deployment is supported vercel.json

// package.json scripts:
  yarn dev:vercel //vercel dev
  yarn preview //vercel
  yarn deploy //vercel --prod

Express:

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

Apache:

// .htaccess
    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

gh-pages

// package.json
  "homepage": "https://website.com",

Testing

To run unit tests:

yarn test

you can implement any test runners at this point

Additional Packages

Axios

dotenv

FAQ

what react-blazing is?

• not a react framework like next, gatsby
• not a react component library
• not boilerplate
• not a create-react-app abstraction

so what react-blazing is ? a complete react development toolchain

• speed

• implements the latest tools