If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.

<img src="https://s3.amazonaws.com/mjs.neo.learning.images/learn/NeoWorkspace.png" style="height: 400px;">

As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
the script `npm run server-start` from the workspace, Neo.mjs launches a web
serve whose doc root is the workspace. 

<img src="https://s3.amazonaws.com/mjs.neo.learning.images/learn/ServerRoot.png" style="height: 400px;">

If you drill down into the `src` directory you'll see your applications.
The `docs` directory holds the Neo.mjs API docs. Examples are in the `examples` directory.

In order to discuss the structure of an app, we'll create a simple starter 
app. To do that, run this command from the workspace.

`npm run create-app-empty`

At the first prompt, name the app `Foo`, and accept the default for everything else.
The script creates an application structured as follows.

<img src="https://s3.amazonaws.com/mjs.neo.learning.images/learn/FooFolder.png" style="height: 400px;">

These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
You will, however, edit the main container, and its associated "controller" and "model",
as well as create new views, new controllers, etc. 

Now let's look at a source file. This is the contents of `MainView.mjs`.

<pre class="neo">
import Base from '../../../node_modules/neo.mjs/src/container/Base.mjs';
import Controller from './MainViewController.mjs';
import ViewModel from './MainViewModel.mjs';

class MainView extends Base {
    static config = {
        className: 'Foo.view.MainView',
        
        controller: {module: Controller},
        model: {module: ViewModel},

        layout: {ntype: 'fit'},
        items: [],
    }
}

Neo.setupClass(MainView);

export default MainView;
</pre>

Neo.mjs views are composed of components. A component can be a "container", which means it
visually holds or groups other components, or a regular component, like a button. 

The main view is a container because it extends `Base`, which is a reference to the 
container base class imported in the first statement. The items in a container are configured 
in `items:[]`, which is empty in this starter code.

This view also has a _controller_ and _model_. We'll talk about those later, but in a nutshell,
a controller is where event handling and app logic goes, and a model is where you set up shared
bindable data.

We'll go into a lot more depth about view, controllers, and models in other topics, but to let
you see how a component is configured let's put a button in the container. 

First, we need to import the class that defines buttons. Then we'll describe the new button in the
`items:[].`

<pre class="neo">

import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
import Controller  from './MainViewController.mjs';
import ViewModel   from './MainViewModel.mjs';
import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';

class MainView extends Base {
    static config = {
        className: 'Foo.view.MainView',
        
        controller: {module: Controller},
        model: {module: ViewModel},

        layout: {ntype: 'fit'},
        items: [{
            module: Button,
            text: 'Button'
        }],
    }
}

Neo.setupClass(MainView);

export default MainView;
</pre>

Note the entry in +items:[]+. That's a description of the button that'll be created as the single
item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is _declarative_,
which components and objects are _described_. It's an abstraction. In other words we're saying 
what we want, but not how it's done. We want a button with some text &mdash; how that's done
isn't important here in the container. A non-declarative approach would be more focused on _how_,
where you might way "I want a &lt;button> HTML element with its html set to some value." 

In another topic you'll learn about the Neo.mjs config system and declaratively describing
views, controllers, and other things.

If you run the +foo+ app you'll see one huge button. That's because the container is configured to 
use the "fit" layout, which means the container is designed to hold one and only one component,
and that component will take up all available space. We could get a more normal looking button
by changing the layout.

`layout: {type:'vbox', align:'start},`

Change that line and look at the running application. 

Neo.mjs has scores of component classes.
You can extend them to create your own reusable components and sets of components.

Other topics discuss coding applications, how the config system works, controllers,
and bindable data. However, as long as we're here
