Working with React
When working with React, other frameworks, or bundlers like Webpack and Parcel, you'll need to understand how to effectively use them inside the developer tool. There are various options available to you, depending on your workflow needs.
Adding a plugin to the workspace#
In this particular scenario, you'll essentially have two
manifest.json files. One will be in your plugin's source code directory, and the other will be in your plugin's distribution directory.
You can load either one of these, but you need to be aware of the differences.
- Adding a plugin using the distribution
manifest.jsonmeans that you're loading the plugin from the distribution folder entirely. If your plugin build steps involve removing and recreating the distribution folder, or cleaning all the files within the folder, your plugin may not reload correctly in the developer tool.
- Adding a plugin using the source
manifest.jsonis the preferred option, but you'll also need to edit the plugin's options. Open ••• > Options, click Advanced, and then enter the relative path (from the
manifest.jsonfile you selected) to your plugin's distribution folder. This will load the plugin in the same manner as the previous point, but any build steps that remove or recreate the distribution folder won't impact reloading the plugin in the developer tool.
Another important note is that if you're adding a plugin that uses a bundler or framework make sure you install its dependencies – for example, if you're downloading the sample plugins for Adobe XD, you'll need to run
npm install or
yarn install for those based on React. The Developer Tool will not do this for you.
Watching your plugin#
When using bundlers or frameworks, you'll typically have a build step that watches your plugins for changes. The developer tool does not know about your build steps, so if you want the developer tool to reload automatically when changes are detected, you'll need to:
- Run your
watchbuild process in a terminal
- ••• > Watch the desired plugin from the Developer Tool
watch build process detects a change, it'll rebuild the plugin, and this will cause the Developer Tool to see the resulting build changes and reload the plugin in the host.