Skip to content

Latest commit

 

History

History
55 lines (45 loc) · 1.77 KB

ReactModule-README.md

File metadata and controls

55 lines (45 loc) · 1.77 KB

##React Module

You should register your main react component using ModuleRegistry.registerComponent().

//src/main-component.js:

const MainComponent = props => (
  <div>
    {/*Your applcation*/}
  </div>
);

window.ModuleRegistry.registerComponent('appName.mainComponentName', () => MainComponent);

You should create a new React component using ReactLazyComponent to lazy load your main component and its dependencies.
You should add the path for the script which register your main component to the manifest's files array.
You should register the new lazy component using ModuleRegistry.registerComponent().

 class MainComponentLazyComponent extends ReactLazyComponent {
   constructor(props) {
     //see manifest explanation below
     const manifest = {
       files: ['src/main-component.js'],
       component: 'appName.mainComponentName'
     };
     super(props, manifest);
   }
 }
 
 ModuleRegistry.registerComponent('appName.lazyMainComponentName', () => MainComponentLazyComponent);

###props props contains the parameters from the host and will be available within the manifest.

###Manifest ####Fields

  • files: Array of either url strings or sub arrays of url strings.
    Every item in the main array will be loaded independently.
    Using a sub array allows to serialize the download of its items.
  • component: The name you used to register your main react component to the ModuleRegistry.

####Example

{
  files: ['y.js', `${props.files.fakeFile}`, ['1.js', '2.js', '3.js'], 'z.js'],
  component: 'Prefix.mainComponentName'
}

####Explanation When the host tries to render the lazy component, it starts by loading all the required files.
Once all files are loaded, the component is rendered and receives the props parameter as props.