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:HowtoTechnology
Để 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, toolnpm 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