禅城网站设计企业策划咨询公司
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>)
}
}