리액트 라이브러리( UI )
1) Onsen
Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools
Native look and feel with lots of ready-to-use components and automatic styling A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. Th
onsen.io
npm install onsenui react-onsenui --saveApp.js 상단에 import문 작성
import "onsenui/css/onsenui.css";
import "onsenui/css/onsen-css-components.css";
2) Ant Design
Ant Design - The world's second most popular React UI framework
ant.design
npm install antdApp.js 상단에 import문 작성
import 'antd/dist/antd.css';App.css 상단에 import문 작성 나머지는 주석처리 or 삭제
@import '~antd/dist/antd.css';
3) React Semantic UI
https://react.semantic-ui.com/
Introduction - Semantic UI React
Semantic UI React is the official React integration for Semantic UI . Installation instructions are provided in the Usage section. jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representat
react.semantic-ui.com
npm install semantic-ui-react semantic-ui-css
4) React BootStrap
https://react-bootstrap.github.io/
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
npm install react-bootstrap bootstrapApp.js 상단에 import문 작성
import "bootstrap/dist/css/bootstrap.min.css";
5) Material UI
MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.
mui.com
npm install @mui/material @emotion/react @emotion/styled
// svg 아이콘
npm install @mui/icons-material
// react-window 설치
npm i react-windowpublic - index.html <head>태그 내에 붙여넣기
// Roboto글꼴
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
// 아이콘
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
Material UI가 반영된 cra프로젝트
https://github.com/mui/material-ui/tree/master/examples/create-react-app
GitHub - mui/material-ui: MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI that imple
MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI that implement Google's Material Design. - GitHub - mui/material-ui: MUI Core: Ready-to-use foundatio...
github.com
6) Tailwindcss
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
리액트에서 시작하기
https://tailwindcss.com/docs/guides/create-react-app
Install Tailwind CSS with Create React App - Tailwind CSS
Documentation for the Tailwind CSS framework.
tailwindcss.com
애니메이션 라이브러리
1) React spring
react-spring
Bring your components to life with simple spring animation primitives for React
react-spring.dev
npm install react-spring
2) Framer Motion
https://www.framer.com/docs/introduction/
Introduction | Framer for Developers
Get started with Framer Motion and learn by exploring interactive examples.
www.framer.com
npm install framer-motion
@ant-design/css-animation vs @material-ui/core vs framer-motion vs onsenui vs react-bootstrap vs react-semantic-ui vs tailwindcs
Comparing trends for @ant-design/css-animation 1.7.3 which has 130,072 weekly downloads and unknown number of GitHub stars vs. @material-ui/core 4.12.4 which has 2,049,054 weekly downloads and 81,093 GitHub stars vs. framer-motion 7.2.1 which has 1,497,594
npmtrends.com
차트 - 몇개를 제외하고는 리액트용이 아닌 것들도 표에 포함되어 있는데 그냥 참고용으로만 둔다.