Material-UI를 사용해 본 메모
17428 단어 ReactTypeScriptredux도커material-ui
material-ui
Redux Example의 Todo List를 시작으로 Typescript로 (3) 로 만든 샘플에 머티리얼 UI를 넣어 본 메모.
출처
webpack/Dockerfile# docker-hubからnode入りコンテナを取得
# https://hub.docker.com/_/node/
FROM node:7.3.0
# コンテナ上の作業ディレクトリ作成
WORKDIR /my_webpack
# 後で確認出来るようにpackage.jsonを作成
RUN npm init -y
# jsViewライブラリreact
RUN npm i --save react
RUN npm i --save react-dom
# jsフレームワークredux
RUN npm i --save-dev redux
RUN npm i --save react-redux
# typescript
RUN npm i --save-dev typescript@next
# ビルドツール
RUN npm i --save-dev [email protected]
# 開発用サーバ
RUN npm i --save-dev [email protected]
# webpack用typescript loader
RUN npm i --save-dev ts-loader
# typescriptの型定義ファイル
RUN npm i --save-dev @types/react
RUN npm i --save-dev @types/react-dom
RUN npm i --save-dev @types/redux
RUN npm i --save-dev @types/react-redux
# material-ui
RUN npm i --save material-ui
RUN npm i --save-dev @types/material-ui
RUN npm i --save react-tap-event-plugin
webpack/package.json{
"name": "my_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --display-error-details",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"material-ui": "^0.16.6",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^5.0.1",
"react-tap-event-plugin": "^2.0.1"
},
"devDependencies": {
"@types/material-ui": "^0.16.46",
"@types/react": "^0.14.55",
"@types/react-dom": "^0.14.20",
"@types/react-redux": "^4.4.35",
"@types/redux": "^3.6.0",
"redux": "^3.6.0",
"ts-loader": "^1.3.3",
"typescript": "^2.2.0-dev.20170105",
"webpack": "^2.2.0-rc.3",
"webpack-dev-server": "^2.2.0-rc.0"
}
}
webpack/webpack.config.js
module.exports = {
context: __dirname + '/src',
entry: {
typescript: './app.tsx',
// code-splitting用の設定
vendor: ['react', 'react-dom', 'redux', 'react-redux', 'material-ui', 'react-tap-event-plugin']
},
// 省略
};
injectTapEventPlugin()
에서 material-ui 에서 이용하고 있는 이벤트를 정의.
src/component/App.tsximport * as React from 'react';
import VisibleTodoList from '../containers/VisibleTodoList'
import AddTodo from '../containers/AddTodo';
import Footer from './Footer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
const MuiApp =()=>(
<MuiThemeProvider>
<App />
</MuiThemeProvider>
);
export default MuiApp;
Add Todo 버튼을 + 아이콘 버튼으로 변경.
src/containers/AddTodo.tsximport * as React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
interface IDispatch {
dispatch?: any;
}
let AddTodo = ({ dispatch }:IDispatch): JSX.Element => {
let input:HTMLInputElement;
return (
<div>
<input ref={(node) => {
input = node
}} />
<FloatingActionButton
onClick={() => {
dispatch(addTodo(input.value))
input.value = ''
}}
>
<ContentAdd />
</FloatingActionButton>
</div>
);
};
AddTodo = connect()(AddTodo);
export default AddTodo;
브라우저로 액세스하면 이런 느낌.
여기 시점 소스
github
참고
material-ui
Redux Example의 Todo List를 시작으로 Typescript로 (3)
webpack+React+material-ui 환경을 최소 단계로 생성
Redux의 Todo Sample을 Material UI로 장식해 보았습니다.
Material-UI 사용해 본 @VirtualBox(React+Redux+Express+Material-UI)
Reference
이 문제에 관하여(Material-UI를 사용해 본 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hibohiboo/items/c806fdb00926abde7f43
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
# docker-hubからnode入りコンテナを取得
# https://hub.docker.com/_/node/
FROM node:7.3.0
# コンテナ上の作業ディレクトリ作成
WORKDIR /my_webpack
# 後で確認出来るようにpackage.jsonを作成
RUN npm init -y
# jsViewライブラリreact
RUN npm i --save react
RUN npm i --save react-dom
# jsフレームワークredux
RUN npm i --save-dev redux
RUN npm i --save react-redux
# typescript
RUN npm i --save-dev typescript@next
# ビルドツール
RUN npm i --save-dev [email protected]
# 開発用サーバ
RUN npm i --save-dev [email protected]
# webpack用typescript loader
RUN npm i --save-dev ts-loader
# typescriptの型定義ファイル
RUN npm i --save-dev @types/react
RUN npm i --save-dev @types/react-dom
RUN npm i --save-dev @types/redux
RUN npm i --save-dev @types/react-redux
# material-ui
RUN npm i --save material-ui
RUN npm i --save-dev @types/material-ui
RUN npm i --save react-tap-event-plugin
{
"name": "my_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --display-error-details",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"material-ui": "^0.16.6",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^5.0.1",
"react-tap-event-plugin": "^2.0.1"
},
"devDependencies": {
"@types/material-ui": "^0.16.46",
"@types/react": "^0.14.55",
"@types/react-dom": "^0.14.20",
"@types/react-redux": "^4.4.35",
"@types/redux": "^3.6.0",
"redux": "^3.6.0",
"ts-loader": "^1.3.3",
"typescript": "^2.2.0-dev.20170105",
"webpack": "^2.2.0-rc.3",
"webpack-dev-server": "^2.2.0-rc.0"
}
}
module.exports = {
context: __dirname + '/src',
entry: {
typescript: './app.tsx',
// code-splitting用の設定
vendor: ['react', 'react-dom', 'redux', 'react-redux', 'material-ui', 'react-tap-event-plugin']
},
// 省略
};
import * as React from 'react';
import VisibleTodoList from '../containers/VisibleTodoList'
import AddTodo from '../containers/AddTodo';
import Footer from './Footer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
const MuiApp =()=>(
<MuiThemeProvider>
<App />
</MuiThemeProvider>
);
export default MuiApp;
import * as React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
interface IDispatch {
dispatch?: any;
}
let AddTodo = ({ dispatch }:IDispatch): JSX.Element => {
let input:HTMLInputElement;
return (
<div>
<input ref={(node) => {
input = node
}} />
<FloatingActionButton
onClick={() => {
dispatch(addTodo(input.value))
input.value = ''
}}
>
<ContentAdd />
</FloatingActionButton>
</div>
);
};
AddTodo = connect()(AddTodo);
export default AddTodo;
Reference
이 문제에 관하여(Material-UI를 사용해 본 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hibohiboo/items/c806fdb00926abde7f43텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)