---
# System prepended metadata

title: hands on 1

---

# 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

```
![](https://i.imgur.com/ysCYda8.png)
- 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