ultimate-react-template

Ultimate React Template (Parcel)

Table of Contents:

0. Requirements
1. Setup
2. Running
3. Bundler
4. Linting / code style
5. Routes
6. React Features
7. Styling
8. Testing
9. Additional Packages
10. Roadmap

Requirements

• Node.js
• Eslint extension (recommended)
• Prettier extension (recommended)
• Docker (recommended)
• Yarn (optional)

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

To create a production build:

yarn run build

Running

Open localhost:1234/ in your browser

Bundler / Transpiler

Parcel: Blazing fast, zero configuration web application bundler

Babel (es2020)

Linting / code style

Eslint (airbnb style)

Prettier

Routes

React Router

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

Styled components (with Global Style)

Tailwind css

Twin.macros

Postcss

Testing

jest

jest-enzyme

enzyme (react-adapter-16)

To run unit tests:

yarn test

Additional Packages

Axios

dotenv

Roadmap

[]- Add docker database (postgres)

[]- Add documentation

[]- Add more additional packages

[]- Add example tests