> 웹 프론트엔드 > JS 튜토리얼 > 반응 백엔드 렌더링 템플릿의 자세한 해석

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

亚连
풀어 주다: 2018-06-12 16:12:48
원래의
2213명이 탐색했습니다.

이 글에서는 주로 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 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 코드를 실행합니다.

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

  1. Header

  2. Body

  3. Layout

그런 다음 nx.render

components/
 Header.jsx
 Body.jsx
 Layout.jsx
로그인 후 복사
를 통해 렌더링됩니다. 위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 됩니다.

관련 기사:

vue2.0을 사용하여 프런트 엔드 별 등급 기능 구성 요소를 구현하는 방법

nginx+vue.js에서 프런트 엔드와 백엔드 분리를 달성하는 방법

방법 nodejs+express 환경에서 다중 사용자 구축 채팅방

위 내용은 반응 백엔드 렌더링 템플릿의 자세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿