📌  相关文章
📜  什么主机可以运行 react js - Javascript (1)

📅  最后修改于: 2023-12-03 14:49:07.939000             🧑  作者: Mango

React JS - Javascript 可以运行在哪些主机上？

React JS 是一个由 Facebook 推出的用于构建用户界面的 Javascript 库。它被广泛应用于单页应用程序（SPA）、移动应用程序和桌面应用程序的开发。在选择主机环境时，我们需要考虑到 React JS 的依赖要求和性能指标。下面是 React JS 可以运行的一些主机环境：

1. 浏览器端

React JS 最常见的运行环境就是浏览器。它可以通过 CDN 或者通过 npm 安装等方式来在浏览器端运行。下面是一段简单的 HTML 页面，可用于在浏览器端运行 React JS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React JS Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react"></script>
    <script src="https://unpkg.com/react-dom"></script>
    <script>
      const rootElement = document.getElementById('root');
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        rootElement
      );
    </script>
  </body>
</html>
2. Node.js

React JS 可以在 Node.js 环境下运行，这对于服务器渲染（SSR）或者构建工具（如 Next.js 或 Gatsby）的开发非常有用。你可以通过 npm 或 yarn 安装 React 模块和相关依赖。下面是一个简单的 Node.js 服务器示例：

const http = require('http');
const React = require('react')
const ReactDOMServer = require('react-dom/server');

const App = () => {
  return (
    <h1>Hello, React!</h1>
  );
};

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  const html = ReactDOMServer.renderToString(<App />);
  res.end(`<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>React JS - Node.js Demo</title>
    </head>
    <body>
      <div id="root">${html}</div>
      <script src="./bundle.js"></script>
    </body>
  </html>`);
}).listen(8000);
3. Electron

如果你正在开发桌面应用程序，可以考虑使用 Electron。Electron 是一个使用 Web 技术（HTML、CSS、Javascript）构建跨平台桌面应用程序的框架。它支持使用 React JS 和其他前端框架构建 UI 界面。下面是一个简单的 Electron 应用程序示例：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL(`file://${__dirname}/index.html`);
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
});
小结

React JS 可以在浏览器端、Node.js 环境和 Electron 应用程序中运行。无论你是想要构建单页应用、服务器渲染还是跨平台桌面应用程序，都可以考虑使用 React JS。