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基础:异常篇
Leetcode680：验证回文串 ||
IP和MAC的作用区别
MySQL复合查询
springboot基于web的在线问答社区系统设计与实现毕业设计源码061628
最新Python深度学习技术进阶与应用
从零学算法 (LCR 177. 撞色搭配)
【微机接口】汇编指令集：伪指令
【大胆开麦系列】老板给我半小时做一个可视化报表，其实我用python几分钟就做完了
wpf datagrid常用绑定以及格式

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