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

Fetch API

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