React---day4 - 技术栈

3、React脚手架

生成的脚手架的目录结构

什么是PWA

PWA全称Progressive Web App，即渐进式WEB应用；
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；
随后添加上 App Manifest 和 Service Worke r 来实现 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>
    )
}

}

复制代码