React. Part2. ch3. 01. UI 라이브러리 - Onsen UI (모바일 전용)

https://onsen.io/

https://onsen.io/v2/guide/react/#react

 

○ React 기반 설치

$ npm install onsenui react-onsenui --save

React-create-app로 만들면, 아래 코드는 불필요

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="onsenui.js"></script>
<script src="react-onsenui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>

Alternatively, you can also use ES6 imports to specify the modules you want to use in react-onsenui package.

import { Page, Toolbar, Button } from 'react-onsenui'; // Only import the necessary components
// import * as Ons from 'react-onsenui'; // Import everything and use it as 'Ons.Page', 'Ons.Button'

The CSS can be included normally with <link> tags in index.html or can be imported by Webpack:
★ index.html OR App.js 에 아래 import 코드 추가해야 한다. ★ 
// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';