CRA Universal 项目教程

最新推荐文章于 2024-09-10 07:56:31 发布

宣昀芊

最新推荐文章于 2024-09-10 07:56:31 发布

阅读量826

点赞数 24

本文链接：https://blog.csdn.net/gitblog_00622/article/details/141737403

版权

CRA Universal 项目教程

cra-universal🌏 Create React App companion for universal app. No eject, zero config, Streaming SSR with Suspense. React 18 ready项目地址:https://gitcode.com/gh_mirrors/cr/cra-universal

1. 项目的目录结构及介绍

CRA Universal 是一个用于创建 React 应用的辅助工具，它支持服务器端渲染（SSR）和其他一些高级特性。以下是项目的目录结构及其介绍：

cra-universal/
├── docs/                # 文档目录
├── packages/            # 包目录
├── website/             # 网站目录
├── .babelrc             # Babel 配置文件
├── .gitignore           # Git 忽略文件配置
├── .prettierrc          # Prettier 代码格式化配置
├── CONTRIBUTING.md      # 贡献指南
├── LICENSE              # 许可证文件
├── README.md            # 项目说明文件
├── package.json         # 项目依赖和脚本配置
├── pnpm-workspace.yaml  # pnpm 工作区配置

2. 项目的启动文件介绍

CRA Universal 的启动文件主要包括 package.json 中的脚本配置和一些核心文件。以下是主要的启动文件及其介绍：

package.json：包含了项目的依赖、脚本和其他配置信息。

{
  "scripts": {
    "start": "cra-universal start",
    "build": "cra-universal build",
    "serve": "cra-universal serve"
  }
}

src/index.js：客户端的入口文件，负责渲染 React 应用到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

server/index.js：服务器端的入口文件，负责启动服务器并渲染 React 应用。

const express = require('express');
const { render } = require('@cra-express/core');
const path = require('path');

const app = express();
const clientBuildPath = path.resolve(__dirname, '../build');

app.use(express.static(clientBuildPath));
app.get('*', render({ clientBuildPath }));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

3. 项目的配置文件介绍

CRA Universal 的配置文件主要包括 .babelrc、.prettierrc 和 package.json。以下是这些配置文件的介绍：

.babelrc：Babel 配置文件，用于配置 JavaScript 的转译规则。
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
.prettierrc：Prettier 配置文件，用于配置代码格式化规则。
```
{
  "singleQuote": true,
  "trailingComma": "all"
}
```

package.json：项目的主要配置文件，包含了依赖、脚本和其他配置信息。

{
  "name": "cra-universal",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.1",
    "@cra-express/core": "^4.1.0"
  },
  "devDependencies": {
    "cra-universal": "^4.0.0"
  }
}

通过以上配置文件和启动文件，CRA Universal 可以实现零配置的服务器端渲染和其他高级特性。

cra-universal🌏 Create React App companion for universal app. No eject, zero config, Streaming SSR with Suspense. React 18 ready项目地址:https://gitcode.com/gh_mirrors/cr/cra-universal