React 脚手架

一、全局安装 npm install create-react-app -g

二、切换到目标目录 create-react-app name

三、进入项目文件夹 cd name

四、npm start

build 打包后生成的项目文件
node_modules 依赖包
public 项目静态资源 manifest.json 应用加壳的配置文件 robots.txt 爬虫协议文件
src 源代码自己写的文件 App.js 根组件 App.test.js 用于给App做测试 index.js 入口文件
reportWebVitals.js 页面性能分析文件（需要web-vitals 库的支持）
setupTest.js 组件单元测试文件（需要jest-dom库的支持）

index.html


html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <meta name="theme-color" content="#000000" />
    
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
    <title>React Apptitle>
  head>
  <body>
    
    <noscript>You need to enable JavaScript to run this app.noscript>
    
    <div id="root">div>
  body>
html>

APP.js


import './App.css';
 
function App() {
  return (
    <div className="App">
       App
    div>
  );
}
 
export default App;

index.js


// 相当于 main.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 标签 严格模式 检查
  <React.StrictMode>
    <App />
  React.StrictMode>
);
 
//  页面性能分析 需要 web-vitals库的支持
reportWebVitals();

相关阅读:
微信小程序如何利用接口返回经纬计算实际位置并且进行导航功能【下】
【密码学】Java实现DH函数时出现“Unsupported secret key algorithm: AES“错误
体验不尽，进化不止，看视频云技术六大创新
集成学习（一）：简述集成学习
FusionDiff：第一个基于扩散模型实现的多聚焦图像融合的论文
计算机毕业设计Java-ssm宝马官网源码+系统+数据库+lw文档
死磕AI原生应用，李彦宏重新定义大模型
Python元组（Tuple）定义和操作示例
Java案例：求平方根
算法基础课

原文地址：https://blog.csdn.net/benlalagang/article/details/126741644