| Name | Convention |
|---|---|
| file | kebab-case |
| function | camelCase |
| variable | camelCase |
| constant | UPPER_SNAKE_CASE |
| interface | PascalCase |
| class | PascalCase |
| component | PascalCase |
| type | PascalCase |
| enum | Don't use it. Use string union |
| Name | Convention |
|---|---|
| local variable | kebab-case |
| Global variable | G-kebab-case |
| keyframes | kebab-case |
| selector | camelCase |
| mixin | camelCase |
| function | camelCase |
Import Layout, and inject into it components like header, navigation, and templates or something. Component's name should be 'Page' excluding _app.tsx, _document.tsx, _error.tsx, etc.
Locate static file in here. The directory name must not be changed.
Mainly we write code in here.
-
- For the tiny component.
- Example :
<CustomImage />
-
- The storage for reusable materials.
- Example :
<Article />
-
- Write global context API of React.js.
- It is for dealing with Global data like an authentication.
- But you can also use the Context API for lifting state up from children you can't expect.
- Example :
<ModalProvider></ModalProvider>
-
- Main View composed of complex components.
- It will be needed when we make have to make them communicate between header and main elements, and nav with footer but we don't want to write complex code in /pages.
- Example :
<Home />
-
- The skeleton of a page.
- It defines relationship among header, main, bottom, etc.
Write CSS. Maybe you can make another /components, /layout, /providers under this directory just like /src.
-
- Utility sass functions
- Colors
- Variables
- Mediaquery
-
- Common animations
Write utility functions like fetcher, date convert, and whatever.
-
- For fetching data.
-
- For constant variables on global environment.
-
- For React.js custom hooks.
-
- For serverSideFunctions working in getStaticProps, getServerSideProps and so on.
-
- For any utility functions.