집 > 기사 > 웹 프론트엔드 > 반응 백엔드 렌더링 템플릿의 자세한 해석

반응 백엔드 렌더링 템플릿의 자세한 해석

亚连원래의: 2018-06-12 16:12:482151검색

이 글에서는 주로 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 Code

<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를 기반으로 구성 요소 참조 및 생성을 단순화합니다. 다음과 같이 디렉터리 구조를 생성한다고 가정합니다.

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

다음 nodejs 코드를 실행합니다.

세 가지 구성 요소가 생성됩니다:

Header
Body
Layout

그런 다음 nx.render

components/
 Header.jsx
 Body.jsx
 Layout.jsx

를 통해 렌더링됩니다. 위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 됩니다.

반응 백엔드 렌더링 템플릿의 자세한 해석

관련 기사