The goal of this project is to show you the very latest features of React that are still in development (such as Suspense).
You can try online the demo to understand the benefits of those new features and take a look at the source code to better understand those new concepts.
๐ฏ ๐บ Watch the screencast on this project, presenting React Suspense
๐ฏ ๐บ Watch the talk on this project, presenting React Suspense (french) ๐ซ๐ท
๐บ Watch a recording of end to end tests with Cypress
- Nodejs v8
- npm v5
Using the features still in development such as Suspense or Time Slicing need a custom build of React. It is shipped with this project in the react-modules folder. If you wan't to make that build yourself, follow the instructions in the same folder.
git clone https://github.com/topheman/react-fiber-experiments.git
cd react-fiber-experiments
npm install
npm start
npm run build
Will build a production version of the website in the build
folder.
Run npm run serve
to test your build on a local server.
The following command will run all your tests (both unit and end to end) in a single run mode.
npm test
npm run test:unit
: single run of the unit testsnpm run test:unit:watch
: run the unit tests in watch mode
Works the same way as the end to end tests of the topheman/npm-registry-browser project.
I'm using cypress.io for the e2e tests. You will find them in cypress/integration.
npm run test:cypress
: single run the e2e tests. It will:- build the project and serve it on http://localhost:5000 (that way, your tests reflect exactly what the end user would see in production)
- run the tests in cypress/integration folder
- tear down once tests are passed (or failed)
npm run test:cypress:dev
: use this one when you're coding your tests. It will:- spin up a dev server on http://localhost:3000 (so, you don't have to
npm start
) - open the cypress client that will let you choose which tests you want to run
- spin up a dev server on http://localhost:3000 (so, you don't have to
npm run test:cypress:debug-build
: use this if your e2e tests only fail on a production bundle, to debug the tests with the production version of your app. It will:- build the project and serve it on http://localhost:5000
- open the cypress client that will let you choose which tests you want to run
On this project the end to end tests are not run on the precommit hook, they are run on the CI to gain time (take a few seconds before pushing to run them).
Cypress is launch with: cross-env CYPRESS_TRAVIS=$TRAVIS cypress run
- that way, it is possible in your cypress tests to detect whether you're on CI or not with Cypress.env("TRAVIS")
. More infos about cypress managing env vars.
Your code will be automatically linted / formatted when you commit. More infos on topheman/my-react-app-starter
Each git push
triggers a test suite on travis. The following will be ran:
- linting
- unit tests
- end to end test with cypress
The end to end test sessions are recorded, you can check them here.
On each commit (or PR) pushed to master
, if the tests are passing, a version of the website will be automatically deployed from travis to a staging server: https://staging-react-fiber-experiments.surge.sh (that way, your QA team will be able to test your latest stable features before you release them)
On each tag pushed to master
:
- a new version will be deployed to the production server: https://react-fiber-experiments.surge.sh
- the artefacts generated during build (the
build
folder) will be uploaded to the related release, so that you could re-download them at any time (see releases section)
๐ More infos about Continuous Deployment
Based on topheman/[email protected] for the create-react-app boilerplate (eslint/prettier/others advanced setup). Added react-app-rewired to override webpack's config.resolve.modules
(and be able to use custom react builds).
Based on topheman/npm-registry-browser for the layouts/css/ui.
This remains an un-ejected create-react-app project, which means that you can:
- update
react-scripts
(remain onv1.x
- currently relying onreact-app-rewired
) - customize or remove any of the features added
The original CRA guidelines are still available here
- ๐บ Suspense! - Dan Abramov at ReactFest (march 2018)
- ๐บ Beyond React 16 - Dan Abramov at JSConf Iceland 2018 (april 2018)
- ๐บ React Suspense - Andrew Clark at Zeit Day 2018 (may 2018)
- ๐บ Route Recalculating - Ryan Florence at React Rally 2018 (august 2018)
- ๐บ Algebraic effects, Fibers, Coroutines Oh my! - Brandon Dail at React Rally 2018 (august 2018)
- Didact Fiber: Incremental reconciliation - React Fiber explained by Rodrigo Pombo
- React 16 new core architecture from the reactjs doc
- Demo: Coordinating async React with non-React views - draft by Andrew Clark
- Suspense section in facebook/react
- @reach/router by Ryan Florence
- sw-yx/fresh-async-react - a repo of links about Async React maintained by @swyx that you can PR