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

React学习

ds 2025/5/4 19:21:40

React

开发环境

1.安装node【node -v查看node版本】
2.官网地址：
React JS 的英文官网是：https://reactjs.org/。
中文官网是：https://react.docschina.org/。
3.安装命令
npx create-next-app@latest该命令会创建一个基于 Next.js 的应用。Next.js 是一个用于构建 React 应用的 React 框架，提供了如服务器端渲染（SSR）、静态站点生成（SSG）、自动代码分割、路由系统等诸多特性，适合开发大型、复杂的应用，像企业级网站、电子商务平台等。
npx create-react-app my-react-app(my-react-app为项目名)此命令用于创建一个标准的 Create React App 项目。Create React App 是一个官方提供的工具，它能快速搭建一个简单的 React 开发环境，默认采用客户端渲染（CSR），适合初学者入门学习 React 或者开发小型、简单的单页面应用。【以上安装命令二选一】
cd my-react-app
npm run start
http://localhost:3000

工程代码精简

在这里插入图片描述

index.js文件中的内容

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

功能用途

reportWebVitals：此函数用于报告网页的性能指标。在 React 项目里，它能测量和上报重要的 Web Vitals 指标，像最大内容绘制（LCP）、首次输入延迟（FID）、累积布局偏移（CLS）等。借助这些指标，你能够了解页面的性能表现，从而进行针对性优化。
registerServiceWorker：这个函数用于注册 Service Worker。Service Worker 是一种在浏览器后台运行的脚本，可实现离线支持、缓存数据、消息推送等功能。借助注册 Service Worker，你能让网页在离线状态下也能正常访问，或者对网络请求进行拦截和处理。