How JSS Rendering components bind to physical file

Question

Once code-first JSS solution is deployed to a running sitecore instance, we can see rendering items created under Rendering folder in Sitecore content tree.

But, Only Component Name field is populated with name of that component.

How the binding works with physical files for JSS renderings ( /sitecore/templates/JavaScriptServices/Json Rendering) ?

Answer 1

The binding is done via JavaScript, during rendering.

When a JSS site loads, it gets the current route's layout data. In integrated mode, this comes by a JS object delivered directly to the renderView() method (server-side rendering), and in connected mode or during route change, the data is delivered by a HTTP call to the Layout Service.

This data contains the name of the components that you see in the rendering item as part of the layout:

Then the Component Factory (part of the JSS app) maps those component names into a JS component implementation (this example is React; each library does it differently):

import IntegratedPage from '../app/components/IntegratedPage';

const components = new Map();
components.set('IntegratedPage', IntegratedPage);

const componentFactory = (componentName) => components.get(componentName);

export default componentFactory;