Giter Club home page Giter Club logo

Comments (9)

mlaursen avatar mlaursen commented on May 22, 2024

I can look into the umd build. I haven't actually worked with umd before, but it does look like there are a few tools out there for it so it might be relatively painless.

from react-md.

mlaursen avatar mlaursen commented on May 22, 2024

Versions 0.3.1 and up should now support UMD. I have published 0.3.1 today. Let me know if you run into any problems.

from react-md.

gutenye avatar gutenye commented on May 22, 2024

@mlaursen 👍

from react-md.

gutenye avatar gutenye commented on May 22, 2024

Can you provide an example: how to use it?

from react-md.

mlaursen avatar mlaursen commented on May 22, 2024

If i am understanding UMD correctly, it is just a way to allow AMD and RequireJS. Here are some examples for AMD, RequireJS, and es6 module imports. I am assuming you can use ES6 in your project though.

// AMD

require(['react', 'react-dom', 'react-md/lib/Cards'], function(React, ReactDOM, Cards) {
  const { Card, CardText } = Cards;

  ReactDOM.render(
    <Card>
      <CardText>This is some text for a card</Card>
    </Card>,
    document.getElementById('app')
  );
});
// RequireJS

const React = require('react');
const ReactDOM = require('react-dom');
const Cards = require('react-md/lib/Cards');

const { Card, CardText } = Cards;

ReactDOM.render(
  <Card>
    <CardText>This is some text for a card</Card>
  </Card>,
  document.getElementById('app')
);
// ES6 Modules

import React from 'react';
import ReactDOM from 'react-dom';
import { Card, CardText } from 'react-md/lib/Cards';

ReactDOM.render(
  <Card>
    <CardText>This is some text for a card</Card>
  </Card>,
  document.getElementById('app')
);

I am honestly guessing on the AMD implementation though. There aren't too many examples I can use to base that off of.I just know that my compiled sources in lib reflect this article: http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/#umd-universal-module-definition

from react-md.

gutenye avatar gutenye commented on May 22, 2024

Actually, I want to use it in browser, for testing and learning purpose without create a whole new project.

For example, use React in a single html file.

<!DOCTYPE html>
<html>
  <body>
  <div id="app"></div>
  <script src="node_modules/react/dist/react.js"></script>
  <script src="node_modules/react-dom/dist/react-dom.js"></script>
  <script src="node_modules/node_modules/babel-core/browser.js"></script>
  <script type="text/babel">
    class App extends React.Component {
      render() {
        return <div>hello</div>
      }
    }

    ReactDOM.render(<App />, document.querySelector("#app"))
  </script>
</html>

I think react use webpack to generate one single umd dist file.

from react-md.

mlaursen avatar mlaursen commented on May 22, 2024

Ahh ok. I didn't understand the ticket then. I'll reopen and set that up!

from react-md.

mlaursen avatar mlaursen commented on May 22, 2024

Ok, my latest pull request (and release 0.3.2+) will work in the browser or through the normal amd/requirejs/es modules imports.

I am not sure what version of babel you are using since 6+ removed the browser support.. but i got it working using the babel-standalone.

So here was the index.html I used.

<!DOCTYPE html>
<html>
  <head><link href="node_modules/react-md/dist/react-md.css" rel="stylesheet"></head>
  <body>
  <div id="app"></div>
  <script src="node_modules/react/dist/react-with-addons.js"></script>
  <script src="node_modules/react-dom/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
  <script src="node_modules/react-md/dist/react-md.js"></script>
  <script type="text/javascript">
    const input = `
const { Card, CardText } = ReactMD;

class App extends React.Component {
  render() {
    return (
      <Card>
        <CardText>Hello, world!</CardText>
      </Card>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));
`;

eval(Babel.transform(input, { presets: ['es2015', 'react', 'stage-0'] }).code);
  </script>
</html>

So every component is now accessible through the global ReactMD and you need to make sure to use the react-with-addons instead of react since this project relies on those peer dependencies.

from react-md.

gutenye avatar gutenye commented on May 22, 2024

It's working. Thank you very much.

I use babel 5, and they have discussed about supporting 'text/babel' type in babel-standalone

from react-md.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.