I was asked to write a demo web app to illustrate how to integrate seamlessly database information graphically with the Forge Viewer and decided to start on a clean base with a React application. The challenge when using React is to get your app architecture right because you have more choices to do and more moving parts. I knew I wanted to use Redux, to manage my app state, but that still leaves a great deal of choices to be made. After some research I stumbled accross that boiler plate: https://github.com/davezuko/react-redux-starter-kit. Over 6000 stars on github and recommended by Dan Abramov, creator of Redux - you can't go wrong with such references!
I will post regularly my React tips, tricks and experiments as I go along with that project, but I wanted to start by showing how to use the Forge viewer in a React app. This post does not intent to be a tutorial on how to get started with React, you will find already so much resources on the web for that, so if you are not familiar with the technology, I recommend you spend an hour or two taking a look at the basics.
The viewer is somehow different than - let's say - a classic web component because you can instantiate viewer3D object only after the containing div has been appended to the DOM, so my code is using a little trick to reference that div from the component, see the render method. The rest of the code is pretty straightforward as far as the Viewer component is concerned. I tried to keep it as a strict minimum but provide methods to initialize the environment and load a document from its URN, so a maximum of control can be delegated to the controlling component while keeping the Viewer component flexible and easily reusable in any other project. But enough talking, here is the code of the Viewer React component in my app, links to the complete code on github and the live demo:
Here is a screenshot of the app featuring the Markup3D extension: