How to use Material-UI without create-react-app

Question

my goal is to use Material-UI without using create-react-app as the latter abstracts too much away for me to learn these things. All instruction I found are unfortunately entirely based on create-react-app.

I want to generate the most minimalistic setup to achieve this, mostly for learning purpose. To start with, I want to display just a simple Material-UI Button.

For this I used the most minimalistic React-"Hello World" example from reactjs.org and added the Material-UI UMD in the following way:


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
    
          ReactDOM.render(
            <Button variant="contained" color="primary">
               Hello World
            </Button>,
            document.getElementById('root')
          );
    
        </script>
      </body>
    </html>

I'm having trouble importing the Button from material-ui.development.js and then rendering this Button.

I've tried different import and require() expressions at different places in the code but it's more a try and error instead of a real understanding of what is necessary.

I hope someone can help me out here.

Hello, welcome! If you want to understand how this kind of technologies works "under the hood" my suggestion is this: find a tutorial that helps you to setup a project using webpack. Why? Because, in this way, you will learn how your source code (ECMAScript or TypeScript or whatever you want) is "transformed" (transpired) in a way that can be understandable to the browser. The most important thing to understand is that there is no magic in using React since, at the end, what the browser will have is just plain JavaScript. — Emanuele Scarabattoli
– Emanuele Scarabattoli, Commented Feb 10, 2021 at 23:38

McFly · Accepted Answer · 2021-02-12 19:18:29Z

3

Thanks hotpink for your explanations! That solved it. In my particular setting described in the initial question, the code looks like as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <MaterialUI.Button variant="contained" color="primary">
          Thanks hotpink
        </MaterialUI.Button>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

Result

answered Feb 12, 2021 at 19:18

McFly

438 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

InterstellarX Over a year ago

I wish this method was more documented! @McFly's response is exactly what I needed to get Material UI components into a plain HTML file. Thank you!!

hotpink · Accepted Answer · 2021-02-11 01:33:42Z

This touches a number of topics. Your script file contains a module, in this case the module function is a IIFE. It's not exactly trivial code, but the key part is this:

factory(global.MaterialUI = {}, global.React, global.ReactDOM)

global is a function parameter passed in as this and factory is another function parameter that is a function itself. this points to an object, which in this case is window. So what you have access to is window.MaterialUI.

You can omit the window for convenience when accessing it. Your Button component is available via MaterialUI.Buttton. If you want to use multiple components, you may want to use an destructuring assignment:

const { Button, TextField, Typography } = MaterialUI

I'd like to add that none of the underlying concepts are specific to Material-UI or React, so if you want to learn those CRA is perfectly fine imho.

Collectives™ on Stack Overflow

How to use Material-UI without create-react-app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related