ホームページ > 記事 > ウェブフロントエンド > React バックエンドレンダリングテンプレートエンジンの使用方法 noox リリース

React バックエンドレンダリングテンプレートエンジンの使用方法 noox リリース

小云云オリジナル: 2018-01-13 09:22:022148ブラウズ

この記事では、React バックエンドレンダリングテンプレートエンジンをベースとした noox のリリースと使用方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

React のコンポーネント化のアイデアは、開発者がページをコンポーネントに分離し、コードをよりモジュール化し、拡張しやすくするのに役立ちます。 ejs、swig、jade、art などの現在人気のあるバックエンドテンプレートエンジンには共通の問題があります:

{{if}}、{{loop} などのさまざまなテンプレートエンジンによって定義された構文を学習する必要がある}
コンポーネント化のサポートが十分ではなく、実装が複雑で、使いにくい

上記の問題点に対応して、作者は React をベースに noox のようなツールを作成しました。バックエンドテンプレートの解析を強化し、テンプレートの解析をよりシンプルかつ使いやすくします。

使い方

インストール

npm install noox

簡単なデモ

テンプレートコード

まずコンポーネントディレクトリを作成し、テンプレートファイルを追加します

mkdir components && cd components
vi Head.jsx

の内容

Head.jsx は次のとおりです:

<head>
 <title>{title}</title>
 <meta name="description" content={props.description} />
 <link rel="stylesheet" href="./css/style.css" rel="external nofollow" rel="external nofollow" />
</head>

Node.js コード

const noox = require(&#39;noox&#39;);
const nx = new noox(path.resolve(__dirname, &#39;./components&#39;), {title: &#39;noox&#39;});
let output = nx.render(&#39;Head&#39;, {description: &#39;hello, noox.&#39;})

Output

<head>
 <title>noox</title>
 <meta name="description" content="hello, noox." />
 <link rel="stylesheet" href="./css/style.css" rel="external nofollow" rel="external nofollow" />
</head>

Principle

Noox はコンポーネント参照を簡素化しますと仮定して、React の Jsx に基づいて作成します。ディレクトリが作成されます。構造は次のとおりです:

components/
 Header.jsx
 Body.jsx
 Layout.jsx

次のnodejsコードを実行します:

nx = new noox(path.resolve(__dirname, &#39;./components&#39;))

は3つのコンポーネントを作成します:

Header
Body
レイアウト

その後、nx .render レンダリングを渡します

nx.render(&#39;Body&#39;, props)

React バックエンド レンダリング テンプレート エンジンの使用方法 noox リリース

関連記事

React バックエンドレンダリングテンプレートエンジンの使用方法 noox リリース