Introduction

Search…
Introduction
Thanks for your interest in improving React Async! Contributions of any kind are welcome. Please refer to this guide before opening an issue or pull request.
This repo relies on Yarn workspaces, so you should install and use [email protected] or higher as the package manager for this project.
Development guide
Please have the latest stable versions of the following on your machine
node
yarn
Initial setup
To start working on React Async, clone the repo and bootstrap the project:
1
git clone https://github.com/async-library/react-async.git
2
cd react-async
3
yarn && yarn bootstrap && yarn test
Copied!
Note that all work is done against the next branch, we only merge to master when doing a release.
Working with Storybook
We use Storybook as a development environment, particularly for the DevTools. Spin it up using:
1
yarn start:storybook
Copied!
This should open up Storybook in a browser at http://localhost:6006/ Run it side-by-side with yarn test --watch during development. See Testing.
Linting
Use yarn lint to verify your code style before committing. It's highly recommended to install the Prettier and ESLint plugins for your IDE. Travis CI will fail your build on lint errors. Configure VS Code with the following settings:
1
"eslint.autoFixOnSave": true,
2
"eslint.packageManager": "yarn",
3
"eslint.options": {
4
  "cache": true,
5
  "cacheLocation": ".cache/eslint",
6
  "extensions": [".js", ".jsx", ".mjs", ".json", ".ts", ".tsx"]
7
},
8
"eslint.validate": [
9
  "javascript",
10
  "javascriptreact",
11
  {"language": "typescript", "autoFix": true },
12
  {"language": "typescriptreact", "autoFix": true }
13
],
14
"eslint.alwaysShowStatus": true
Copied!
This should enable auto-fix for all source files, and give linting warnings and errors within your editor.
Testing
Use the following command to test all packages in watch mode. Refer to the Jest CLI options for details.
1
yarn test:watch
Copied!
In general, this is sufficient during development. Travis CI will apply a more rigorous set of tests.
Testing for compatibility
1
yarn test:compat
Copied!
This runs all tests using various versions of react and react-dom, to check for compatibility with older/newer versions of React. This is what CircleCI and Travis run.
Working with the examples
In the examples folder, you will find sample React applications that use React Async in various ways with various other libraries. Please add a new example when introducing a major new feature. Make sure to add it to now.json so it is automatically deployed when merged to master.
To run sample examples on your local environments
1
yarn build:examples
2
yarn test:examples
3
yarn start:examples
Copied!
Resolving issues
Sometimes your dependencies might end up in a weird state, causing random issues, especially when working with the examples. In this case it often helps to run yarn clean -y && yarn bootstrap. This will delete node_modules from all packages/examples and do a clean install.
Guide - Previous
Server-side rendering
Next - Contributing
Setting up
Last modified 2yr ago
Copy link
Contents
Development guide
Initial setup
Working with Storybook
Linting
Testing
Working with the examples
Resolving issues