Teebo

Teebo

• 5 React Architecture Best Practices
• A plugin system is born... · React Static
• Applying microservices design patterns to scale react app development • Soluto Engineering Blog
• Architecting your React application.
• Best architecture for the React project - Mad Devs
• Build a Super-Modular Todo App with React and Bit Components
• [Building an Enterprise React Application, Part 1 | Lullabot](https://www.lullabot.com/articles/building-an-enterprise-react-ap

Teebo

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" viewBox="0 0 1120 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<title>Piano Keyboard</title>
	<defs></defs>
		<g id="piano-keyboard">
			<g id="octave-1">
				<rect id="octave-1-C-key" class="piano-key white-key" data-piano-key="C" stroke="#555555" fill="#FFFFF7" x="0" y="0" width="80" height="400"></rect>
				<rect id="octave-1-D-key" class="piano-key white-key" data-piano-key="D" stroke="#555555" fill="#FFFFF7" x="80" y="0" width="80" height="400"></rect>
				<rect id="octave-1-E-key" class="piano-key white-key" data-piano-key="E" stroke="#555555" fill="#FFFFF7" x="160" y="0" width="80" height="400"></rect>
				<rect id="octave-1-F-key" class="piano-key white-key" data-piano-key="F" stroke="#555555" fill="#FFFFF7" x="240" y="0" width="80" height="400"></rect>

Teebo

<form [formGroup]="heroForm">
  <nb-card>
    <nb-card-header>Hero</nb-card-header>
    <nb-card-body class="col">
      <input
        formControlName="heroName"
        type="text"
        nbInput
        placeholder="Hero name"
      />

Teebo

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HobbiesStubComponent } from './component-stubs/hobbies-stub.component';

import { HeroComponent } from './hero.component';

describe('HeroComponent', () => {
  let component: HeroComponent;
  let fixture: ComponentFixture<HeroComponent>;
  const formBuilder: FormBuilder = new FormBuilder();

Teebo

import { Component, Input, OnInit } from '@angular/core';
import { ControlContainer, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-hobbies',
  templateUrl: './hobbies.component.html',
  styleUrls: ['./hobbies.component.scss']
})
export class HobbiesComponent implements OnInit {
  public hobbiesForm: FormGroup;

Teebo

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-hobbies',
  template: ''
})
export class HobbiesStubComponent {
}

Teebo

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ControlContainer, FormBuilder, Validators } from '@angular/forms';

import { HobbiesComponent } from './hobbies.component';

describe('HobbiesComponent', () => {
  let component: HobbiesComponent;
  let fixture: ComponentFixture<HobbiesComponent>;
  const formBuidler: FormBuilder = new FormBuilder();

Teebo

export interface ISession {
  username: string;
  token: string;
}

/**
 * Session class
 */

export class Session implements ISession {