{item.title}
{item.abstract}
/blog/${slog}
}>read more...
Proact is an template engine for node js which renders React like jsx functional components to static HTML or XML.
npm install @proact/core
npm install @proact/core
`
Basic usage
Rendering HTML
`
// templates/Paragraph.jsx
import Proact from '@proact/core'
export default (props, context) => (
{context.body}
)
`
`
// index.js
const Proact = require('@proact/core')
const renderer = Proact.createRenderer({ views: 'templates' })
renderer
.renderToString('Paragraph.jsx', { body: 'lorem ipsum' })
.then(function (html) {
console.log(html)
})
`
Rendering XML
`
// templates/data.jsx
import Proact from '@proact/core'
export default async (props, context) => {
return (
xmlns="http://www.myorg.org/schemas/data/0.9"
m:xmlns="http://www.myorg.org/schemas/meta/0.9"
>
{context.title}
{context.category}
)
}
`
`
// index.js
const Proact = require('@proact/core')
// set docType to xml
const renderer = Proact.createRenderer({
views: 'templates',
docType: 'xml',
})
renderer
.renderToString('data.jsx', {
title: 'lorem ipsum',
category: 'dolor',
})
.then(function (xml) {
console.log(xml)
})
`
$3
`
// server.js
const express = require('express')
const Proact = require('@proact/core')
const PORT = 3100
const app = express()
Proact.initializeViewEngine(app, { views: 'views' })
app.get('/', (req, res) => {
const context = { title: 'Basic Example' }
res.render('index', context)
})
app.listen(PORT, function () {
console.log(server running at http://localhost:${PORT})
})
`
$3
Proact supports only functional components. The component gets two parameters: props and context.
`
import Proact from '@proact/core'
export default (props, context) => (
{context.user.email}
)
`
Components can also be async.
`
import Proact from '@proact/core'
export default async function (props, context) {
const data = await getSomeDataAsync()
return (
{data.map(item => - {item}
)}
)
}
`
Insert HTML content
`
import Proact, { UnsafeHtml } from '@proact/core'
export default (props) => {
const { name } = props
return (
Hello ${name}
} />
)
}
`
Use content cache
`
import Proact, { Cache } from '@proact/core'
const getItems = function (numberOfItems) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
Array(numberOfItems)
.fill()
.map(() => 'Lorem ipsum dolor sit amet')
)
}, 500)
})
}
const List = async (props) => {
const items = await getItems(props.numberOfItems)
return (
{items.map((item) => (
- {item}
))}
)
}
const CachedList = () => {
return (
key={large-list}
// maxAge duration in seconds
maxAge={60}
content={() =>
}
/>
)
}
`
Short example
`
import Proact, { Cache, UnsafeHtml } from '@proact/core'
import MarkdownIt from 'markdown-it'
import db from '../db'
const markdown = new MarkdownIt()
const Post = async (props) => {
const { slug } = props
const post = await db.getPostBySlug(slug)
const content = markdown.render(post.content)
return (
{post.title}
{post.abstract}
)
}
const RelatedPosts = async (props) => {
const { slug } = props
const posts = await db.getRelatedPosts(slug)
return posts.map(item => (
{item.title}
{item.abstract}
/blog/${slog}}>read more...
)
}
const BlogPost (props, context) {
const { slug } = context
return (
<>
key={post_${slug}}\
maxAge={360}
content={() => (
)}
/>
key={relatedposts_${slug}}
maxAge={60}
content={() => (
)}
/>
>
)
}
``