LABORATORY REACT 18 - EXPERIMENTAL

Goal

This project has been made for testing the alpha version of react 18.

Obviously, the app is using the alpha version of react 18. For avoiding the relative path, I modified the webpack and allowing the import with an alias using React App Rewiring. I also added the support for sass files.

In addition, I added prettier and configured it for working well with esLint. Finally, I added the basic usefull package such as the router and the helmet.

Plan of the presentation

I explain with all the details how I build the project and my way of working.

• Experiences
• Documentation
• Organization
• Development
• Installing
• Running
• Commands

Experiences

• Experience1: Testing the useTransition
• Experience2: Testing the useTransition in a concurrent react
• Experience3: Testing the Suspense with two call of random times
• Experience4: Testing SuspenseList for forcing an order (experience 3 example)
• Experience5: Testing useDeferredValue
• Experience6: Testing the experimental unstable_useOpaqueIdentifier

Documentation

Code documentation

The jsdoc can be generated locally with the following command :

npm run build:docs

Organization

Organization of the global folder

Folder's Name	Description of the folder
out	The documentation generated by jsdoc
public	Regroup the images and public files
src	Regroup the source code

Organization of the src folder

Folder's Name	Description of the folder
components	Regroup the components used inside the pages
constants	Regroup the exported constants
pages	Regroup the components representing the pages
services	Regroup the services of the app
styles	Regroup the scss files

Development

Packages

• react-app-rewired: Allow us to rewrite the config of React without ejecting the app
• customize-cra: Allow us to rewrite the config of webpack and create module alias
• eslint: For linting the code with EsLint
• @babel/eslint-parser: Changing the parser for having access to eslint in babel
• eslint-config-airbnb: For having the set of rules airbnb for eslint
• eslint-plugin-import: For managing the alias import with eslint
• eslint-plugin-react: For managing the react rules
• prettier: For formating the style of the code
• eslint-plugin-prettier: For using the prettier package with esLint
• sass: For using the SASS css preprocessor (scss)
• jsdoc: For managing the dev documentation of the project
• react-router-dom: For managing the router and the path to the differents pages
• react-helmet: For managing the meta of the differents page
• use-deep-compare-effect: For deep comparison on useEffect

Installing

For installing the package, you will need to force the installation because some of the package are not yet made for this alpha version :

npm install --force

Running

For running the API, a single command is needed.

npm run start

Commands

• npm run start: Run the linter and then the project
• npm run build: Build the project
• npm run test: Run the test of the project
• npm run eject: Eject the application (sometimes necessary)
• npm run linter:fix: Run the linter and fix the errors
• npm run build:docs: Build the documentation from the comments in the code
• npm run check-update: Check if the package are up to date (for now, everything is except the testing and webvital)