예

버튼

다음 버튼을 표시합니다.

jsx

공식 샘플 에서는 ES2015 의 import 문 을 사용하고 있습니다.

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

JavaScript의 module 기구는 아직 사양이 미확정입니다. require를 사용하는 경우 다음과 같이 씁니다.

const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {RaisedButton} = require('material-ui');

버튼을 표시하는 예는 ...

index.jsx

const React = require('react');
const ReactDOM = require('react-dom');
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {RaisedButton} = require('material-ui');

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <RaisedButton label="Default"/>
  </MuiThemeProvider>
);

ReactDOM.render(
  <App/>, document.querySelector('#container'));

html

JavaScript로 옮겨진 bundle.js를 읽는 html을 준비합니다.

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="container">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

빌드

준비

package.json 를 만듭니다.

npm init -y

필요한 npm 모듈을 설치합니다.

npm i -D react browserify babelify babel-plugin-transform-react-jsx material-ui react-dom react-tap-event-plugin

babel 설정 파일을 만듭니다.

.babelrc

{
  "plugins": ["transform-react-jsx"]
}

실행

node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js

동작 확인

index.html 를 열고 첫 번째 버튼이 표시되면 성공합니다.

버튼 스타일은 인라인으로 내장되어 있습니다.
스타일시트를 로드할 필요가 없습니다.

<div data-reactroot="" style="color: rgba(0, 0, 0, 0.870588); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; border-radius: 2px; display: inline-block; background-color: rgb(255, 255, 255);">
    <button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; outline: none; font-size: inherit; font-weight: inherit; transform: translate3d(0px, 0px, 0px); position: relative; min-width: 88px; height: 36px; line-height: 36px; width: 100%; padding: 0px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; text-align: center; background-color: rgb(255, 255, 255);">
        <div>
            <div style="height: 36px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"><span style="position: relative; opacity: 1; font-size: 14px; letter-spacing: 0px; text-transform: uppercase; font-weight: 500; margin: 0px; padding-left: 16px; padding-right: 16px; color: rgba(0, 0, 0, 0.870588); -webkit-user-select: none;">Default</span></div>
        </div>
    </button>
</div>

참고

Material UI를 사용하여 멋진 UI React 애플리케이션을 만들어 보았다 – PAYFORWARD

React에서 머티리얼 디자인을 구현하는 Material UI를 사용해보십시오 - syonx

webpack+React+material-ui 환경을 최소 단계로 생성 - Qiita

Reference

이 문제에 관하여(Material-UI 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ledsun/items/4e1284aa84c2222323ce

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다