반응 백엔드 렌더링 템플릿 엔진 noox 릴리스를 사용하는 방법-JS 튜토리얼-php.cn

반응 백엔드 렌더링 템플릿 엔진 noox 릴리스를 사용하는 방법

小云云

풀어 주다： 2018-01-13 09:22:02

원래의

2164명이 탐색했습니다.

이 글은 주로 React 백엔드 렌더링 템플릿 엔진을 기반으로 한 noox의 출시 및 사용 방법을 소개합니다. 편집자는 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

React 구성 요소화 아이디어는 개발자가 페이지를 구성 요소로 분리하여 코드를 더욱 모듈화하고 확장하기 쉽게 만드는 데 도움이 됩니다. ejs, swig, jade, art 등 현재 널리 사용되는 백엔드 템플릿 엔진에는 공통된 문제가 있습니다.

{{if}}, {{loop} 등 다양한 템플릿 엔진에서 정의하는 구문을 배워야 합니다. }
컴포넌트화에 대한 지원이 충분하지 않고 구현이 복잡하며 사용이 쉽지 않습니다

위의 문제점을 고려하여 저자는 React를 기반으로 noox와 같은 도구를 만들었습니다. 백엔드 템플릿 구문 분석에 중점을 두고 템플릿 구문 분석을 더 간단하고 사용하기 쉽게 만듭니다.

사용방법

설치

npm install noox

로그인 후 복사

간단한 데모

템플릿 코드

먼저 컴포넌트 디렉터리를 생성하고 템플릿 파일을 추가합니다

mkdir components && cd components
vi Head.jsx

로그인 후 복사

의 콘텐츠

Head.jsx는 다음과 같습니다:

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

로그인 후 복사

Node.js Code

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

로그인 후 복사

Output

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

로그인 후 복사

Principle

Noox는 구성 요소 참조 및 생성을 단순화합니다. React의 Jsx를 기반으로 다음과 같이 가정합니다. 디렉토리가 생성됩니다. 구조는 다음과 같습니다.

components/
 Header.jsx
 Body.jsx
 Layout.jsx

로그인 후 복사

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

nx = new noox(path.resolve(__dirname, &#39;./components&#39;))

로그인 후 복사

는 세 가지 구성 요소를 생성합니다.

Header
Body
레이아웃

그런 다음 nx .render 렌더링을 전달합니다.

nx.render(&#39;Body&#39;, props)

로그인 후 복사