Update class components to functional components

[wjlee2020]

Although the React version is 17~, the current template uses class-components.
I think it may help to update the template to use functional class components and hooks, especially for new-comers to office add-ins and react post-class components.

I would be willing to open a PR for this update.

[AlexJerabek]

Thanks for flagging this issue. Coincidentally, @Rick-Kirkham is currently working to update our React templates to use contemporary React patterns. It would be excellent if you could provide feedback on that PR when it's ready.

[Rick-Kirkham]

@wjlee2020 Thanks for your interest. As @AlexJerabek mentioned, we agree. I have created new projects for the 6 hosts (Excel, PPT, Outlook, Project, OneNote, and Word) that use functional components and hooks. They also use the newest version of Fluent UI.

There are some other improvements, too; e.g., the existing templates have the Office.js code inside the same module as the App component, which is not consistent with the principle of separation-of-concerns. Also, the existing templates assign data that will never change to state, which doesn't really illustrate state management. So, our existing React projects aren't very "Reacty".

The next major step is to update the unit tests and end-to-end tests in this repo (and the React Typescript) repo to match the new projects. I'm working on that now.

[wjlee2020]

Sounds great! Thanks for the updates. Looking forward to the changes/PR!