Discover the latest features of React fiber like "Suspense"
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
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 modeWorks 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:
npm run test:cypress:dev
: use this one when you're coding your tests. It will:
npm start
)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:
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:
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
:
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:
react-scripts
(remain on v1.x
- currently relying on react-app-rewired
)The original CRA guidelines are still available here