React---day4

3、React脚手架

生成的脚手架的目录结构

什么是PWA

• PWA全称Progressive Web App，即渐进式WEB应用；
• 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；
• 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能；
• 这种Web存在的形式，我们也称之为是 Web App；

PWA解决了什么问题

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏；
• 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能；
• 实现了消息推送；
• 等等一系列类似于Native App相关的功能；

什么是webpack

webpack 是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) ；当 webpack 处理应用程序时，它会递归地构建一个 依赖关系图(dependency graph) ，其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

生成一个自己的react项目：

新建终端输入以下命令进行全局安装：

npm install -g create-react-app

切换想创建项目的目录，在终端输入如下命令：

create-react-app 项目名称

• npm start：执行开发模式，运行该项目

• npm run build：执行生产模式，打包该项目

• npm test：执行测试模式，测试该项目

• npm run eject：将webpack相关文件暴露出来(React设置webpack文件隐藏，为了防止我们修改其文件导致项目不能运行，执行该命令，将隐藏文件显示且不能再将其隐藏了！！！)
  ​

默认是创建React+JS的项目，如果想创建React+TypeScript的项目，执行如下命令即可。

create-react-app 项目名称 --template typescript
cd 项目名
npm start

我发现问的react版本是19，和老师的有很多不一样，看来后面就要ai+文档辅助我了

清理一下目录：

index.js:

import React from "react";
import { createRoot } from 'react-dom/client';
// 由于文件名大小写不一致问题，修正导入路径以匹配实际文件名
import { App } from "./App";

const root = createRoot(document.getElementById('root'));
root.render(<App />);

App.js:

import React from "react";
export class App extends React.Component{
    constructor(){
        super();

        this.state =  {
            counter : 0
        }
    }
    render(){
        return (
            <div>
                <h2>当前计数为{this.state.counter}</h2>
            </div>
        )
    }
}

–template typescript
cd 项目名
npm start

我发现问的react版本是19，和老师的有很多不一样，看来后面就要ai+文档辅助我了

**清理一下目录：**

[外链图片转存中...(img-F4RSmgdd-1748488991253)]

**index.js:**

import React from “react”;
import { createRoot } from ‘react-dom/client’;
// 由于文件名大小写不一致问题，修正导入路径以匹配实际文件名
import { App } from “./App”;

const root = createRoot(document.getElementById(‘root’));
root.render();

**App.js:**

import React from “react”;
export class App extends React.Component{
constructor(){
super();

    this.state =  {
        counter : 0
    }
}
render(){
    return (
        <div>
            <h2>当前计数为{this.state.counter}</h2>
        </div>
    )
}

}