EXAMPLE.md

React for Medical information Mediation Platform

install

• node
• create-react-app
• yarn
• etc library

react

• JSX
• component base
  • props
  • state
• component lifecycle
  • render
  • constructor
  • getDerivedStateFromProps
  • componentDidMount
  • shouldComponentUpdate
  • getSnapshotBeforeUpdate
  • componentDidUpdate
  • componentWillUnmount
• functional component
• component styling : css and sass
• rerendering optimization
• react + redux
• redux + immutable
• ducks structure

directory

. ├── App.js ├── App.scss ├── _nav.js ├── apis │   ├── comn │   │   └── api.js │   ├── example │   │   └── api.js │   ├── medi │   ├── onm │   └── setl ├── assets │   └── img │   └── brand │   ├── logo.png │   ├── logo.svg.bk │   └── sygnet.svg ├── containers │   ├── comn │   │   ├── alert │   │   │   └── AlertContainer.js │   │   ├── base │   │   │   └── BaseContainer.js │   │   ├── index.js │   │   ├── layout │   │   │   ├── AsideContainer.js │   │   │   ├── FooterContainer.js │   │   │   ├── HeaderContainer.js │   │   │   ├── LayoutContainer.js │   │   │   └── index.js │   │   ├── login │   │   │   └── LoginContainer.js │   │   └── modal │   │   └── ConfirmModalContainer.js │   ├── example │   │   ├── crud │   │   │   └── PostContainer.js │   │   └── modal │   │   └── ModalAlertExampleContainer.js │   ├── medi │   ├── onm │   └── setl ├── index.css ├── index.js ├── libs ├── locale │   └── locale.js ├── polyfill.js ├── routes.js ├── scss │   ├── _custom.scss │   ├── _ie-fix.scss │   ├── _variables.scss │   ├── style.scss │   └── vendors │   └── _variables.scss ├── serviceWorker.js ├── store │   ├── comn │   │   ├── base.js │   │   └── login.js │   ├── configure.js │   ├── example │   │   └── crud.js │   ├── medi │   ├── modules.js │   ├── onm │   └── setl └── views ├── comn │   ├── index.js │   ├── login │   │   ├── Login.js │   │   └── Login.scss │   ├── modal │   │   └── ConfirmModal.js │   ├── page404 │   │   └── Page404.js │   └── page500 │   └── Page500.js ├── example │   ├── alert │   │   └── ReactAlertExample.js │   ├── crud │   │   ├── Paging.js │   │   ├── PostEditModal.js │   │   ├── PostItem.js │   │   ├── PostList.js │   │   └── UsersData.js │   ├── datagrid │   │   ├── NotGridProblemExample.js │   │   ├── SimpleGridExample.js │   │   └── datagrid.css │   ├── datepicker │   │   ├── AirbnbDatePickerExample.js │   │   ├── AirbnbDatePickerExampleIcon.js │   │   ├── AirbnbDatePickerExampleIcons.js │   │   └── DatePickerExample.js │   ├── list │   │   ├── ReactVirtualizedListExample.css │   │   └── ReactVirtualizedListExample.js │   ├── modal │   │   ├── ModalAlertExample.js │   │   └── ModalExample.js │   ├── table │   │   ├── TableExample.js │   │   └── TableExampleUtil.js │   └── tree │   └── TreeExample.js ├── medi │   └── dashboard │   └── Dashboard.js ├── onm └── setl

naming rule

• business domain package

MMP react framework and component

• coreui, datagrid, table...

component reference

• DatePicker : https://reactdatepicker.com/
• Table : https://www.npmjs.com/package/react-table
• DataGrid : https://adazzle.github.io/react-data-grid/
• Tree : https://www.npmjs.com/package/rc-tree
• React Virtualized : https://bvaughn.github.io/react-virtualized/#/components/Grid
• React Virtualized Tree : https://diogofcunha.github.io/react-virtualized-tree/#/examples/basic-tree
• Alert : https://www.npmjs.com/package/react-alert
• React Date : https://github.com/airbnb/react-dates

Q&A