How to use material-ui framework? [closed]

2020-05-15 07:59发布

站内问答 / 后端开发
1936 6 2

I'm planning to use Material-UI CSS framework (http://material-ui.com) in order to design front-end of a website, but I don't have any idea about how to use this framework.

I'm not familiar a lot with NPM, Browserify, etc. I just need to know how shall I start in order to learn the way to use this CSS framework.

Thanks for any help!

6条回答
戒情不戒烟
2楼-- · 2020-05-15 08:07

To be honest, I think you got a big problem to use this stuff.

Firstly, it depends on Facebook's View framework called React so you have to know well some basic things.

Secondly,React is totally a javascript stuff and if you use it by coding plain javascript, that would be an other big problem which may stop you.otherwise if you use it's syntax sugar called jsx, you still need to pay plenty of times to learn well it so that you could know how React work and then you could use it in your project.

Thirdly, before the above mentioned happen, there are still several things required that you dont need to know well NodeJs or webpack or NPM but at least you should know well how to use them as the simple tools.

So, is it a must that you have no other choice but have to use this stuff and only act it as a simple css framework?

If not! you can give up now except you are ready to learn tons of dependencies!!!

If yes! I advice you to install nodejs first and then install npm and then use npm to install react maybe you still need to install some tools like babel browserify or webpack(the best) and then dive into React and then you could begin learning how to use MUI~ sounds...mass

There isnt a quick pickup way for MUI just like they said!

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2020-05-15 08:10

I wrote a sample node project showing how to bundle a react component for consumption in non-react websites using webpack. It's a similar approach to dkantowitz's, except it removes the need to introduce react or reactDom to the consuming website.

The example as it is would need to be extended to allow use with multiple components (like material-ui is) but I think it provides a good starting point for seeing whats involved with webpack and babel etc

查看更多
0人赞 添加讨论(0) 举报
The star\"
4楼-- · 2020-05-15 08:22

Had pretty much the same problem. Wanted a simple way to start using material-ui without the gibberish. Here's what I did:

npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js

This gave me a javascript file, material-ui.js, I could then include in my HTML. In my case I'm using electron, so this is my HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="content"></div>

    <script>
        require('./material-ui.js')
    </script>

    <script type="text/babel">      
        import React from 'react';
        import FlatButton from 'material-ui/lib/flat-button';


        const FlatButtonExampleSimple = () => (
          <div>
            <FlatButton label="Default" />
            <FlatButton label="Primary" primary={true} />
            <FlatButton label="Secondary" secondary={true} />
            <FlatButton label="Disabled" disabled={true} />
          </div>
        );      

        ReactDOM.render(
          <FlatButtonExampleSimple />,
          document.getElementById('content')
        );
    </script>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
神经病院院长
5楼-- · 2020-05-15 08:24

Don't be intimidated by the (apparent) complexity of webpack and other (great) build tools, and don't be discouraged by envious jerks who say things like "To be honest, I think you got a big problem to use this stuff."

The reason why the material-ui implementation (usage) is based on these tools is because is currently the best way to write software and understanding this and other frameworks is a great way to learn why this is the "right" way, and become proficient at writing quality modular code.

Webpack, and the other build tools, exist for one purpose: to create one "main" file from your app's source code that can be read and delivered to your users' browser in an efficient manner. Long gone are the days when we would write a bunch of include (script) tags for every resource (file) we need in our pages and thus have our users wait until all these were downloaded from our server (or multiple locations e.g.: cdns) and then the page would load. The efficiency is based on the fact that you can deliver one (often minified/compressed) file that contains all your code and any code it depends on (e.g. React or even jQuery).

Build tools accomplish this by asking you 3 things: what file to start with (entry main file), what tools (loaders) to use to process non-native JavaScript code within your code (scss, jsx, etc) and what file to create as the result (converted and minified output). This output file will be the one you use in your html import/script tag. It will contain your code plus all other dependencies, which would be a nightmare to include and resolve manually yourself. Here is a good beginners' guide.

Material-ui, like many other frameworks (reason why I took the time to explain all of the above) is built with modularity in mind: pieces of code can be "glued" or "pieced" together like Legos, in order to easily build bigger parts. You do this by simply including the components you need in any component you create. They are React components which are a simple way to define (write/create) the "building blocks" of your site/app. There are tons of great videos and tutorials to get you started with React (my favorite is reactjsprogram.com by Tyler McGinnis).

To get you started with material-ui, they have created a couple of examples to get started using webpack. Follow the simple steps to install npm and the dependencies (you can find them in package.json) and open the /src directory in your editor. You'll figure it out in no time.

You are in the right track with the right attitude by asking questions, learning to be a good developer, researching and trying to find the easiest way to accomplish your goal.

查看更多
0人赞 添加讨论(0) 举报
狗以群分
6楼-- · 2020-05-15 08:25

If you use the react+redux, you can use the https://github.com/takanabe/react-redux-material_ui-boilerplate

template.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
7楼-- · 2020-05-15 08:27

Material-UI is a set of React components in addition to being a CSS framework. I don't know if you can get much use out of it without understanding React.

The easiest way to get started is to install the examples and start from there.

If you don't want to deal with a frontend framework like React, and just want CSS and JS files with a setup time as quick as Bootstrap, check out the Materialize library.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)