# hands on 1

加入 NavBar from chakra ui template
加入 test page

Q: how to design file structure
- [How To Structure React Projects From Beginner To Advanced](https://blog.webdevsimplified.com/2022-07/react-folder-structure/)
導入 react-json-schema-form

後端：
template 加入 field
- JSONSchema
- UISchema

record 加入 data field

前端
pagination: https://www.npmjs.com/package/@ajna/pagination
https://codesandbox.io/s/ajna-pagination-forked-7mrtq?file=/src/App.tsx:0-5350

## Note
### How To Structure React Projects From Beginner To Advanced

Three kind of folder structure:
- Simple Folder Structure
- Intermediate Folder Structure
- Advanced Folder Structure

#### Advanced Folder Structure

├── assets
├── components
├── context
├── hooks

- feature
- grouping by feature
- working with the code easier since all the code for each feature is collocated in the same place making it easy to update and add to
- structure of this folder follows the pages
- each feature you have another set of folders. This folder structure for each feature is a complete copy of all the folders inside the src folder (other than the features folder obviously) and an index.js file
- within your feature all your code can be organized by type (context, hook, etc.) while still be collocated together
- index.js
- the file is then used as a way to expose a public API for everything that is usable outside the feature folder for that given feature
- you create an export in a file it can be used in any other file you want.
- if we only want to expose a few components/methods for our feature which is where the index.js file comes in
- pages
- only contains one file per page
- all the logic for the features on the pages are in the features folder
- files in the pages folder are actually quite simple since they just glue together a few feature components and some general components
- layouts
- a special folder for placing any layout based components
- like a sidebar, navbar, container, etcIf you application only has a handful of layouts then this folder really isn't needed and you can just place the layout components in the components folder
- if you have multiple different layouts used across your application this is a great place to store them.
- lib
- contains facades for the various different libraries you use in your project
- For example, if you use the axios library then this folder would contain a file for that axios library that creates your own API overtop of the axios API which you then use in your application
- instead of importing axios directly in your project you would import the file from this folder associated with axios
- makes is much easier to update, and replace libraries since all the library specific code is in one place in your application
- also makes it easier to customize third party libraries to your own need
- services
- code for interfacing with any external API
- on larger projects you will have many different APIs you need to access and this folder is the place to put the code that interacts with those APIs
- helps clean up your code since instead of littering a bunch of API interaction code in your application it is all within this one folder.

### react-json-schema-form
由三部分組成
- JSONSchema
- UISchema
- formData

儲存
- template
- JSONSchema
- UISchema
- record
- formData