oly react

Create an app with React and oly.

oly react is a module of the oly project.

import { Kernel } from "oly";
import { page, ReactServerProvider } from "oly-react";
import * as React from "react";
 
class ReactApp {
 
  @page
  index() {
    return <h1>Hello World</h1>
  }
}
 
Kernel
  .create({HTTP_SERVER_PORT: 5000})
  .with(ReactApp, ReactServerProvider)
  .start()
  .catch(console.error);

Installation

$ npm install oly oly-react react @types/react react-dom

Features

@inject/@env/@on with React

import { inject, Kernel } from "oly";
import { AppContext } from "oly-react";
import * as React from "react";
import { render } from "react-dom";
 
class App extends React.Component {
  @inject kernel: Kernel;
 
  render() {
    return <h1>{this.kernel.id}</h1>
  }
}
 
const kernel = Kernel.create();
render(
  <AppContext kernel={kernel}><App/></AppContext>,
  document.getElementById("app"));

Router

import { layout, View, page, Go } from "oly-react";
 
class App {
  @layout root() {
    return <div>
      <Go to="/">Home</Go>
      <Go to="about">About</Go>
      <View/>
    </div>
  }
  
  @page("/") index() {
    return <h1>Home!</h1>
  }
  
  @page("/a") about() {
    return <h1>About!</h1>
  }
}
 

Server Side Rendering

// app.tsx
import { page } from "oly-react";
 
class App {
  @page home() {
    return <div>Hi</div>
  }
}
 
// main.browser.ts
import { Kernel } from "oly";
import { ReactBrowserProvider } from "oly-react";
 
Kernel
  .create()
  .with(App, ReactBrowserProvider)
  .start()
  .catch(console.error)
  
  
// main.server.ts
import { Kernel } from "oly";
import { ReactServerProvider } from "oly-react";
 
Kernel
  .create({REACT_SERVER_POINTS: ["www"]}) // webpack build directory
  .with(App, ReactServerProvider)
  .start()
  .catch(console.error)

Dependencies

Routing	path-to-regexp
History	history
Meta	react-helmet