Share via

How to use react component in html

Dian Weerasekara 1 Reputation point
2022-12-02T07:58:52.82+00:00

I created a dialog box for my outlook add-in and there I had to create a html page as follows

----------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> 

<!-- JavaScript Bundle with Popper -->  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>  
<!-- Office JavaScript API -->  
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>  

<script type="text/javascript" src="./popup.tsx"></script>

</head>
<body>
<div id="root"></div>

</body>
</html>

----------

and this is my react component that I need to try

import { Dialog, DialogContent } from '@fluentui/react';
import React from 'react';

const Button = () => {
return <button>Click</button>;
};

export default function Popup() { 

return (  
    <div>  
      <Button />  
      <h1>hello world</h1>  
    </div>  
  );

}

This is a outlook add-in and what I need is I wanna use react with this html page

Microsoft 365 and Office Development Other
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Oskar Shon 866 Reputation points
    2022-12-02T08:48:45.92+00:00

    I do not understand your intension. You crate web page... and open it in web browser - why?
    That page have buton for what?
    How do you want to use it in Outlook?

    Regards

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.