React. Part2. ch3. 10~12. Material UI 1,2,3

○ Exam GIthub 자료 

 - https://github.com/mui-org/material-ui/tree/master/examples/create-react-app

How to use

Download the example or clone the repo:

curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app
cd create-react-app

Install it and run:

npm install
npm start

 

 

 

○ https://mui.com/getting-started/usage/  

 - USAGE에 보면 추가할 것을 권장

<meta name="viewport" content="initial-scale=1, width=device-width" />

 

 

 

 

○ https://mui.com/getting-started/installation/

Roboto, Font의 두  Link는 React Project의 public 폴더 안 index.html의 헤더 안에 복붙한다.

 

Roboto font

MUI was designed with the Roboto font in mind. So be sure to follow these instructions. For instance, via Google Web Fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Font icons

To use the font Icon component, you must first add the Material icons font. Here are some instructions on how to do so. For instance, via Google Web Fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

SVG icons

In order to use prebuilt SVG Material icons, such as those found in the icons demos you must first install the @mui/icons-material package:

// with npm
npm install @mui/icons-material

// with yarn
yarn add @mui/icons-material

 

   

○  테마 활용하기

 - https://mui.com/customization/theming/

 

ch3. 12. Material UI 3

Virtualized List (무한 스크롤)

 - https://mui.com/components/lists/

In the following example, we demonstrate how to use react-window with the List component. It renders 200 rows and can easily handle more. Virtualization helps with performance issues.

 

 

- https://mui.com/components/tree-view/ 

 

 

MUI System

순수한 커스텀 컴포넌트 생성 가능

CSS utilities for rapidly laying out custom designs.

 - https://mui.com/system/basics/