Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dsolartec/cra-template-material-zustand
A template for ReactJS with Zustand and Material UI v5
https://github.com/dsolartec/cra-template-material-zustand
Last synced: 28 days ago
JSON representation
A template for ReactJS with Zustand and Material UI v5
- Host: GitHub
- URL: https://github.com/dsolartec/cra-template-material-zustand
- Owner: dsolartec
- License: gpl-3.0
- Created: 2021-12-14T19:00:46.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-16T17:01:45.000Z (almost 3 years ago)
- Last Synced: 2024-10-08T15:05:44.207Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cra-template-material-zustand
A template for ReactJS with TypeScript, Zustand and Material UI v5.
## Usage
To use this template within your project, add `--template material-zustand` when creating a new app.
For example:
```sh
# NPM
$ npx create-react-app my-app --template material-zustand
# Yarn
$ yarn create react-app my-app --template material-zustand
```
> Cloning this repo pulls down the material-zustand template only; not a bundled and configured Create React App.
## Structure
### Base
- `src`
- `constants` - This folder contains the global constants, that is, those used in more than one component/module.
- `features` - This folder contains all the application modules.
- `common` - This folder contains the components that are used by more than one module.
- `hooks` - This folder contains the globable hooks, that is, those used in more than one component/module.
- `interfaces` - This folder contains the global interfaces; for example, the interface that defines the type for a group of constants.
- `pages` - If the web has more than one route, its main components must be placed here, the respective containers or layouts created for this route will be combined here.
- `stores`
- `utils`
### Feature
- `components`
- `containers`
- `hooks` - This folder contains the internal component hooks.
- `interfaces` - This folder contains the internal component interfaces types.
- `stores` - This folder contains the internal component stores.
- `index.tsx`
#### Component/Container
- `{name}` - If the component or container has separate styles or handlers it must be placed in a folder.
- `{name}.styles.ts` - This file contains the styles for the component or container.
- `{name}.handlers.ts` - This file contains all the events that are called on the buttons or inputs within the component or container.
- `{name}.test.tsx` or `{name}.spec.ts` - This file contains the tests of the component or container.
- `{name}.tsx` - This file contains the entire view of the component or container.
- `index.tsx` - If the component or container is a directory, this file must be added, exporting by default the file `{name}.tsx` (`export { default } from './{name}';`).
## Testing
To test this template, you must run the command below:
```sh
# NPM
$ npx create-react-app my-app --template file:./
# Yarn
$ yarn create react-app my-app --template file:./
```
## License
Check the [LICENSE](./LICENSE) file for more information.
## Contributors
Thanks to this amazing people for make this template better:
- [@danielsolartech](https://github.com/danielsolartech)
> If you help to this template, feel free to add here.