React Render Strategy for Erect

Enables rendering of Erect components on Erect

Installation

Register this plugin in your pluggable.ts file of your Erect project, it will prepare your webpack configuration with React dev utility and loaders.

import '@erect/react/register';

Add React dependencies to your project

{
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
}

JSX

If you want to use JSX you will need to configure your tsconfig.json file, set the jsx options as react to compilerOptions.

Usage

Render Element

# ./shared/app.tsx
import '@erect/react';
import { mount } from '@erect/core';

mount(module)
  .render((req) => {
    req.renderReactElement((React) => (
      <div>
        <h1>Hello World</h1>
      </div>
    ));   
  });

or

# ./shared/app.tsx
import '@erect/react';
import { mount } from '@erect/core';

mount(module)
  .render(async (req) => {
    const React = await import('react');
    req.renderReactElement(
      <div>
        <h1>Hello World</h1>
      </div>
    );   
  });

Render Component

# ./shared/components/MyApp.tsx
import * as React from 'react';

export interface MyAppProps {}

export class MyApp extends React.Component<MyAppProps> {

 render() {
   return (
     <div>
       <h1>Hello World</h1>
     </div>
   );
 }

}

# ./shared/app.tsx
import '@erect/react';
import { mount } from '@erect/core';

mount(module)
  .render(async (req) => {
    const { MyApp } = import('./components/MyApp');
    req.renderReact(MyApp, {});
  });