# Views
Views on the client side are used to organize and handle rendered elements.
They can be also used to serve HTML documents for crawlers (e.g. GoogleBot).
All views must be placed in the `/views` folder and use *XHTML* format.
View file does not have to be fully compatible with the *XML* standard. You cannot use self-enclosing tags from *HTML* (write `` instead of ``).
`views/index.xhtml` file is rendered as the first page.
All elements inside the `` tag are rendered.
Each element in the view file can be stylized, but for now, lets learn about some predefined elements available in Neft:
## String Interpolation
String interpolation can be used in texts and in attribute values.
Value you want to render put in `${…}`, just like in *EcmaScript 6 String Template*.
Inside the brackets you can use data from different places like [routes](/routing.md), *XHTML* tags, scripts and others. You will learn more about it later. For now, let's remember that `state` is an object where you can store data for a view.
```xhtml
${state.title}
```
Will render any string you saved in a `state` object under the `title` key inside the `h1` tag.
```xhtml
```
Will put any string you saved as `state.image` into `src` attribute.
## log
For the debug purposes you can use `` tag.
This tag logs the given attributes and the whole body into a console.
Each *string interpolation* change is detected and the whole tag is logged.
```xhtml
${state.text}
```
## Properties Evaluation
Some of the properties are automatically evaluated to JavaScript objects.
String `[...]` evaluates to an array.
```xhtml
```
```xhtml
```
String `List(...)` evaluates to [List](/data-binding.html#list).
```xhtml
```
String `{...}` evaluates to an object.
```xhtml
```
String `Dict(...)` evaluates to [Dict](/data-binding.html#dict).
```xhtml
```
## n-if
This attribute is used to hide or show the tag depends on the given condition.
If the given *string interpolation* evalues to *falsy* result,
the whole tag is being hidden.
```xhtml
Hi ${state.userName}!
```
`n-else` attribute may be specified in the next sibling.
```xhtml
Hi ${state.userName}!You need to log in
```
## n-each
`n-each` attribute repeats tag body for each element of the given list.
```xhtml
ping
```
Inside the repeated tag body you can refer to:
- `props.index` - current element index from a list,
- `props.item` - current element from a list,
- `props.each` - `n-each` attribute (e.g. an array or a [List](/api/list.html)).
```xhtml
```
## ref
Tags with the `ref` attribute are available in the `refs` object.
```xhtml
Your name: ${refs.userNameInput.props.value}
```
# prop
This tag is used to dynamically change the given property on the parent element.
```xhtml
Active: ${refs.header.props.isActive}
```
# component
This tag is used to create separated and repeatable parts of a document.
Each component has to define a unique `name`.
*Component* can be created using the ** tag,
or by creating a tag with the component name.
It's recommended to start component names with a big letter.
```xhtml
```
`Use[component]` attribute can be changed in runtime.
```xhtml
H1 heading
```
# import
This tag is used to import *component*s from other files.
The *href* attribute can be an absolute path (e.g. `/file.xhtml`),
relative to the current file position (e.g. `./file.xhtml`), or
relative to the *views* folder (e.g. `file.xhtml`).
All imported files are accessible inside the document.
```xhtml
```
Optional `as` attribute specifies a namespace for imported components.
```xhtml
```
# target
This tag is used in a *component* to define where the given children should be placed.
```xhtml
```
# blank
The best on the end.
Only children of this tag are rendered.
```xhtml
```