Docs Developer Site
DeveloperDocsReact4xp3.xJsxpath

React4XP - JsxPath

Contents

What is the 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/assets/react4xp/ - without file extension.

From source file location to jsxPath

During development though, these 3 rules are probably easier:

  1. If you use portal.getComponent() to insert a component object (like entry in the first example), you can ignore the jsxPath and let the component object do the job: React4xp.render will 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:

  1. If an entry’s source file is a 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/assets/react4xp/ site/, and so on).

  2. 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 entryDirs property 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 ../myComponents to entryDirs: 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 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/assets/react4xp/app/myEntry.js.

Overview in entries.json

If you’re ever unsure: after building, the jsxPaths of all the available entries are stored in build/resources/main/assets/react4xp/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!

Name, not path

JsxPaths are not actually file system paths, but static name strings. So avoid shortcuts and relative references like ../, etc.

​

See also: chunks.

​
​

Contents

Contents