Giới thiệuMaterial UI Component được tạo ra dựa bên trên sự phối hợp giữa lý thuyết design của Google và thư viện chế tạo UI Reactjs của Facebook.
*
Xin mời bạn vào trang: http://www.material-ui.com, vào mục components để xem toàn bộ các MUI Components mà lại nó sẽ cung cấp.SampleBây giờ họ thử build 1 layout như sau.
*
Phần phía bên ngoài bọc tất cả, chúng ta gọi là App, trong phầm mềm có phần header, dưới header là container bọc lấy các block.

Bạn đang xem: Material ui là gì

Bây giờ ta tra cứu trong MUI Component, thì bạn có thể hình dung các MUI Component tương ứng sẽ như sau:
*
Howto

Technology

Để triển khai sample trên, họ sử dụng những tool như là babel, để compile es2015 với webpack nhằm load các modules, component cần thiết.
*

Chuẩn bị

Tạo thư mục: mkdir react-mui-sampleInit project: npm init, khi chạy lệnh này trên screen terminal đang yêu cầu bạn nhập các thông tin nên thiết. Install React, ReactDOM, MaterialUI và plugin, tool

npm install react react-dom react-tap-event-plugin material-ui --save-devnpm install webpack babel-cli babel-preset-es2015 babel-preset-react babel-loader --save-devSau đó, vào thư mục project react-mui-sample, sinh sản file config mang lại babel .babelrc, nhập ngoại dung bên dưới vào file đó nhằm setting preset.

Xem thêm: Tặng 100+ Hình Ảnh Bánh Gato Sinh Nhật Đẹp Độc Đáo Dễ Thương Nhất

"presets": <"es2015", "react">Tiếp theo là thêm loại "build": "webpack --config webpack.config.js --progress --colors" vào tệp tin package.json mà bạn đã init ở trên: "name": "react-mui-sample", "version": "1.0.0", "description": "this is sample that use material ui component for demo", "main": "index.js", "scripts": "test": "test", "build": "webpack --config webpack.config.js --progress --colors" , "keywords": < "reactjs", "material-ui" >, "author": "phungnc", "license": "ISC", "devDependencies": "babel-cli": "^6.10.1", "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "material-ui": "^0.15.0", "react": "^15.1.0", "react-dom": "^15.1.0", "react-tap-event-plugin": "^1.0.0", "webpack": "^1.13.1" Cuối thuộc thì config mang đến webpack:module.exports = entry: app: "./app.js" , output: path: __dirname + "/dist", filename: "bundle.js" , module: loaders: < test: /.js$/, loaders: <"babel-loader">, exclude: /(node_modules)/ > Rồi. Hiện thời hãy ngó tí đỉnh qua phần usage của Material UI, trước khi chúng ta bước vào phần coding thực sự.http://www.material-ui.com/#/get-started/usage

Coding, kết cấu app:

Trước khi ban đầu coding thì bọn họ hãy tưởng tượng sơ qua về cấu trúc cũng như luồng build của nó như thế nào:
*
Cấu trúc source code của project đã như sau:react-mui-sample |_ .babelrc // tệp tin config của babel |_ webpack.config.json // tệp tin config của webpack |_ package.json // tệp tin package của project |_ node_module |_ app.js // file chủ yếu của ứng dụng |_ index.html // tệp tin giao diện thiết yếu của phầm mềm |_ dist // thư mục chứa file build |_ bundle.js // tệp tin build Source code project:https://github.com/phungnc/reactjs-mui-simple-sample.gitSau khi đem về, hãy mở file app.js, và tham khảo hình tôi giải thích như bên dưới:
*
Build và RunHãy trỏ mang lại thư mục react-mui-sample, tiến hành lệnh build:npm run buildLệnh này thực tế sẽ gọi script webpack --config webpack.config.js --progress --colors trong tệp tin package.json.Và bây giờ bạn cũng có thể mở tệp tin index.html lên với xem thành quả. Bạn cũng có thể edit lại văn bản theo ý mình bằng cách thay đổi file app.jsHy vọng bài viết này có thể giúp các bạn bắt tay vào bài toán thử tạo cho riêng bản thân 1 giao diện web phầm mềm bằng Material UI Component. Trong nội dung bài viết sau, tôi sẽ giới thiệu 1 sample cùng hướng dẫn biện pháp tạo 1 App tinh vi hơn.