React 笔记[1] hello world

React 笔记[1] hello world

明白了!既然你已经安装了 Node.js,我们可以 从零开始搭建一个 React + Tailwind CSS 的 Hello World 项目。我将一步步列出操作指令,你只需要在终端里依次执行。


✅ 第一步:初始化项目

bash 复制代码
mkdir my-hello-react
cd my-hello-react
npm init -y

✅ 第二步:安装 React 和 React DOM

bash 复制代码
# verbose 打印细节
npm install react react-dom --verbose

✅ 第三步:安装开发工具(Vite)

我们用 Vite 来做开发服务器和构建工具,它比 webpack 快得多:

bash 复制代码
npm install --save-dev vite --verbose

✅ 第四步:创建项目结构

在项目根目录下创建以下目录和文件:

bash 复制代码
mkdir src
touch index.html
touch vite.config.js
touch src/main.jsx
touch src/App.jsx

✅ 第五步:编辑文件内容

index.html
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
js 复制代码
export default {
  root: '.',
};
src/main.jsx
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
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

bash 复制代码
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
修改 tailwind.config.js
js 复制代码
export default {
  content: ["./index.html", "./src/**/*.{js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
创建并编辑 src/index.css
css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

✅ 第七步:添加运行脚本

package.jsonscripts 区块中添加:

json 复制代码
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

✅ 第八步:运行项目!

bash 复制代码
npm run dev

打开浏览器访问 http://localhost:5173,你会看到 "Hello, World!" 的页面!


要我帮你打包成一个完整的 zip 文件结构,或者生成一个 GitHub 项目模板吗?

最佳实践

复制代码
 npm create vite@latest . -- --template react-ts
 # 选择 react
 # 选择 ts
相关推荐
我是华为OD~HR~栗栗呀5 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java6 小时前
vivo响应式官网
前端·css·html·1024程序员节
再睡一夏就好9 小时前
【C++闯关笔记】详解多态
c语言·c++·笔记·学习·语法·1024程序员节
断剑zou天涯10 小时前
【算法笔记】暴力递归尝试
java·笔记·算法
web打印社区11 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗11 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长11 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
摇滚侠12 小时前
全面掌握PostgreSQL关系型数据库,备份和恢复,笔记46和笔记47
java·数据库·笔记·postgresql·1024程序员节
Baklib梅梅12 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_12 小时前
Chrome开发者工具
前端·chrome