https://github.com/entando/widget-react-boilerplate

Boilerplate code to create react widgets
https://github.com/entando/widget-react-boilerplate

Last synced: 11 months ago
JSON representation

Boilerplate code to create react widgets

• Host: GitHub
• URL: https://github.com/entando/widget-react-boilerplate
• Owner: entando
• License: lgpl-3.0
• Created: 2019-09-10T14:43:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-02-21T09:56:32.000Z (over 6 years ago)
• Last Synced: 2025-03-26T21:33:43.589Z (over 1 year ago)
• Language: JavaScript
• Size: 562 KB
• Stars: 0
• Watchers: 7
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.


See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.


It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.


Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run lint`

Runs Eslint to the root folder and fix all the issues that can be handled automatically.

## Linter

This project is extending the [Airbnb Style Guide](https://github.com/airbnb/javascript) eslint rules, and applying custom rules (see package.json) to improve code quality.

## Folder structure

- ./src

  - ./assets `--> place to store assets like images, fonts, custom icons, etc.`

  - ./api `--> api calls, grouped by feature: the structure should mimic the api call itself`

  - ./components

    - ./\_\_tests\_\_ `sample test folder`

      - App.test.js `--> this way test files are closer to other ones, but in a separate folder in order to keep the folder structure cleaner`

    - ./common `--> folder containing common components`

      - CommonComponent.js

    - ./App `--> example of component that could have container`

      - App.css

      - App.js `--> keep the same name as component folder so we can find it easily when doing a file search`

      - AppContainer.js `--> container for the App component, adds state`

  - ./state `--> application state (e.g. redux), if any`

    - ./sample-feature `--> grouping by feature`

      - sample-feature.actions.js

      - sample-feature.reducer.js

      - sample-feature.selectors.js

      - sample-feature.types.js

    - store.js `--> configure redux store`

  - index.js `--> entry point`