Creating Web Pages

Concise Frontend Architecture

Seagull provides you with simple building blocks for websites as single page apps (SPAs): Page classes. They are supercharged React components with built-in routing, html header manipulation, async data loading and full server-side rendering.

This Guide will ... Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quasi quibusdam officiis ratione impedit nihil tenetur recusandae voluptas voluptatum, odit possimus dicta, vel nobis soluta fugiat non atque dignissimos aperiam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quasi quibusdam officiis ratione impedit nihil tenetur recusandae voluptas voluptatum, odit possimus dicta, vel nobis soluta fugiat non atque dignissimos aperiam.

seagull add page HelloWorld --path /hello-world
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import * as React from 'react'
import { Page } from '@seagull/core'

export default class HelloWorld extends Page<{}, {}> {
  /**
   * the url path this page will be mounted on
   */
  path: string = '/hello-world'

  /**
   * outputs the HTML of this Page
   */
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    )
  }
}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quasi quibusdam officiis ratione impedit nihil tenetur recusandae voluptas voluptatum, odit possimus dicta, vel nobis soluta fugiat non atque dignissimos aperiam.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import * as React from 'react'
import { Page } from '@seagull/core'

export interface IState {
  text: string
}

export default class HelloWorld extends Page<{}, IState> {
  /**
   * the url path this page will be mounted on
   */
  path: string = '/hello-world'

  /**
   * initial state value
   */
  state = { text: '' }

  /**
   * load data from the backend
   */
  async componentDidMount() {
    const response = await fetch('/hello?name=world')
    const text = await response.text()
    this.setState({ text })
  }

  /**
   * outputs the HTML of this Page
   */
  render() {
    return (
      <div>
        <h1>Text: {this.state.text}</h1>
      </div>
    )
  }
}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quasi quibusdam officiis ratione impedit nihil tenetur recusandae voluptas voluptatum, odit possimus dicta, vel nobis soluta fugiat non atque dignissimos aperiam.

1
todo