如何解析 jsx

我们知道一个 react 组件是 jsx 是要通过 babel 解析成一个普通的 js 对象。我们需要下面工具包

@babel/core
@babel/node
@babel/preset-env
@babel/preset-react

小目标实现一个

ReactDOMServer.renderToString 在 nodejs 环境中渲染出 html 字符串。

安装

cd your_target_project_dir

yarn init -y

yarn add react react-dom

yarn add @babel/core @babel/node @babel/preset-env @babel/react

配置 babel

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

配置启动脚本

"scripts": {
   "dev": "babel-node ./src/index.js"
},

注意我们使用的 babel-node 而不是 node 脚本。

设置主要入口文件 src/index.js

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from './App.jsx'

const html = ReactDOMServer.renderToString(<App />)
console.log(html)

写一个 React 组件

import React from "react";

const App = () => {
  return <div>123</div>;
};

export default App;

加入 express 框架，写一个简单的接口获取 html

// const App = require('./App.jsx').default
// const React = require('react')
// const ReactDOMServer = require('react-dom/server')
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import express from 'express'
import App from './App.jsx'

const app = express()

app.use('/', async function (req, res) {
  const html = await ReactDOMServer.renderToString(<App />)
  res.send(html)
})

app.listen(1000, async function (req, res) {
  console.log('监听...')
})

在浏览器中打开 http://localhost:1000/, 在页面得到了 123。这样一个静态组件渲染到浏览器中。

问题

这是一个静态组件，没有任何动态交互。没有数据加载。而且在nodejs中是没有 window， document 等浏览器中的 api。所以很多其他的事情是需要注意。下面的文章我们就会探讨这些问题，Nodejs 同构 React 的理论基础会在下面的文章中补充。

React 在 Nodejs 中同构之 如何在node 环境中解析 jsx