YAML Basic
To continue with the following tutorial, you should have already installed uteam CLI, created tutorial-react, and created yaml-examples from template. If not, please visit Get started to go through this process first.

Once created yaml-examples, and run npm start in your packages/main folder. Browsing http://localhost:3000 will show the following welcome screen.

Clicking ‘Hello World’ under ‘- Pages’ will bring you to the following example. We will use this to illustrate how YAML scripts generate web pages.

app.yaml

#
There is an app.yaml file under the folder ../tutorial-react/packages/get-started in this tutorial.

When you run uteam generate, the system looks for a default app.yaml in the folder.  A new set of JSX files are then generated based on the app.yaml scripts.

Each YAML file consists of a header and a list of <Component>.  As an introductory example, we will only go through the <Component> portion here. Which is the following seven lines of codes.  

Please refer to YAML Overview if you want details to configure the header to create a new project from scratch.
helloworld:
  - h1: Hello World
  - Fields:
    - Age
    - Name Please: Peter
      id: name
  - div: You name is %name%

Component

#
’helloworld’ is the component name for this example. Under helloworld: there is a list of elements which will be translated to HTML element as follows:
- a: Text
<a>Text</a>
- a:  
      text: Text
      href: '/'
<a href='/'>Text</a>
- div:
    - props:
        class: name
<div className="name">
    …
</div>
- br:
<br/>
- hr:
<hr/>
- h1: Title
<h1 href='/'>Text</h1>
Other supported HTML elements are p, h1 - h6, div, span, center, hr, a, img, br.   For further details, please refer to HTML.

You may modify Hello World to any words, then run uteam generate to see the changes in your browser.

Fields

#
Under the Fields container, there is a list of field elements in the form of <field label>: <(optional) field value>.
  - Fields:
    - Age
    - Name Please: Peter
      id: name
In this example
  • Age is a field with no default value specified.
  • Name Please is another field with ‘Peter’ as its default value. Here a field id ‘name’ is also further specified, which acts as a variable reference used by div (%name%) in the last line.
    • Besides field id, you may also add other field properties after any <field label>. Please refer to the Field section for details.

    Variable

    #
    Value of a local variable can be obtained through the format %<field id>%. Here, %name% represents the value of the above field id name..
      - div: You name is %name%
    When you type your name into that Name Please input field, your input will be real time reflected here.