大家好，我是大二野生前端栖夜
结束一个项目，学习新的技术栈。这是一篇心得杂谈，很久没写文章了，这两个多月来实在太忙了，既要应付繁杂的大二课业，更主要的是两个月从0开始学习React，到独立开发一个地图服务平台 。源码放在下面，欢迎掘友给我的项目提issue和star~
缘起与接触react
开发 "Ecolens 生态监测平台" 的初衷是参加一个绿色创新为主题的比赛（顺便提一下我的专业是GIS），导师牵头联系了北京一个做toG的gis公司，本来想着是才大二嘛很多东西不会先跟着公司混混成果哈哈哈，结果公司也没和像我们这个年纪的啥也不会的团队合作过，直接把他们技术栈丢过来让开始学，然后从零开始自己写....
好吧，我们四人小团队的由一名会画图表和扫雷的python，一位会gee(谷歌地球)的，一只会geoserver的(可爱认真的)我女朋友构成...... 作为一个只会JS和node基础并且毫无项目经验的切图仔，但却是团队中唯一的开发，我看了下两个月的工期压力只能硬着头皮上了
合作的公司甩过来的技术栈：
- 前端框架：react
- node框架：koa
- ui库和图表库：antd, antv
- 状态管理：mobx
- 地图库：openlayers
- 构建：vite
- 服务器部署：nginx
虽然这些确实都只是一个入门前端 --> 初级前端进阶必须会的技术工具链，但是对于只有两个月时间learn&code并且还要面对大量课业的小贵物 来说还是颇有压力。啥也别问了，打开编辑器从第一行import React from 'react'开始吧！
从11月8号开始写下第一个组件，到11月22号基本读完react官方文档。对于我这种只会js的菜鸡而言，react的学习曲线还是有比较陡峭的 ，刚粗浅刷了遍文档的我当时对useContext和useReducer状态管理、响应式Effect生命周期以及如何自定义Hook等react基础还是挺蒙圈的，即使跟着文档章节末尾的challenges写了一遍但是对实际业务的场景还是一知半解。但是只剩一个月工期必须赶鸭子上架了
公司负责和我对接的前端大佬有对我进行了简单的react面试（只是一些常见业务场景的写法），体贴地告诉我react学的勉强还行但是用原生js写也不是不可以......学都学了总得把那堆hooks拉出来遛遛啦！
产品构建与打磨
11月22日学完(入门 )react后去看 Ant Design 文档，仅学过原生CSS的我第一次接触UI组件库，看到组件式的页面布局和元素惊为天人，原来页面中的架构和逻辑真的不用自己写，已经有成熟的库帮忙封装好了
antd中的layout组件成为了日后产品服务页面的主体布局
慢慢熟悉了组件库，才明白一个成熟的组件库对于前端开发的巨大帮助，也逐渐带来了现代CSS的学习需求，如css module和tailwind css，这次项目中因为业务需求使用了一些，我准备在即将到来的寒假系统地学习它们并应用到业务中
通过react + antd的组合使用，基本满足我产品主页和产品服务页面的整体布局的搭建需求 ，接下来就是WebGIS的内容 ------------ 引入地图库了
在做这个项目之前，我完全没有接触过openlayers、leaflet之类的地图库，也对webgis开发一无所知。我的专业课程从不教授web开发的相关内容 ，更别提webgis相关的内容了，初看文档时对wms、geojson之类的协议和数据格式一无所知（还好有Google和GPT4），自己也慢慢熟悉了在各种开源社区搜索debug方案，学会用ol在前端渲染天地图、公司提供的地图api以及同事发布在GeoServer的各类切片图层
我对openlayers这个强大的地图库还用之甚少，目前只是根据业务需求进行一些栅格瓦片图和vector底图加载、渲染、样式优化和性能优化。在未来项目的迭代中将对在线地图编辑做更深入的学习使用
另外关于地图库leaflet和openlayers的选择问题，私以为leaflet对标ol的轻量级优势在es6的按需引入后不复存在，并且ol极其丰富的功能在进行大项目开发中还是比较有优势的
作为一个相对完整的react项目，路由管理与状态管理 是必不可少的。之前我也并未了解过前端路由原理 ，也没有接触过react-router 等路由管理解决方案。而且react-router刚升级到V6，很多网上的教程与gpt3.5(3.5的时间截至21年！)已经过时，刚开始学习时走了很多弯路，后来对接公司的前端大佬建议我去react-router的源码仓库下的/examples学习一些路由配置的优秀实践 ，的确受益良多。也正因为react-router V6之前的版本不再适用，使得我忍痛把gpt3.5升级到gpt4。对于初学者，用AI了解一个库的简单入门实在是很有帮助，在快速上手之后，再去系统地看它们的官方文档和社区实践，也许是一种更节约时间、提高效率的方法
还有一个前端开发中比较重要的就是TypeScript的实践 ，关于ts，久仰大名，但只去年暑假时速通过掘金一位大佬写的入门文章。在这次的项目开发中，也算第一次真正实践了tsx的开发。也慢慢上手在react中用ts进行类型检查、描述组件props结构、泛型使用等。代码量大了，ts在编译阶段对错误的捕捉我感同身受地体会，并且相当受用
前端工程化
由于我是团队中唯一的开发人员，除了写业务代码，单元测试、云服务器部署、nginx配置自然也是我做 （全干工程师 ）。不过我也是第一次相对完整地实践了从0到1前端工程化的过程，从只会在本地localhost上运行代码的小白，到打开全栈的大门：
- 对接公司的前端负责人详细教我在他们团队中的模块化和组件化思想、命名规范、代码结构规约等（特别感谢他！！）
- 选购云服务器和域名。穷学生趁腾讯云年促买了一台2G3核 88/年的服务器，终于可以自由地尝试更多非业务需求的探索与实践了！另外选购了一个 ecolens.cn的域名作为项目地址（33/年的.cn真的好便宜），购买域名的小伙伴一定要去ICP备案，否则会禁止访问
- 项目打包与前端nginx部署。从一个完全没接触过服务器与linux的小白（非科班不会教这个，之前也没有学习的想法）学着一步步操作yum去下载、部署和配置nginx，了解了反向代理、负载均衡、错误页面配置与压缩配置等nginx实践过程，也增添了网络知识的了解
在做这些服务器部署时，我也深刻意识到自己计算机基础的薄弱，寒假也许会系统地学一下计网、操作系统之类的原理，趁现在还是学生阶段，巩固计算机基础是有必要、也有时间做的
总结与收获
这两个月"迫于业务压力"的React生态学习，也是我入坑前端以来进步最快、收获最多的两个月。我从大一进来的前年11月（当时还是一名日语专业学生 ），到一年后成为react开发者 （大概算是吧！ ），从0到1开发完整项目，从0到1实践前端工程化，也深深地对React组件化的设计着迷，更学会了如何提prompt、更好地使用google和LLM学习&解决问题
在即将到来的大二寒假，我准备去精度React文档、了解Next.js（新项目已经开始做啦）、深入学习前端路由原理、熟悉mobx的集成与使用、精读vite文档，希望在大三能够顺顺利利地开始实习之旅
放个自己很喜欢的句子。感谢三位同事的陪伴，感谢明确方向、继续努力的自己
我是栖夜，感谢阅读
