当前位置：首页 > article >正文

React 笔记[1] hello world

article 2025/10/9 8:13:50

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 明白了！既然你已经安装了 Node.js，我们可以从零开始搭建一个 React Tailwind CSS 的 Hello World 项目。我将一步步列出操作指令，你只需要在终端里依次执行。 ✅ 第一步：初始化项目 mkdir my-hello…...

编程日记 2025/9/29 12:27:35

Verilog Test Fixture 时钟激励

1、占空比50%时钟产生 always begin<clock> 1b0 ;#<PERIOD/2> ;<clock> 1b1 ;#<PERIOD/2> ; end reg <clock> 1b0 ;alwaysbegin#<PERIOD/2> ;<clock> ~<clock> ;end 2…...

编程日记 2025/9/29 21:18:27

守护数字家园：个人博客安全防护指南

前言在之前的文章《WordPress个人博客搭建（一）》《WordPress个人博客搭建（二）》《WordPress个人博客搭建（三）》中，我们已经在非凡云云服务器上，借助1Panel搭建起属于自己的数字庭院…...

编程日记 2025/10/7 17:45:13

【网络编程】三、TCP网络套接字编程

文章目录 TCP通信流程Ⅰ. 服务器日志类实现Ⅱ. TCP服务端1、服务器创建流程2、创建套接字 -- socket3、绑定服务器 -- bind🎏4、服务器监听 -- listen🎏5、获取客户端连接请求 -- acceptaccept函数返回的套接字描述符是什么，不是已经有一个了…...

编程日记 2025/9/29 7:49:27

trae ai编程工具

Trae，致力于成为真正的 AI 工程师（The Real Al Engineer）。Trae 旗下的 AI IDE 产品，以智能生产力为核心，无缝融入你的开发流程，与你默契配合，更高质量、高效率完成每一个任务。版本差异国内…...

编程日记 2025/10/6 3:03:54

在CubeMX生成的工程中系统时钟节拍配置的函数为： __weak HAL_StatusTypeDef HAL_InitTick(uint32_t TickPriority) {HAL_StatusTypeDef status HAL_OK;/* Check uwTickFreq for MisraC 2012 (even if uwTickFreq is a enum type that doesnt take the value zero)…...

编程日记 2025/6/16 16:24:51

神经网络发展历程——积跬步至千里

神经网络类型层线性or非线性创新问题备注感知器单层线性模型，输出 1 1 1， − 1 -1 −1误差反馈学习阈值函数不可导，构造学习规则与感知器准则等价线性神经元单层线性模型梯度下降法训练参数线性函数，多层仍是线性变换本质上是最小…...

编程日记 2025/9/29 9:18:30

Java 24：重构数字信任边界 —— 后量子时代的智能安全防御体系构建

引言在量子计算阴影与 AI 驱动攻击交织的网络安全新纪元，Java 平台正经历着自诞生以来最深刻的安全架构革新。作为企业级应用的核心基础设施，Java 24 不仅延续了 “一次编写，处处运行” 的跨平台基因，更以后量子密码学引擎、动态…...

编程日记 2025/6/17 0:32:55

荣耀A8互动娱乐组件部署实录（第2部分：界面逻辑与资源加载机制）

作者：从 Spine 骨骼动画里抠图三小时没睡的美术兼前端苦工一、界面整体架构拆解荣耀A8组件采用的是典型的分模块 UI 架构，即：主界面为入口容器，不同子页面（如商城、银行、客服、游戏入口）以逻辑功能划分…...

编程日记 2025/10/9 6:02:32

mac 使用 Docker 安装向量数据库Milvus独立版的保姆级别教程

Milvus 特点：开源的云原生向量数据库，支持多种索引类型和GPU加速，能够在亿级向量规模下实现低延迟高吞吐。具有灵活的部署选项和强大的社区支持。适用场景：适合处理超大规模数据和高性能需求的应用，如图像搜索、推荐…...

编程日记 2025/10/4 18:30:57

技术视界 | 青龙机器人训练地形详解（一）：如何创建一个地形

机器人强化学习中的地形训练是利用强化学习算法让机器人在不同地形环境中通过试错学习最优行为策略的过程，通过环境建模、策略学习与优化等环节，使机器人能够自主适应复杂多变的地形，提高其移动效率、稳定性和自主性，减少人为干预…...

编程日记 2025/10/2 6:45:32

网络安全系列--《文章1：网络安全基础与核心概念》

课程1：网络安全基础与核心概念学习内容 1. 网络安全定义网络安全是通过技术、管理及法律手段保护网络系统的硬件、软件及数据，使其免受破坏、篡改或泄露，确保系统稳定运行并提供可靠服务。其核心目标包括保密性、完整性、可用性、可控性及…...

编程日记 2025/5/25 3:49:16

2025-05-04 Unity 网络基础6——TCP心跳消息

文章目录 1 Disconnect 方法2 心跳消息在客户端主动退出时，我们会调用 socket 的 ShutDown() 和 Close() 方法，但调用这两个方法后，服务器端无法得知客户端已经主动断开。本文主要介绍在网络通信中，如何服务端如何判断客…...

编程日记 2025/10/4 23:57:36

word导出pdf带有目录导航栏-error记

1、打开word文档——>点击"视图"选项卡——>勾选"导航窗格" 2、点击"文件"——>导出——>创建PDF/XPS 3、点击"选项"——>勾选"创建书签时使用(C)" "标题(H)" 4、点击"确定"——>点击…...

编程日记 2025/9/22 4:43:51

1. 视频基础知识

1. 图像基础概念像素：像素是一个图片的基本单位，pix是英语单词picture，加上英语单词“元素element”，就得到了pixel，简称px。所以“像素”有“图像元素”之意。分辨率：指的是图像的大小或者尺寸。比如 19…...

编程日记 2025/10/8 15:04:23

VTK 数据结构和算法类介绍

基本数据结构类 vtkPolyData 描述: 表示多边形几何结构主要属性: Points: vtkPoints对象，存储顶点坐标 Verts: vtkCellArray对象，存储顶点数据 Lines: vtkCellArray对象，存储线数据 Polys: vtkCellArray对象，存储多边形数据 Strips: vtkCellArray对象，存储三角带数据常…...

编程日记 2025/7/4 18:20:33

云计算的基础概论

一、云计算基础概念 1. 云计算定义 • 英文：Cloud Computing • 定义：通过互联网（Internet）按需提供可扩展的计算资源（如服务器、存储、数据库、网络、软件等），用户无需管理底层基础设施。 …...

编程日记 2025/6/22 12:36:01

HarmonyOS-hdc远程网络方式连接设备

hdc工具使用手册 1 hdc简介 hdc（OpenHarmony Device Connector）是为开发人员提供的用于设备连接调试的命令行工具，pc端开发机使用命令行工具hdc，该工具需支持部署在Windows/Linux/Mac等系统上与OpenHarmony设备（或模…...

编程日记 2025/10/4 12:11:48

【计算机网络网络层深度解析】从IP协议到路由优化

目录前言技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比二、实战演示环境配置要求核心实验实现实验1：IPv6地址配置实验2：OSPF路由配置实验3：NAT转换验证运行…...

编程日记 2025/6/17 11:26:28

不同OS版本中的同一yum源yum list差异排查思路

问题描述： qemu-guest-agent二进制rpm包的yum仓库源和yum源仓库配置文件path_to_yum_conf， 通过yum list --available -c path_to_yum_conf 查询时，不同的OS版本出现了不同的结果 anolis-8无法识别 centos8可以识别说明： 1 测试…...

编程日记 2025/6/19 21:22:45

奥威BI：AI+BI深度融合，重塑智能AI数据分析新标杆

在数字化浪潮席卷全球的今天，企业正面临着前所未有的数据挑战与机遇。如何高效、精准地挖掘数据价值，已成为推动业务增长、提升竞争力的核心议题。奥威BI，作为智能AI数据分析领域的领军者，凭借其创新的AIBI融合模式，正…...

编程日记 2025/10/3 1:53:45

第三节第一部分：Static修饰类变量、成员变量

总结案例要求代码： User类： package com.day1_static;public class User {public static int num;public User() {User.num;} }Test类： package com.day1_static;public class Test {public static void main(String[] args) {User us…...

编程日记 2025/9/27 14:19:50

高级架构软考之网络OSI网络模型

高级架构软考之网络： 1.OSI网络模型： a.物理层： a.物理传输介质物理连接，负责数据传输，并监控数据 b.传输单位：bit c.协议： d:对应设备：中继器、集线器 b.数据链路层： a.…...

编程日记 2025/10/7 6:17:36

Kubernetes(k8s)学习笔记(六)--KubeSphere前置环境安装

1、安装 helm（master 节点执行） Helm 是 Kubernetes 的包管理器。包管理器类似于我们在 Ubuntu 中使用的apt、Centos 中使用的 yum 或者 Python 中的 pip 一样，能快速查找、下载和安装软件包。Helm由客户端组件 helm 和服务端组件 Tiller 组…...

编程日记 2025/10/9 0:33:56

PyTorch_张量元素类型转换

tensor.type([张量类型])torch.double() 代码 import torch import numpy as np # 使用 type() 函数进行转换 def test01():data torch.full([2,3], 10)print(data.dtype)# 注意：返回一个新的类型转换过的张量data data.type(torch.DoubleTensor)#data data.ty…...

编程日记 2025/7/10 5:51:14

架构思维：构建高并发读服务_异构数据的同步一致性方案

文章目录一、引言二、全景架构回顾三、潜在问题问题1：Binlog 延迟——理想 vs 实际问题2：Binlog 格式解析问题3：高可靠消费1. 串行 ACK 消费2. 并行消费＋乱序风险3. 解决方案问题4：缓存数据结构设计1. Key–Value 冗…...

编程日记 2025/10/3 3:21:51

剑指大规模 AI 可观测，阿里云 Prometheus 2.0 应运而生

作者：曾庆国（悦达） Prometheus 大家应该非常熟悉，正文开始前，让我们一起来回顾开源 Prometheus 项目的发展史。Prometheus 最初由 SoundCloud 的工程师 Bjrn Rabehl 和 Julius Volz 于 2012 年开发。当时，…...

编程日记 2025/10/5 3:35:10

游戏引擎学习第260天:在性能分析器中实现钻取功能

昨天那个帧内存满之后触发段错误实在没找到什么原因导致的继续研究一下为什么导致的内存不够进来释放frame 释放frame 应该会给DebugState->FirstFreeStoredEvent 赋值吧这段宏定义： #define FREELIST_DEALLOCATE(Pointer, FreeListPointer) \if(Pointer) {…...

编程日记 2025/9/26 14:36:18

【自然语言处理与大模型】使用Xtuner进行QLoRA微调实操

本文首先对Xtuner这一微调框架进行简单的介绍。手把手演示如何使用Xtuner对模型进行微调训练，包括数据准备、训练命令执行及训练过程中的监控技巧。最后，在完成微调之后，本文还将介绍如何对微调结果进行简单对话测试。一、Xtuner微调框架 X…...

编程日记 2025/10/5 9:53:55

扣子创建一个应用

什么是扣子应用扣子应用可以让你相对轻松的搭建一个具备AI功能的应用，它区别智能体，在于智能体的ui和交互相对固定，主要是以对话框聊天的方式进行交互，而扣子应用则可以让ui交互表现更加丰富。实践一个生成图片的应用这里我…...

编程日记 2025/9/25 11:15:02

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`：