From 34ffd77f1ff1ba194f11b1c467d54e30c5c8af88 Mon Sep 17 00:00:00 2001 From: Login Anca Date: Fri, 15 Oct 2021 18:01:51 +0300 Subject: [PATCH 1/3] Create React Style Guide --- react-style-guide.md | 167 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 react-style-guide.md diff --git a/react-style-guide.md b/react-style-guide.md new file mode 100644 index 0000000..3a412a7 --- /dev/null +++ b/react-style-guide.md @@ -0,0 +1,167 @@ +# React Style Guide + +- [High Level Structure](#high-level-structure) +- [Folder and File Names](#folder-and-file-names) +- [Components](#components) +- [Imports & Exports](#imports-exports) +- [Routing](#routing) +- [Forms](#forms) +- [???](#???) + + +## High Level Structure + +### Feature Folders +The project should be organised into **feature folders**. If you are building a banking system, then your project file structure could look like this: +``` +- src/ + - accounts/ + - core/ + - onboarding/ + - payments/ + - index.js +``` +Each feature folder will contain folders that group files by type (components, pages, models/entities, services, utils, etc.). +``` +- src/ + - accounts/ + - components/ + - pages/ + - redux/ + - services/ + - auth/ + - core/ + - components/ + - pages/ + - redux/ + - services/ + - onboarding/ + - payments/ +``` + +# Folder and File Names + +## Folders +Folders should have `camelCase` names. The only exception are [component folders](#components). + +## Files +File names should match the default export of the file. + +When the default export is a class (or a React component), the file name should be `PascalCased`. + +When the default export is missing or when it is not a class (or React component) the file name should be `camelCased`. + +# Components + +## The Component Folder +Every component should be organised as a folder. Everything that is specific to the component should be in its folder. +You should be able to move the component (folder) from one feature folder to another without breaking the component. + +The folder must be `PascalCased`. + +``` +- src/ + - core/ + - components/ + - Foo/ + - index.js + - FooRedux.js + - Foo.js + - FooView.js + - fooConfig.js + - service.js + - foo.scss + - fooStyle.js +``` + +### index +`index.js` should default export the component from `FooRedux`, `Foo`, or `FooView` (at least one of these three is required). +`index.js` must always be present. + +### FooRedux +This is where Redux connection will happen. It uses either `Foo` or `FooView`. The file name is `PascalCased`. + +### Foo +This is the "container" part of the component. This is where the buisiness logic should be implemented. It should render the View and nothing else. +The file name is `PascalCased`. + +### FooView +This handles the presentational part of the component. This is where the JSX of the component resides. The file name is `PascalCased`. + +### Styles +The styles can be defined either as `scss` files or as a `js` file. + +When they are defined as `js` file, the file name should end with `Style.js`. + +In both cases, the file names should contain the component name and they should be `cameCased`. + +### Other files +When necessary, the component folder can also hold services, configs and other files that are needed only by this component. + +## Component File +The Component Folder is composed by multiple component files. Each component file must define a single component and it should be the default export of the file. + +All the component should be function components. For defining components, the key word `function` should be used instead of arrow functions. + +# Import & Exports + +## Imports +The imports section of every file can be divided into three groups. + +The first group is where the 3rd party imports will be defined. + +The second group imports app dependencies that are not in the current folder. They should use absolute paths. + +The third group is for dependencies from the current folder. They will be relative imports. + +Inside each group, the imports are ordered alphabetically by the import path. +``` +import React from 'react'; // This is an exception, React should always be the first one imported +import bar from 'bar'; +import foo from 'foo'; + +import { User } from 'app/auth/models`; +import { Text, Button } from 'app/core/components'; + +import BazView from './BazView'; +import 'baz.scss'; +``` + +## Exports + +### index.js +Each folder inside the feature folders should have an `index.js` file which exports everything that can be used externally from that folder. +All the exports should be named exports. +``` +- src/ + - core/ + - components/ + - TextInput/ + - Loader/ + - index.js + - pages/ + - redux/ + - services/ + - onboarding/ + +// src/core/components/index.js +export { default as TextInput } from './TextInput'; +export { default as Loader } from './Loader'; +``` + +# Routing +TODO + +# Forms +TODO + +# ??? +What else? + + + + + + + + From 10adc1dd064d6b383661b9d232b777a7b71e1cfd Mon Sep 17 00:00:00 2001 From: Login Anca Date: Fri, 15 Oct 2021 18:03:00 +0300 Subject: [PATCH 2/3] Update react-style-guide.md --- react-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-style-guide.md b/react-style-guide.md index 3a412a7..3cef504 100644 --- a/react-style-guide.md +++ b/react-style-guide.md @@ -3,7 +3,7 @@ - [High Level Structure](#high-level-structure) - [Folder and File Names](#folder-and-file-names) - [Components](#components) -- [Imports & Exports](#imports-exports) +- [Imports & Exports](#imports--exports) - [Routing](#routing) - [Forms](#forms) - [???](#???) From 62aa3d3c146722c810e93621fd1bf038c2b7f1fe Mon Sep 17 00:00:00 2001 From: Login Anca Date: Fri, 15 Oct 2021 18:03:51 +0300 Subject: [PATCH 3/3] Update react-style-guide.md --- react-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-style-guide.md b/react-style-guide.md index 3cef504..dc5031c 100644 --- a/react-style-guide.md +++ b/react-style-guide.md @@ -103,7 +103,7 @@ The Component Folder is composed by multiple component files. Each component fil All the component should be function components. For defining components, the key word `function` should be used instead of arrow functions. -# Import & Exports +# Imports & Exports ## Imports The imports section of every file can be divided into three groups.