ホームページ > 記事 > ウェブフロントエンド > React バックエンドレンダリングテンプレートの詳細な解釈

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

亚连オリジナル: 2018-06-12 16:12:482142ブラウズ

この記事では、主に 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 サイトの他の関連記事を参照してください。

nginx node.js vue.js express if 类模板 JS

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：React の高次コンポーネントの詳細な紹介次の記事：React の高次コンポーネントの詳細な紹介

続きを見る

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

関連記事

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