Moves the added text 100 pixels from the top and 100 pixels from the left of the insertion point.addChild method inserts the created text into the ideal insertion point determined by the insertionParent property of the selection object.More info on styling text can be found in how-to-style-text tutorial Creates a Text instance and sets the text value as the input stored in the name state.Creates a reference to selection passed down as a prop.onDoneClick is triggered after the submission happens and manipulates XD objects.onInputChange method sets the name state with the string value passed from the input field.Initializes a state property called name with an empty string.Since you are going to initialize state and bind methods, implements a constructor for this React component and calls super(props) to use props passed down from the parent.Creates a react component called HelloForm.There are several different API modules you can load using require(). Gets references to the Text and Color classes from XD’s scenegraph module.Gets reference to react module installed in an earlier step.Open that file and paste in this JSON object: In the previous step, you created a file named manifest.json. Further details to follow in a later section
react-shim.js is a JavaScript file that helps React run smoothly in XD's environment.HelloForm.jsx is the file that contains the only React component we are going to use.main.jsx is the main file for the plugin.Src is your plugin's folder that contains all JavaScript files that are going to be compiled This file includes information about the plugin, such as its name, the menu item(s) it adds to XD, and so on. Open your favorite text editor and create the following files and folders (we'll add code to them in later steps): Note that, in this example, we are excluding the scenegraph API from the output bundles since this dependency is present in the XD environment.Īll dependencies are installed and we are good to go! 2. Instead, the created bundle relies on that dependency to be present in the consumer's environment. The externals configuration option provides a way of excluding dependencies from the output bundles. "watch": "nodemon -w src -e js,jsx,css -w -x yarn build", List the required dependencies in package.json.In order to correctly use React in XD, you will have to install dependencies correctly. When you have the right structure, it will look like this: my-plugin-folder Note that we are going to use webpack to bundle JavaScript files for usage in XD and the yarn package manager to install dependencies. Complete code for this plugin can be found on GitHub.
0 kommentar(er)
