go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/examples/reactjs/example_app/README.md (about)

     1  # Example ReactJS app
     2  
     3  ## Introduction
     4  
     5  This is an example ReactJS app that you can copy/paste in your project.
     6  It uses multiple state-management solutions, you can opt out of any of them.
     7  It also has all the configurations in place for you to start developing your app without the need of any wiring.
     8  
     9  It follows the recommendations mentioned in [Luci test react recommendations](http://go/luci-test-tools-reactjs).
    10  
    11  The gist of those recommendations are:
    12  1. ReactJS as the base framework.
    13  2. TypeScript for languange.
    14  3. React Router for routing.
    15  4. NPM for packaging.
    16  5. MaterialUI for the UI components package.
    17  6. React Query and Redux as two example of state-management.
    18  7. Jest and React testing library for unit testing.
    19  8. Cypress for end-to-end testing.
    20  9. Eslint for linting with a small number of opinionated linting configurations (can be found in `eslintrc.js` in the rules section).
    21  
    22  ## Adding your apps meta data
    23  
    24  Before running and building the app, you need to fill in some data about it:
    25  
    26  1. In `package.json` replace `app_name` in `name` with your apps name.
    27  2. Replace `{USER}` with the username of the app's author.
    28  3. In `cypress.json` replace `{APP_BASE_URL}` with your app's base URL.
    29  
    30  ## Deleting framework folders you don't need
    31  
    32  Delete the items corresponding the framework you won't use.
    33  
    34  1. **Redux**:
    35     1. `store` folder.
    36     2. `react-redux` and `@redux/toolkit` from `package.json`.
    37  2. **React Query**:
    38     1. `example_react_query` folder.
    39     2. `react-query` from `package.json`.
    40  
    41  
    42  ## Getting ESLint to work with TypeScript paths in the VSCode
    43  
    44  To get `TypeScript`'s paths (such as `@/`) working with ESLint
    45  you will need to add the following line to your vscode settings:
    46  
    47  ```json
    48  "eslint.workingDirectories": [
    49     {
    50        "mode": "auto"
    51     }
    52  ],
    53  ```
    54  
    55  This is because we use a monorepo and we need to localize the `tsconfig`
    56  loaded for vscode's ESlint plugin.
    57  
    58  ## Building and running the project
    59  After making the modifications mentioned above and you have a working project,
    60  you can use the following commands:
    61  
    62  1. Run with watch for development: `npm run watch`.
    63  2. Run tests: `npm run test`.
    64  3. Run End to End tests with Cypress: `npm run e2e`.
    65  4. Fix eslint-fixable issues: `npm run fix-eslint`.
    66  5. Type check: `npm run typecheck`.
    67  6. Build the project for production: `npm run build`.