1、Win11React 简介
Win11React 是一个使用现代 Web 技术(主要是 React.js)在浏览器中完全复刻 Windows 11 桌面操作系统界面与核心交互体验的项目。它不是一个真正的操作系统,而是一个高度仿真的 Web 应用。
2、技术实现亮点
这个项目的技术价值很高,是学习前端开发的优秀范例:
组件化架构:整个桌面(任务栏、开始菜单、窗口、文件资源管理器)都被拆解为独立、可复用的 React 组件。
状态管理:需要高效管理大量UI状态(如窗口位置、打开的应用、主题模式),是学习复杂状态管理的绝佳案例。
CSS 与动画:使用 Tailwind CSS 等工具精准还原了 Windows 11 的 Fluent Design 设计语言,包括毛玻璃效果、平滑动画和图标系统。
3、主要应用场景
前端学习者:通过研究其源码,学习如何用 React 构建大型、复杂、状态驱动的单页应用。
创意项目与作品集:开发者可以将其作为技术能力的展示,或在其基础上二次开发,创建个性化的 Web 桌面。
娱乐与怀旧:用户可以在任何有浏览器的设备上,体验 Windows 11 的界面,作为一种有趣的在线互动演示。
4、安装docker
1.安装依赖包
bash
yum install -y yum-utils device-mapper-persistent-data lvm2
2.配置docker yum源
bash
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
3.安装docker
bash
yum install -y docker-ce
4.修改docker配置文件
bash
mkdir /etc/docker -p
sudo tee /etc/docker/daemon.json <<-'EOF'
{
"registry-mirrors": [
"https://docker.credclouds.com",
"https://k8s.credclouds.com",
"https://quay.credclouds.com",
"https://gcr.credclouds.com",
"https://k8s-gcr.credclouds.com",
"https://ghcr.credclouds.com",
"https://do.nark.eu.org",
"https://docker.m.daocloud.io",
"https://docker.nju.edu.cn",
"https://docker.mirrors.sjtug.sjtu.edu.cn",
"https://docker.1panel.live",
"https://docker.rainbond.cc"
],
"data-root": "/etc/docker"
}
EOF
5.启动docker
bash
systemctl daemon-reload
systemctl enable docker --now
systemctl restart docker
systemctl status docker
6.安装docker-compose
bash
curl -L "https://github.com/docker/compose/releases/download/v2.29.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
bash
chmod +x /usr/local/bin/docker-compose
ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
docker-compose --version
5、拉取win11镜像
bash
mkdir -p /data/win11
docker pull blueedge/win11react:latest
docker pull ghcr.io/blueedgetechno/windows11:master
6、创建docker-compose.yml文件
bash
vim /data/win11/docker-compose.yml
version: "3.8"
services:
windows11-web:
image: blueedge/win11react:latest
container_name: windows11
restart: always
ports:
- "3000:3000"
7、启动win11容器
bash
cd /data/win11
docker-compose up -d
docker-compose ps
8、docker启动win11容器
bash
docker run -d --restart unless-stopped --name windows11 -p 3000:3000 blueedge/win11react:latest
docker run -d --restart unless-stopped --name windows11 -p 3000:3000 ghcr.io/blueedgetechno/windows11:master
9、查看win11容器日志
bash
docker logs -f windows11
10、访问win11系统
bash
浏览器访问: http://180.184.67.237:3000