[MINTCAMP] React Community_Summary

🔍Project Overview
1. Summary
👉 Purpose
基本的なコミュニティ機能はJavaScriptとReactionのみ!!
反応の基本を充実させることを目標に、状態管理ライブラリ(反応器、反応器、反応器など)を削除して作成!
Develop function of basic community with Javascript, CRA without state management library (redux, mobx, recoli,,) aiming to strengthen the basics of React.
コードの拡張性を考慮して開発!
Thinking about the extensibility of the code in developing.
設計に基づいて、素子を効率的に分離する方法を設計します!
Inventing a efificent way to seperate components according to design.
フォルダの構造を理解し、独自のフォルダ構造を構成します.
Learn about the folder structure and build my own folder structure.
Atomic Dseignを理解し、なぜ反応がAtomic Designなのかを考える
Think about why React use Atomic Design.
👉 About
Title : "MintCamp"
Base : CRA, JavaScript
Styles : styled-component
2. Folders Structure

> components
> containers
> pages
> routers
> utils
> styles
> > assets
> > ui

Components (presentation components)
UIの複数の組合せ、リストの下部にあるグラフなどの機能単位の最小単位.
Smallest unit of functional groups such as multiple combinations of ui and charts below the list.
Containers (container components)
構成部品の集合として、構成部品にデータを転送し、ユーザーの動作を実行します.
Collections of components (1:N) transfers data to the components and performs actions accoring to user actions.
Pages
ページ、ヘルメット情報、初期要求に対応するサーバデータ、コンテナ
Responsible for one page, Basically responds 1:1 with Helmet information, server data initially requested from the server, and container.
Routers
react-router-domを使用してSPAをルーティングする
Page to route SPA, Using 'react-router-dom'
Base : RootRouter
Utils (common utility)
一般的なカスタムフックまたは機能が存在する場所で、サーバ通信に必要なaxiosファイルやその他の日付変更などの汎用関数を作成するファイルがあります.
A file of functions that are commonly used including custom hooks.
Include axios module setting file, that makes a request ro the server. ex) api.ts or setupAxios.js
Include commafy, lpad, commondate, history function file.
api call sample

import api from 'src/utils/api';

api
.get('url', {
  data: 'value',
})
.then(response => {})
.catch(e => {});

Styles
assets : A file containing images and fonts file..
ui : smallest unit of ui (ex)Button.js)
3. Setting file
スムーズな開発のためにlintとpretierの設定を行い、envファイルを使用してBaseUrlやその他のリソースを管理しました.
.env .prettierrc.json .eslintrc.json package.json jsconfig.json
4. DO NOT COMMIT FOLDER & FILES!!
次のファイルはリボン&プッシュに提出しないでください!
.vscode
.idea
.eslintcache
node_modules
build
pakage-lock.json
yarn.lock
yarn-error.log