web前端培训React应用(基于React脚手架)

2023-05-30 0 484

采用create-react-app建立react应用领域

web前端培训React应用(基于React脚手架)

1. react钢架

1.1. xxx钢架: 用以协助合作开发人员加速建立两个如前所述xxx库的模版工程项目

1.1.1. 包涵了大部份须要的实用性(句法检查和、jsx校对、devServer…)

1.1.2. 浏览好了大部份有关的倚赖

1.1.3. 能间接运转两个单纯效用

1.2. react提供更多了两个用作建立react工程项目的钢架库: create-react-app

1.3. 工程项目的总体控制技术构架为: react + webpack + es6 + eslint

1.4. 采用钢架合作开发的工程项目的特征: 模组化, 模块化, 产业化

2. 建立工程项目并开启

第一步,全局安装:npm i -g create-react-app

第二步,切换到想创工程项目的目录,采用命令:create-react-app hello-react

第三步,进入工程项目文件夹:cd hello-react

第四步,开启工程项目:npm start

3. react钢架工程项目结构

public —- 静态资源文件夹

favicon.icon —— 网站页签图标

index.html ——– 主页面

logo192.png ——- logo图

logo512.png ——- logo图

manifest.json —– 应用领域加壳的实用性文件

robots.txt ——– 爬虫协议文件

src —- 源码文件夹

App.css ——– App模块的样式

App.js ——— App模块

App.test.js —- 用作给App做测试

index.css —— 样式

index.js ——- 入口文件

logo.svg ——- logo图

reportWebVitals.js

— 页面性能分析文件(须要web-vitals库的支持)

setupTests.js

—- 模块单元测试的文件(须要jest-dom库的支持)

4. 功能界面的模块化编码流程(通用)

1. 拆分模块: 拆分界面,抽取模块

2. 实现静态模块: 采用模块实现静态页面效用

3. 实现动态模块

3.1 动态显示初始化数据

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个模块?

3.2 交互(从绑定事件监听开始)

模块的组合采用-TodoList

功能: 模块化实现此功能

1. 显示大部份todo列表

2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务