菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端_张佳豪_20230711 [打印本页]

作者: 张佳豪 时间: 2023-7-11 18:09
标题: 前端_张佳豪_20230711
React 简介

- React 主要是用来构建 UI（User Interface）的 JavaScript 库
- 从 MVC 的角度来说，开发的是 V 层的代码
- React 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源

React 特点：

- 声明式：使用 React 编写UI界面和写HTML几乎一样
- 组件化: 将业务逻辑和UI拆分到不同的组件中，哪里需要哪里调用，提升开发效率
- 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互
- 灵活：React 可以与已知的库或框架很好地配合

MVC：开发模式（开发架构）

  M（Model）：模型，一般是指数据表模型，内部封装了针对于数据表的增删改查操作。

  V（View）：视图，页面。给最终用户看的网页。

  C（Controller）：控制器，控制程序的运行。在什么情况下调用哪个模型，显示哪个视图。

为什么要使用MVC？

  核心优势：前后端分离开发。前端程序员只关注V，后端程序员关注 M 和 C。提升开发效率。

不管是Vue 还是 React 都是关注 V 层的开发。并且，Vue 和 React 都能使用脚手架来创建独立的Web项目，通过Ajax来访问后端服务器，得到需要渲染到页面上的数据。这个时候就产生了前后端分离的开发模式。

前后端分离的开发模式：

M和C是后端服务器

V是前端服务器

两个服务器通过Ajax来联系

项目搭建
# 创建 react 项目，项目名是 myapp
npx create-react-app myapp

# 进入myapp 目录
cd myapp
# 启动项目
npm start
- 项目名称中不能有大写字母
- npx 是 npm v5.2.0 之后提供的命令
  - 如果没有安装react脚手架（ create-react-app），系统会自动安装
- 要在项目根目录下启动项目

public 目录

public:  存放静态资源文件

- favicon.ico:  网站图标
- index.html：首页文件
- logo192.png \ logo512.png：不同尺寸的网站图标
- manifest.json：应用加壳文件，可以将移动端项目包装成安卓或者ios应用
- robots：爬虫规则文件

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)