Dùng Material UI Component
Giới thiệu
Material UI Component được tạo ra dựa trên sự kết hợp giữa lý thuyết design của Google và thư viện 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 tất cả các MUI Components mà nó đang cung cấp.
Sample
Bây giờ chúng ta thử build 1 layout như sau.
Phần bên ngoài bọc tất cả, chúng ta gọi là App, trong App có phần header, bên dưới header là container bọc lấy các block.
Bây giờ ta tìm trong MUI Component, thì chúng ta có thể hình dung các MUI Component tương ứng sẽ như sau:
Howto
Technology
Để thực hiện sample trên, chúng ta sử dụng các tool như là babel, để compile es2015 và webpack để load các modules, component cần thiết.
Chuẩn bị
- Tạo thư mục:
mkdir react-mui-sample - Init project:
npm init, khi chạy lệnh này trên màn hình terminal sẽ yêu cầu bạn nhập các thông tin cần thiết. - Install React, ReactDOM, MaterialUI và plugin, tool
<ol><li><code><span>npm install react react</span><span><span>-</span><span>dom</span></span><span> react</span><span><span>-</span><span>tap</span></span><span><span>-</span><span>event</span></span><span><span>-</span><span>plugin</span></span><span> material</span><span><span>-</span><span>ui</span></span><span> </span><span><span>--</span></span><span>save</span><span><span>-</span><span>dev</span></span></code></li><li><code><span>npm install webpack babel</span><span><span>-</span><span>cli</span></span><span> babel</span><span><span>-</span><span>preset</span></span><span><span>-</span><span>es2015</span></span><span> babel</span><span><span>-</span><span>preset</span></span><span><span>-</span><span>react</span></span><span> babel</span><span><span>-</span><span>loader</span></span><span> </span><span><span>--</span></span><span>save</span><span><span>-</span><span>dev</span></span></code></li></ol>
Sau đó, vào thư mục project react-mui-sample, tạo file config cho babel .babelrc, nhập nội dung bên dưới vào file đó để setting preset.
<ol><li><code id="code-lang-undefined"><span>{</span></code></li><li><code id="code-lang-undefined"><span> </span><span>"</span><span><span>presets</span></span><span>"</span><span>:</span><span> </span><span><span>[</span><span><span>"es2015"</span></span><span>,</span><span> </span><span><span>"react"</span></span><span>]</span></span></code></li><li><code id="code-lang-undefined"><span>}</span></code></li></ol>
Tiếp theo là thêm dòng "build": "webpack --config webpack.config.js --progress --colors" vào file package.json mà bạn đã init ở trên:
<ol><li><code id="code-lang-package"><span>{</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>name</span></span><span>"</span><span>:</span><span> </span><span><span><span>"react-mui-sample"</span></span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>version</span></span><span>"</span><span>:</span><span> </span><span><span><span>"1.0.0"</span></span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>description</span></span><span>"</span><span>:</span><span> </span><span><span><span>"this is sample that use material ui component for demo"</span></span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>main</span></span><span>"</span><span>:</span><span> </span><span><span><span>"index.js"</span></span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>scripts</span></span><span>"</span><span>:</span><span> </span><span><span>{</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>test</span></span><span>"</span><span>:</span><span> </span><span><span><span>"test"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>build</span></span><span>"</span><span>:</span><span> </span><span><span><span>"webpack --config webpack.config.js --progress --colors"</span></span></span></span></code></li><li><code id="code-lang-package"><span><span><span> </span></span><span>}</span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>keywords</span></span><span>"</span><span>:</span><span> </span><span><span>[</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span><span>"reactjs"</span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span><span>"material-ui"</span></span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>]</span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>author</span></span><span>"</span><span>:</span><span> </span><span><span><span>"phungnc"</span></span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>license</span></span><span>"</span><span>:</span><span> </span><span><span><span>"ISC"</span></span></span><span>,</span></code></li><li><code id="code-lang-package"><span> </span><span>"</span><span><span>devDependencies</span></span><span>"</span><span>:</span><span> </span><span><span>{</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>babel-cli</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^6.10.1"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>babel-core</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^6.9.1"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>babel-loader</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^6.2.4"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>babel-preset-es2015</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^6.9.0"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>babel-preset-react</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^6.5.0"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>material-ui</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^0.15.0"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>react</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^15.1.0"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>react-dom</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^15.1.0"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>react-tap-event-plugin</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^1.0.0"</span></span></span><span>,</span></span></code></li><li><code id="code-lang-package"><span><span> </span><span>"</span><span><span>webpack</span></span><span>"</span><span>:</span><span> </span><span><span><span>"^1.13.1"</span></span></span></span></code></li><li><code id="code-lang-package"><span><span><span> </span></span><span>}</span></span></code></li><li><code id="code-lang-package"><span>}</span></code></li></ol>
Cuối cùng thì config cho webpack:
<ol><li><code id="code-lang-webpack"><span><span>module</span></span><span>.</span><span><span>exports</span></span><span> </span><span>=</span><span> </span><span>{</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>entry</span></span><span>:</span><span> </span><span>{</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>app</span></span><span>:</span><span> </span><span><span>'./app.js'</span></span></code></li><li><code id="code-lang-webpack"><span> </span><span>},</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>output</span></span><span>:</span><span> </span><span>{</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>path</span></span><span>:</span><span> __dirname </span><span>+</span><span> </span><span><span>'/dist'</span></span><span>,</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>filename</span></span><span>:</span><span> </span><span><span>'bundle.js'</span></span></code></li><li><code id="code-lang-webpack"><span> </span><span>},</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>module</span></span><span>:</span><span> </span><span>{</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>loaders</span></span><span>:</span><span> </span><span>[</span></code></li><li><code id="code-lang-webpack"><span> </span><span>{</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>test</span></span><span>:</span><span> </span><span><span>/\.js$/</span></span><span>,</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>loaders</span></span><span>:</span><span> </span><span>[</span><span><span>'babel-loader'</span></span><span>],</span></code></li><li><code id="code-lang-webpack"><span> </span><span><span>exclude</span></span><span>:</span><span> </span><span><span>/(node_modules)/</span></span></code></li><li><code id="code-lang-webpack"><span> </span><span>}</span></code></li><li><code id="code-lang-webpack"><span> </span><span>]</span></code></li><li><code id="code-lang-webpack"><span> </span><span>}</span></code></li><li><code id="code-lang-webpack"><span>}</span></code></li></ol>
Rồi. Bây giờ hãy ngó chút xíu 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, cấu trúc app:
Trước khi bắt đầu coding thì chúng ta hãy hình dung 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 sẽ như sau:
<ol><li><code><span>react</span><span>-</span><span>mui</span><span>-</span><span>sample</span></code></li><li><code><span> </span><span>|</span><span>_ </span><span>.</span><span>babelrc </span><span>// </span><span><span>file</span></span><span> config của babel</span></code></li><li><code><span> </span><span>|</span><span>_ webpack</span><span>.</span><span>config</span><span>.</span><span>json </span><span>// </span><span><span>file</span></span><span> config của webpack</span></code></li><li><code><span> </span><span>|</span><span>_ </span><span><span>package</span></span><span>.</span><span>json </span><span>// </span><span><span>file</span></span><span> </span><span><span>package</span></span><span> của project</span></code></li><li><code><span> </span><span>|</span><span>_ node_module</span></code></li><li><code><span> </span><span>|</span><span>_ app</span><span>.</span><span>js </span><span>// </span><span><span>file</span></span><span> chính của App</span></code></li><li><code><span> </span><span>|</span><span>_ index</span><span>.</span><span>html </span><span>// </span><span><span>file</span></span><span> giao diện chính của App</span></code></li><li><code><span> </span><span>|</span><span>_ dist </span><span>// thư mục chứa </span><span><span>file</span></span><span> build </span></code></li><li><code><span> </span><span>|</span><span>_ bundle</span><span>.</span><span>js </span><span>// </span><span><span>file</span></span><span> build </span></code></li></ol>
Source code project:
https://github.com/phungnc/reactjs-mui-simple-sample.git
Sau khi lấy 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 and Run
Hãy trỏ đến thư mục react-mui-sample, thực hiện lệnh build:
<ol><li><code><span><span>npm</span></span><span> run build</span></code></li></ol>
Lệnh này thực ra sẽ gọi script webpack --config webpack.config.js --progress --colors trong file package.json.
Và bây giờ bạn có thể mở file index.html lên và xem thành quả. Bạn có thể edit lại nội dung theo ý mình bằng cách thay đổi file app.js
Hy vọng bài viết này có thể giúp bạn bắt tay vào việc thử xây dựng cho riêng mình 1 giao diện web app bằng Material UI Component. Trong bài viết sau, tôi sẽ đưa ra 1 sample và hướng dẫn cách tạo 1 App phức tạp hơn.