BuyLog In
Ticket T1027409
Visible to All Users

Have demo about devextreme-react without npm?

created 4 years ago (modified 4 years ago)

About "devextreme-react without npm" and " can devextreme be used without a module loader? #84 ".

But " can devextreme be used without a module loader? #84 " is Vue Version.

Have demo for React version?

Show previous comments (1)
C C
CMCIT 4 years ago

    Yes, I have tried to build the "webpack-react" example and save to "webpack-react-simple.zip" attachment.

    "1minReact.zip" is what I tried to use after compiling webpack-react-simple and get "devextreme-react.js".

    Am I missing something?

    Alisher (DevExpress Support) 4 years ago

      Hello,

      The webpack-react example contains code illustrating how to use the Button component after building a custom bundle. Follow these steps to achieve your goal:

      1. Download the repository and unpack it
      2. Navigate to the webpack-react directory
      3. Run the npm i command to install packages
      4. Run the npm run build command to build a bundle
      5. Copy the index.html file from the public directory to the dist\public
      6. Double click the copied index.html file to see the result.

      You can change code for rendering the Button component by modifying the contents of the button-example.jsx file.

      Please try this and share your results with me.

      If this is not what you are looking for, please clarify why you do not want to use our React packages from npm.

      C C
      CMCIT 4 years ago

        Hi,
        Because I have a jQuery WebSite, I try to use progressive development to gradually "React" upgrade into the WebSite.

        I tried the code below:

        HTML
        <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>DevExtreme with webpack and React example</title>
    <link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css' />
    <link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.material.blue.light.css' />
</head>

<body>
  <div class="container">
    <h1>DevExtreme with webpack and React example</h1>
    <div id="app"></div>
    <div id="app2"></div>
  </div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="js/app/bundle.js"></script>
  <script>
    const e = React.createElement
    ReactDOM.render(e(ButtonExample, null, null), document.getElementById("app2"))
  </script>
</body>

</html>
        JavaScript
        //button-example.jsx
import * as React from "react";
import { Button } from "devextreme-react/ui/button";

export default class ButtonExample extends React.Component {
    render() {
        return (
            <Button icon="car" text="Click me"/>
        );
    }
}

        But I get the error message : "Uncaught ReferenceError: ButtonExample is not defined", why?

        Sign in to comment on this post

        Answers

        created 4 years ago

        You need to change webpack config to create a library with your components. I have prepared an example that demonstrates how it works.
        Please try this and share your results with me.

          Comments (1)
          C C
          CMCIT 4 years ago

            The example is great!

            I tried the example and build sample in my sandbox : hello-react-vanilla

            I put the modified example in the attachment.

            Thank you very much for your help!

            Sign in to comment on this post

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.