By Philippe Leefsma (@F3lipek)
React - arguably the best front-end technology to built medium to large-sized web applications at the moment, says the JavaScript community. Unlike other tech out there from the JavaScript jungle, React is focusing only on the View part of the MVC pattern, bringing more flexibility to the developer choices. Components that you write in React and that you use in your app can be seen as interchangeable building blocks, a bit like what we intend to provide with the Forge Web API's. Well written components should be de-coupled from app main architecture and can be updated, rewritten, or replaced at no or small cost for the developer. In the current JavaScript ecosystem where things are evolving so quickly and new technology show up every other day, I definitely see that coming handy... Who wants to rewrite his entire application as your main framework is bumping major version? Not targeting any specific tech here ;)
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:
https://github.com/Autodesk-Forge/forge-rcdb.nodejs
https://forge-rcdb.autodesk.io
Here is a screenshot of the app featuring the Markup3D extension:
Subscribe