JavaScript API - React

Unity Forma comes bundled with a sample JavaScript and HTML UI, built with React and JSX, that you can use with WebGL builds.

React code that uses JSX must be compiled using Babel before you can use it on a web page.

Note: There are some changes, such as Rider autosave, that Babel does not detect. If you notice that changes you made do not appear in the final result, terminate the batch job and restart it.

The section describes how you make changes to the sample UI.

Making changes to the UI

Before you start, make sure that Node.js (and npm) is installed.

  1. Import the Forma WebGL HTML template from the Forma menu: Forma > Advanced > Import WebGL API.
  2. Make a copy of projectDir/Packages/com.unity.industrial.forma/React~ to a writable directory. For example, you can copy it to projectDir/Assets/WebGL/React, but you can also copy it to a directory that is outside of the Unity project.
  3. Open a terminal in (or navigate to) the folder you copied the files to.
  4. Run npm install to install the React dependencies.
  5. Run npx babel --watch src --out-dir <output directory> --presets react-app/prod to compile the React source files to valid JavaScript. src is the subfolder that contains the React source files and <output directory> must be changed to the directory where you would like to output your compiled files. Babel will watch the source files and automatically compile them once changes are detected. This output directory should be a folder located within the WebGL HTML template you are using for your build. This ensures that all compiled JavaScript files will get copied over to the output build directory. For faster iterations during development, you may choose an output directory that points directly to the output build directory. Please remember, however, that making a new WebGL build will overwrite these files so make sure to copy all changes back to the WebGL HTML template folder in the project Assets folder.
  6. Once the build scripts are running, you can make changes to the React JSX source code located in the src folder.