【学习笔记】前端学习-React18-第一章 起步

一 起步

1.1 了解React

React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，该公司对市场上所有 JavaScript
MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。【引用于百度百科词条React】

      请记住React是用于构建用户界面的JavaScript库，前端三把斧CSS+JavaScript+HTML，传统的页面设计先由UI工程师完成页面的UI设计，即HTML+CSS完成页面的构图，再由前端工程师完成页面功能操作，例如点击后响应，最后交由后端工程师与后端联合开发，比如标准的JSP程序设计，JSP的设计就是混杂了前端开发事项与后端开发事项的一种产物，也是最传统的应用部署模式。
      随着应用越来越复杂，前后分离，微服务等部署模式的诞生，这种单一传统的部署渐渐被MVC部署模式所替代，后端在发展过程中演化出MVC这种职责分明的架构模式，渐渐的后端只关注到业务的核心，例如业务数据在程序中的计算逻辑，从而忽视页面给用户带来的体验。后端也在为了适应千变万化的需求与计算压力产生了MDD、DDD、TDD等开发方式专注于业务的实现。
      前端为了更好的与用户交互作为应用的门户，也将开发分层为MVVC使得页面美化与前端逻辑分离更好的适应了现代软件开发。为此JavaScript承担起了前端业务处理的核心工作。

1.2 创建一个React项目

      react有两种构建应用的方式一种是采用NPM的create-react-app和使用互联网厂商提供的CDN构建，这两种项目上一般不会用到我也不打算在这个教程中采用这两种方式，而我这里采用的是使用vite来构建，当然如果你使用Ant desgin也可以使用蚂蚁所开源的umiJS这种部署工具。以下采用vite部署，当前使用版本为vite5。其他版本请注意api和配置方式差异。
      在进行一下教程开始前请完成Node.js的安装并配置好包管理器，我这里采用的是yarn包管理器，采用npm的也需要主要下镜像地址。同时你也需要有相应的开发工具，我这里采用的是WebStorm。

1.2.1 使用vite5 构建一个属于你的应用

在终端环境中执行以下命令：

yarn create vite

会出现以下界面按照提示选择相关的配置

• Project name： 项目名称（输入你的项目名称，我这里是react-vite-js-test）
• Select a framework： 选择框架（选择react）
• Select a variant: 选择一个构建方式，（这里我选择JavaScript+SWC）

什么是SWC：
       SWC就是JavaScript编译器，将ES2015或者TypeScript等高级JavaScript语法编译为浏览器可支持的JavaScript语法，据说比传统的babel快十倍。

!

以上为我安装完成后的提示
      执行上述命令可以已开发模式启动你的React应用。执行完成后根据提示的url在浏览器中访问可看到如下的界面。
小提示：执行yarn或npm命令以后会看到进度条在跑，那就是在下载依赖。

1.2.2 目录结构

比较核心的目录是:

• src 源码
• .eslintrc.cjs EsLint配置文件
• index.html 入口文件
• package.json 依赖配置文件
• vite.config.js vite配置文件
  在index.html中的script指向入口文件载入点，id=“root”,React组件挂载点。
  

1.2.3 修改App.jsx

修改src/App.jsx

页面显示出效果