React 笔记[1] hello world

AI-Greater-Me

于 2025-05-08 19:16:25 发布

阅读量531

点赞数 2

CC 4.0 BY-SA版权

文章标签： react.js 笔记前端

本文链接：https://blog.csdn.net/weixin_38734472/article/details/147794025

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

React 笔记[1] hello world

React 笔记[1] hello world

✅ 第一步：初始化项目

✅ 第二步：安装 React 和 React DOM

✅ 第三步：安装开发工具（Vite）

✅ 第四步：创建项目结构

✅ 第五步：编辑文件内容

index.html：

vite.config.js：

src/main.jsx：

src/App.jsx：

✅ 第六步：安装并配置 Tailwind CSS

修改 tailwind.config.js：

创建并编辑 src/index.css：

✅ 第七步：添加运行脚本

✅ 第八步：运行项目！

最佳实践

`index.html`：

`vite.config.js`：

`src/main.jsx`：

`src/App.jsx`：

修改 `tailwind.config.js`：

创建并编辑 `src/index.css`：