React4XP - JsxPath
Each entry is identified by its own jsxPath.
Short and brutal: the jsxPath is a name string generated from the path and filename of the compiled asset after building, relative to /build/resources/main/r4xAssets/ - without file extension.
During development though, these 3 rules are probably easier:
If you use
portal.getComponent()to insert a component object (like
entryin the first example), you can ignore the jsxPath and let the component object do the job:
React4xp.renderwill use it to look for an entry with the same name, in the same folder, as a part/page/layout controller.
But if you need to access an entry with a particular name or from a different folder (from anywhere in the compiled JAR, actually), here’s how to find the jsxPath of an entry:
If an entry’s source file is a TSX/JSX under /src/main/resources/ site/, the jsxPath is the source file’s path relative to /src/main/resources/ - unix-style and without file extension.
So the jsxPath will start with
site/…etc (and the asset will be compiled into a folder below /build/resources/main/r4xAssets/ site/, and so on).
Or, using the setup from the starter, you can also put your entries under src/main/resources/ react4xp/entries. Then the jsxPath (and compiled-asset path) will be relative to /entries/ instead.
Actually, you can control this with the
entryDirsproperty in your local react4xp.config.js. The starter has added
entryDirs:['entries']here, but this is a comma-separated list of folder names relative to src/main/resources/react4xp/. Remember, if you add more entryDirs or replace
entries, the jsxPaths will always be relative to those new entryDirs, so beware of name collisions.
For example: add
entryDirs:['entries','../myComponents']. Since entryDirs and
../are relative to src/main/resources/react4xp/, the new entry source folder is src/main/resources/myComponents/. Now new TSX/JSX files can be put there, and get a jsxPath relative to that. So the entry src/main/resources/myComponents/ app/myEntry.jsx will get the jsxPath
"app/myEntry", and will be compiled to this entry asset: /build/resources/main/r4xAssets/app/myEntry.js.
If you’re ever unsure: after building, the jsxPaths of all the available entries are stored in build/resources/main/r4xAssets/entries.json.
This file is generated by webpack during build. It’s also used by the runtime, so it should not be deleted or edited!