02.环境准备
- mkdir react18-core
- cd react18-core
- npm init -y
安装
npm install vite @vitejs/plugin-react --save
vite.config.js
js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
resolve: {
alias: {
react: path.resolve("packages/react"),
"react-dom": path.resolve("packages/react-dom"),
"react-dom-bindings": path.resolve("packages/react-dom-bindings"),
"react-reconciler": path.resolve("packages/react-reconciler"),
scheduler: path.resolve("packages/scheduler"),
shared: path.resolve("packages/shared"),
},
},
plugins: [react()],
optimizeDeps: {
force: true,
},
server: {
port: 8000
}
});jsconfig.json
json
{
"compilerOptions": {
"baseUrl": "packages",
"paths": {
"react/*": ["react/*"],
"react-dom/*": ["react-dom/*"],
"react-dom-bindings/*": ["react-dom-bindings/*"],
"react-reconciler/*": ["react-reconciler/*"],
"scheduler/*": ["scheduler/*"],
"shared/*": ["shared/*"]
}
},
"exclude": ["node_modules"]
}src/index.jsx
jsx
console.log("index.jsx");index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React18-Core</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/packages/index.jsx"></script>
</body>
</html>package.json
json
{
"name": "react18-core",
"version": "1.0.0",
"description": "core logic about react 18",
"main": "index.js",
"scripts": {
"start": "vite",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
},
"dependencies": {
"@vitejs/plugin-react": "^4.0.0",
"vite": "^4.3.3"
}
}目录结构
所以我们需要创建一系列的文件夹: 以下是 React 18 项目的主要目录结构：
shell
react-18/
├── packages/
│ ├── react/
│ ├── react-dom/
│ ├── react-reconciler/
│ ├── scheduler/
│ ├── react-dom-bindings/
│ ├── share