This structure is now obsolete. Please consider NextJS instead.

React Quickstart

A modern template to jump start your React project. The usual additions you make after CRA generation have already been done for you, including code styling rules, auto formatting, test setup, coverage reports, SCSS modules, modern redux setup and more (check the feature list below for more information). You can simply clone-build-run and start adding features, without spending time on setting up folder structures, linting, git hooks, etc.

Built on top of the latest create-react-app, as of Aug 2022, with the following module versions:

Node >= 14.0.0 and npm >= 5.6 are required on your environment, as specified by create-react-app.

How to use

git clone git@github.com:sachie/react-quickstart.git <YOUR_PROJECT_NAME>
cd <YOUR_PROJECT_NAME>
yarn or npm i (or npm i --legacy-peer-deps)
yarn start or npm start

Update your git remote url with git remote set-url origin [NEW_REPO_URL]

Then add some pages, components, tests, etc. to the site, as needed. Check the code comments for tips and explanations.

Features

Latest react and create-react-app, and all the advantages they bring.
Clear file structure to separate your pages, shared components, HOCs, service wrappers, constants and texts.
CSS Modules to avoid classname clashing and neatly organize stylesheets. Learn more about CSS modules here. Shared/global styles and scss variables can go in /src/assets/styles. Basic examples of modules, variables and class combining are included.
Eslint, Stylelint, Prettier and comprehensive configs for each, to lint all your files as you code, and keep a consistent coding style within the project. Some highlights include: automatic import verification and sorting, clear tag spacing, test file linting, filename checking, css animation performance and browser-unsupported feature checking, etc.
Additional scripts for testing, lint checking and fixing with ease (see Scripts section below), as well as the default scripts created by CRA.
Git hooks with husky to run your tests or check for lint issues, before committing/pushing code. Pre-commit and Pre-push hooks are included. If you're having trouble with using the hooks, or if you're using Yarn 2, check the husky documentation.
Absolute imports to prevent loads of ../../ import statements.
Modern Redux structure using Redux Toolkit which is recommended by Redux. (Can be removed easily if it's not needed)
Test setup with examples, lint configs and scripts for coverage reporting (with istanbul), and CI support.
Works with both npm and yarn as the scripts use ultra-runner. Remove the yarn.lock file if you're using npm.
Github actions configuration to build, run lint/tests and upload coverage. (Can be removed if not needed, or used with your own Github Secrets)

What's not included

No examples of redux middleware or enhancers, as developer preferences vary for them.
No server side rendering setup.
No containerization or infra configurations.

Scripts

Note: npm or npm run can be used instead of yarn if preferred

yarn start - Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page or component will reload when you make edits.
yarn test - Launches the test runner in the interactive watch mode. See the React documentation on running tests for more information.
yarn test:no-watch - Runs tests without watch mode. Is used for the pre-push git hook, and can be used with continuous integration.
yarn test:coverage - Runs tests without watch mode and outputs coverage reports to /coverage.
yarn build - Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
yarn eject - Ejects the create-react-app configurations (webpack, Babel, ESLint, etc.) into your project as dependencies in package.json. Should be used if the provided configurations aren't working for you.
yarn lint - Runs eslint, stylelint and prettier checks, but does not fix any issues.
yarn lint:fix - Runs eslint, stylelint and prettier checks, and fixes possible issues. Some issues might still require manual fixing.

The following scripts are also included if the linters need to be used separately.

eslint, eslint:fix, stylelint, stylelint:fix, prettier, prettier:fix

Discussions and Contributions

For any questions, suggestions or comments, please use the github discussions section. If you have an improvement to submit, feel free to open a PR. For more details, check the Contribution guidelines

sachie/react-quickstart