JSX Pragmatic 项目教程

JSX Pragmatic 项目教程

jsx-pragmaticBuild JSX structures, then decide at runtime which pragma you want to use to render them.项目地址:https://gitcode.com/gh_mirrors/js/jsx-pragmatic

1、项目介绍

JSX Pragmatic 是一个开源项目，旨在帮助开发者在使用 JSX 时能够在运行时决定如何渲染 JSX 结构。它允许你在不同的环境中（如服务器端、客户端、React 应用等）灵活地选择渲染方式，而不仅仅是依赖于 React。

2、项目快速启动

安装

首先，你需要通过 npm 安装 jsx-pragmatic：

npm install --save jsx-pragmatic

基本使用

以下是一个简单的示例，展示了如何在不同的环境中渲染 JSX：

服务器端渲染为 HTML 字符串

/* @jsx node */
import { node, html } from "jsx-pragmatic";

function Login({ prefilledEmail }) {
  return (
    <section>
      <input type="text" placeholder="email" value={prefilledEmail} />
      <input type="password" placeholder="password" />
      <button>Log In</button>
    </section>
  );
}

function render() {
  return (<Login prefilledEmail="foo@bar.com" />);
}

console.log(render(html()));

客户端直接渲染为 DOM 元素

/* @jsx node */
import { node, dom } from "jsx-pragmatic";

function Login({ prefilledEmail }) {
  return (
    <section>
      <input type="text" placeholder="email" value={prefilledEmail} />
      <input type="password" placeholder="password" />
      <button>Log In</button>
    </section>
  );
}

function render() {
  return (<Login prefilledEmail="foo@bar.com" />);
}

document.body.appendChild(render(dom()));

在 React 应用中渲染

/* @jsx node */
import { node, react } from "jsx-pragmatic";
import React from "react";

function Login({ prefilledEmail }) {
  return (
    <section>
      <input type="text" placeholder="email" value={prefilledEmail} />
      <input type="password" placeholder="password" />
      <button>Log In</button>
    </section>
  );
}

function render() {
  return (<Login prefilledEmail="foo@bar.com" />);
}

ReactDOM.render(render(react({ React })), document.getElementById('root'));

3、应用案例和最佳实践

多环境渲染

JSX Pragmatic 的一个主要应用场景是在不同的环境中渲染相同的 JSX 结构。例如，你可以在服务器端渲染为 HTML 字符串，在客户端渲染为 DOM 元素，在 React 应用中渲染为 React 组件。

自定义渲染器

你可以轻松地构建自定义渲染器，以满足特定需求。例如，你可以创建一个渲染器，将 JSX 渲染为某种特定格式的字符串。

4、典型生态项目

Babel

JSX Pragmatic 与 Babel 紧密集成，允许你通过 Babel 的 pragma 选项选择 JSX 的编译目标。

React

虽然 JSX Pragmatic 不依赖于 React，但它可以与 React 无缝集成，提供在 React 应用中渲染 JSX 的能力。

Preact

对于使用 Preact 的项目，JSX Pragmatic 同样提供了支持，允许你在 Preact 应用中渲染 JSX。

通过以上内容，你应该能够快速上手并充分利用 JSX Pragmatic 项目。

jsx-pragmaticBuild JSX structures, then decide at runtime which pragma you want to use to render them.项目地址:https://gitcode.com/gh_mirrors/js/jsx-pragmatic