React バックエンドレンダリングテンプレートの詳細な解釈-jsチュートリアル-php.cn

React バックエンドレンダリングテンプレートの詳細な解釈

亚连

リリース： 2018-06-12 16:12:48

オリジナル

2216 人が閲覧しました

この記事では、主に React バックエンドレンダリングテンプレートエンジンに基づいた noox のリリースと使用方法を紹介し、参考として提供します。

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

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

上記の問題点を考慮して、作者は React に基づいて noox のようなツールを作成しました。バックエンドテンプレートの解析に焦点を当てており、テンプレートの解析がよりシンプルで使いやすくなっています。

使い方

インストール

npm install noox

ログイン後にコピー

簡単なデモ

テンプレートコード

まずコンポーネントディレクトリを作成し、次の内容のテンプレートファイル

mkdir components && cd components
vi Head.jsx

ログイン後にコピー

Head.jsxを追加します:

rrリー

Node.js コード

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

ログイン後にコピー

Output

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;})

ログイン後にコピー

Principle

Noox は、React の Jsx に基づいてコンポーネントの参照と作成を簡素化します。次のようにディレクトリ構造を作成するとします。

3 つのコンポーネントが作成されます:

Header

Body
Layout
そして、nx.render

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

ログイン後にコピー

vue2.0を使用してフロントエンドスター評価関数コンポーネントを実装する方法

nginx+vue.jsでフロントエンドとバックエンドの分離を実現する方法

ハウツー複数人でnodejs+express環境を構築するチャットルーム

以上がReact バックエンドレンダリングテンプレートの詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。