Front-End

Naming Conventions

Application Folder Structure

Service(s)

Folder Name

[{ServiceName}] (PascalCase): Conversations

File Name

{ServiceName}+".js" (PascalCase): Conversations.js

React Functional Component Name

 

{ServiceName}+"Service"

function ConversationsService() {
	...
}

Folder Structure

Component(s)

Component Types

Global Component: Tüm uygulama içersinde veya farklı servislerde birden fazla kere kullanılan component'lardır.
Service Component: Tek bir servis içerisinde bir veya birden fazla kere kullanılan component'lardır.
Partial Component: Bir component içersinde kullanılan alt component'lardır.

Global Components Locations

Application Level: /components/app: Uygulamanın en üst seviyesinde bir kere kullanılan komponentlar.
Basic: /components/basic: Eğer bir komponent sadece prop alarak işlemler yapıyorsa basit bir komponenttır.
Advanced: /components/advanced: Eğer bir komponent kendi içersinde Redux, Modal, Utils gibi özelliklere sahipse gelişmiş bir komponenttır.

Folder Name

[{ComponentName}] (PascalCase): Sidekick

File Name

{ComponentName} + ".js" (PascalCase): Sidekick.js

Component Folder Structure

Component Folder Structure Sample

image-1654094375980.png

React Functional Component Name

{ServiceName}+{ParentName}+{...}+{ParentName}+{ComponentName}

function ConversationsSidekickToolbar() {
	...
}

Modal(s)

A modal is a dialog box/popup window that is displayed on top of the current page.

Folder Structure

Context(s)

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Folder Name

/contexts

File Name

{ContextName} + ".js" (PascalCase): Default.js

React Functional Component Name

{ParentName} + {ContextName} + "ContextProvider"

export function ConversationsDefaultContextProvider({ children }){
	...
}

Constant(s)

What is a constants file?

A constants file is a dedicated file to store declared constant properties. The beauty of this file is that it’s accessible globally throughout the app.

Declare A Constant

ES6 provides a new way of declaring a constant by using the const keyword. The const keyword creates a read-only reference to a value. By convention, the constant identifiers are in uppercase.

export const MAX_FILE_SIZE = 1048576 * 100;

Folder Structure

Folder Structure Sample

image-1654083393467.png

Constants File Sample

export const MAX_FILE_SIZE = 1048576 * 100; // 100 MB

export const FILE_UPLOAD_ACCEPTS_IMAGES = "image/jpg,image/jpeg,image/png,image/gif,image/tiff,image/webp";
export const FILE_UPLOAD_ACCEPTS_VIDEOS = `video/mp4,video/quicktime,video/mov,video/avi,video/mpg,video/wmv,video/x-m4v,video/webm,video/x-matroska,video/x-msvideo,video/x-ms-asf,video/x-ms-wmv,video/x-flv,video/3gpp,video/ogg`;
export const FILE_UPLOAD_ACCEPTS_IMAGES_VIDEOS = `${FILE_UPLOAD_ACCEPTS_IMAGES},${FILE_UPLOAD_ACCEPTS_VIDEOS}`;

Constant Files Grouping Sample: index.js

export * from "@constants/fileUploads";
export * from "@constants/hotkeyShortcuts";
export * from "@constants/languages";
export * from "@constants/theme";

Hook(s)

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules of Hooks

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code. These rules are:

Folder Structure

Folder Structure Sample

image-1654009287342.png

React Hook File Sample

import { useEffect, useState } from "react";

function useWindowSize() {
  	...
}

export default useWindowSize;

React Hook Grouping Sample: index.js

export { default as useDebouncedEffect } from "@hooks/base/useDebouncedEffect";
export { default as useIsMounted } from "@hooks/base/useIsMounted";
..



Util(s)

Router(s)

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

React Functional Component Name

{Name} + "Router": AppRouter

function AppRouter() {
  ...
}

export default AppRouter;

Folder Structure

React Component Inside Structure

Example:

react-component-inside-structure-example.jpg

Publishing: Scheduler: Post: Editor