DEV Community

Yuki Kimoto
Yuki Kimoto

Posted on

6

How to use React with Perl/Mojolicious web frame work

How to use React with Mojolicious web frame work.

Let's added the following code into a template file foo.html.ep of Mojolicious after downloading React.

HTML Body

<div id="like_button_container"></div>
Enter fullscreen mode Exit fullscreen mode

HTML Header

  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <script src="like_button.js"></script>
Enter fullscreen mode Exit fullscreen mode

JavaScript

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));
Enter fullscreen mode Exit fullscreen mode

See also

I use the codes of the following site.

https://ja.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute

For Beginners

Mojolicious is a Perl web frame work that support async I/O like node.js.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay