Is it possible to use Ant Design straight into the browser in combination with Reactjs without Webpack?
Question
I have very specific scenario where I have create-react-app configured React Single Page Application(SPA) within the ASP.NET Core framework. Along with the SPA I have some static Razor pages on the server taking care of some stuff such as authentication and profile management. I have already tried Ant Design with my SPA and it works fine. Now I would like to unify the layout of my SPA with my static pages by using Ant Design directly on the browser in my static Razor pages in combination with Reactjs.
I know that using reactjs in the browser is possible as described here https://reactjs.org/docs/add-react-to-a-website.html
In the Ant Design documentation in the section Import in Browser is briefly mentioned that it is possible to use the antd js library straight into the browser as a global variable although not recommended https://ant.design/docs/react/introduce , but I am wondering whether there is some working example which illustrates how it's done exactly.
Here I've created a minimal example with help of the information from the mentioned links above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React and Ant Design browser example</title>
<link rel="stylesheet" href="https://unpkg.com/antd@3.23.1/dist/antd.min.css"/>
</head>
<body>
<div id="like_button_container"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/antd@3.23.1/dist/antd.min.js" crossorigin="anonymous"></script>
<script>
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
</script>
</body>
</html>
By opening the example above in the browser I get the following error:
Panel.js:272 Uncaught TypeError: ef(...) is not a function
at Module.i.m.a (Panel.js:272)
at i (bootstrap:19)
at Object.i.m.a (index.js:25)
at i (bootstrap:19)
at Object.i.m.a (antd.min.js:50)
at i (bootstrap:19)
at bootstrap:83
at universalModuleDefinition:9
at universalModuleDefinition:1
And also now I still have to use the 'antd' components into the example, but I don't know how to reference to them. If I do the following where Button should be a globally assigned antd button component it complains ' ReferenceError: Button is not defined ':
return e(
Button,
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
I would appreciate some suggestions how to make that example running.
2 answers
solution1
0 2021-10-26 06:57:38
This thread is the first stack overflow question when searching "ant design react without webpack".
Here an example with React, ant design and babel (for jsx):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React and Ant Design browser example</title>
<script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/antd@4.16.13/dist/antd.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4.16.13/dist/antd.min.css"/>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return <p>You liked this</p>
return <antd.Button type="primary" onClick={() => setLiked(true)}>Primary Button</antd.Button>
};
</script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
solution2
-1 2019-12-20 07:10:59
Here are docs about how to use React and antd in browser without webpack.
https://ant.design/docs/react/introduce#Import-in-Browser https://reactjs.org/docs/add-react-to-a-website.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.