検索

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

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

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

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

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

  1. {{if}}、{{loop} などのさまざまなテンプレート エンジンによって定義された構文を学習する必要がある}

  2. コンポーネント化のサポートは十分強力ではなく、実装は複雑で、使いにくいです

上記の問題点を考慮して、作者は 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

  1. Body

  2. Layout

  3. そして、nx.render
    4. <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 の高次コンポーネントの詳細な紹介

関連記事

続きを見る