archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2026-02-01 16:07:13 +00:00
Code Issues Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Michael Rawlings 2017-02-10 09:38:25 -08:00
parent d1bd7fdf4d
commit 07c4f12265
3 changed files with 80 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/00-getting-started.md → docs/00-installing.md
View File

@ -36,14 +36,14 @@ yarn add marko
### In the browser
Let's say we have a simple template that we want to render in the browser: `hello.marko`
Let's say we have a simple view that we want to render in the browser: `hello.marko`
_hello.marko_
```xml
<h1>Hello ${input.name}</h1>
```
First, let's create a `client.js` that requires the template and renders it to the body:
First, let's create a `client.js` that requires the view and renders it to the body:
_client.js_
```js
@ -65,7 +65,7 @@ Now we can build our bundle for the browser:
lasso --main client.js --plugins "lasso-marko"
```
This builds a `client.js` file to the newly created `static/` directory. If we had css in the template, a `client.css` file would also have been generated. You can now create an html file and drop the script (and stylesheet) in it:
This builds a `client.js` file to the newly created `static/` directory. If we had css in the view, a `client.css` file would also have been generated. You can now create an html file and drop the script (and stylesheet) in it:
_index.html_
```html
@ -81,9 +81,9 @@ Load up that page in your browser and you should see `Hello Marko` staring back
### On the server
#### Require Marko templates
#### Require Marko views
Marko provides a [custom Node.js require extension]() that allows you `require` Marko templates exactly like a standard JavaScript module. Take the following example `server.js`:
Marko provides a [custom Node.js require extension]() that allows you `require` Marko views exactly like a standard JavaScript module. Take the following example `server.js`:
_server.js_
```js
@ -92,17 +92,17 @@ _server.js_
// of your application before requiring any `*.marko` files.
require('marko/node-require');
// Load a Marko template by requiring a .marko file:
// Load a Marko view by requiring a .marko file:
var hello = require('./hello.marko');
```
#### Serving a simple page
Let's update the `server.js` to serve the template from an http server:
Let's update `server.js` to serve the view from an http server:
_server.js_
```js
// Allow requiring marko templates
// Allow requiring marko views
require('marko/node-require');
var http = require('http');

72
docs/01-getting-started.md Normal file
View File

@ -0,0 +1,72 @@
# Getting started
The easiest way to get started with Marko is to use the [Try Online]() feature. You can just open it in another tab and follow along. If you'd rather develop locally, check out the [Installation]() page.
Marko makes it easy to represent your UI using a syntax that is like HTML:
_hello.marko_
```xml
<h1>Hello World</h1>
```
In fact, Marko is so much like HTML, that you can use it as a replacement for a templating language like handlebars, mustache, or pug:
_template.marko_
```xml
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
```
However, Marko is much more than a templating language. It's a UI library that allows you to break your application into components that are self-contained and describe how the application view changes over time and in response to user actions.
In the browser, when the data representing your UI changes, Marko will automatically and efficiently update the DOM to reflect the changes.
## A simple component
Let's say we have a `<button>` that we want to assign some behavior to when it is clicked:
_button.marko_
```xml
<button>Click me!</button>
```
Marko makes this really easy, allowing you to define a `class` for a component right in the `.marko` template and call methods of that class with `on-` attributes:
_button.marko_
```xml
class {
sayHi() {
alert(`Hi!`);
}
}
<button on-click('sayHi')>Click me!</button>
```
### Adding state
Alerting when a button is clicked is great, but what about updating your UI in response to an action? Marko's stateful components make this easy. All you need to do is set `this.state` from inside your component's class. This makes a new `state` variable available to your template. When a value in `this.state` is changed, the template will automatically re-render and only update the part of the DOM that changed.
_counter.marko_
```xml
class {
constructor() {
this.state = {
count:0
};
}
increment() {
this.state.count++;
}
}
<div>The current count is ${state.count}</div>
<button on-click('increment')>Click me!</button>
```

0
docs/01-migrating.md
View File