React 笔记[1] hello world
React 笔记[1] hello world
明白了！既然你已经安装了 Node.js，我们可以 从零开始搭建一个 React + Tailwind CSS 的 Hello World 项目。我将一步步列出操作指令，你只需要在终端里依次执行。
✅ 第一步：初始化项目
mkdir my-hello-react
cd my-hello-react
npm init -y
✅ 第二步：安装 React 和 React DOM
# verbose 打印细节
npm install react react-dom --verbose
✅ 第三步：安装开发工具（Vite）
我们用 Vite 来做开发服务器和构建工具，它比 webpack 快得多：
npm install --save-dev vite --verbose
✅ 第四步：创建项目结构
在项目根目录下创建以下目录和文件：
mkdir src
touch index.html
touch vite.config.js
touch src/main.jsx
touch src/App.jsx
✅ 第五步：编辑文件内容
index.html：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Hello React</title></head><body><div id="root"></div><script type="module" src="/src/main.jsx"></script></body>
</html>
vite.config.js：
export default {root: '.',
};
src/main.jsx：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'; // 引入 Tailwind 样式ReactDOM.createRoot(document.getElementById('root')).render(<App />);
src/App.jsx：
export default function App() {return (<div className="flex items-center justify-center h-screen bg-gray-100"><h1 className="text-4xl font-bold text-blue-600">Hello, World!</h1></div>);
}
✅ 第六步：安装并配置 Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
修改 tailwind.config.js：
export default {content: ["./index.html", "./src/**/*.{js,jsx}"],theme: {extend: {},},plugins: [],
};
创建并编辑 src/index.css：
@tailwind base;
@tailwind components;
@tailwind utilities;
✅ 第七步：添加运行脚本
在 package.json 的 scripts 区块中添加：
"scripts": {"dev": "vite","build": "vite build","preview": "vite preview"
}
✅ 第八步：运行项目！
npm run dev
打开浏览器访问 http://localhost:5173，你会看到 “Hello, World!” 的页面！
要我帮你打包成一个完整的 zip 文件结构，或者生成一个 GitHub 项目模板吗？
最佳实践
npm create vite@latest . -- --template react-ts# 选择 react# 选择 ts