Reactメモ帳

Front-end(This repository: https://github.com/TaishiKobari/reactPad)
- React.js
- TypeScript
- Netlify(deploy)
Back-end(repository: https://github.com/TaishiKobari/expressPad)
- Express.js
- TypeScript (2020/12/4 added)
- MongoDB Atlas
- Heroku(deploy)

This repository only has client side code.

The server side GitHub repository is here.

App URL

https://clever-villani-c52831.netlify.app/

Design

React Bootstrap

The basic UI is referenced from "SE１年目のJavaScript Webアプリケーションフレームワーク道...Expressで簡易メモ帳アプリ(1)".

Client Side Routing

React Router Dom

Routing -to code

dashboard: / (that is https://clever-villani-c52831.netlify.app/ .) -to code
create: /create -to code
detail: /:memoId -to code
edit: /edit/:memoId -to code
delete: /delete/:memoId -to code

Data Fetching

e.g. POST new memo using Fetch. -to code

Form (Controlled Components)

e.g. Controlling input tag and submission of form tag. -to code

React Hooks

useState()
useEffect()
useReducer()

e.g. fetching all memo data in every rendering. -to code

TypeScript

e.g. defining type of memo which is fetched from server. -to code