BEE123 React Migration

Current front end

Durandal
Knockout

Options

• Angular
• Aurelia
• React

We chose React

Why React

• We have some React developers
• React is not a Framework
• React is component based

Current UI e.g.

Our Crazy Plan

Goals for React components

• Use latest JS features
• Write real React components
• Create a bundle that we can deploy seperately
• Call React components from HTML

Code ahead

ReactDom Render

 const domContainer = document.querySelector('#like_button_container');
 ReactDOM.render(e(LikeButton), domContainer);
    

Proof of Concept

component

export class CoolButton extends React.Component {
	render() {		
		return (
			<>
				<h1>tester</h1>
				<button className="coolButton" onClick={this.props.sayHello}>
					{ this.props.title ? this.props.title : 'Yello' }
				</button>
			</>
		);
	}
}

Proof of Concept

registering a component

import { register } from 'web-react-components';
import { CoolButton } from "./components/CoolButton/CoolButton.js";
//
register(CoolButton, 'bee123-coolbutton', ['title', 'sayHello()']);

Proof of Concept

use in html

<bee123-coolbutton title="yes" sayHello="alert('tester')"></bee123-coolbutton>
<bee123-coolbutton></bee123-coolbutton>
    

Proof of Concept

Working example

Storybook

For development

storiesOf('CoolButton', module)
  .add('default', () => (
      <CoolButton />
    )
); 

Storybook

For development

storiesOf('CoolButton', module)
  .add('with CallBack', () => (
      <CoolButton 
        title="Super Duper Cool"
        sayHello={() => {
            alert('hello there');
        }}
      />
    )
); 

End