一个新想法,开始流水账……(12/n)

每次冒出一个新想法都是很让人感到兴奋的。这种兴奋能让我忘掉许多,然后不管不顾的就开始了,这次也差不多。

管它呢,开心最重要了!所以,开始吧!

支持老鼠就请他喝咖啡呀——【稻米鼠的爱发电】(毫无逻辑的硬……

想法有点大,估计又得咕咕挺长时间的,先不说是什么,一边做一边记录吧。是哒,我打算把这个贴子作为开发的流水账!

首先,选择的技术或者已经忘掉了,或者并不熟悉,反正,得一边看文档一边做。哈哈哈,你猜对了,发这篇内容的时候我连项目文件夹都没建立呢。

0001 起始

  • 打算使用 React,但是不知道和我的目标设备能不能兼容。以及看过几次文档,现在又忘光光了,还得重新开始;
  • TypeScript, 虽然我老搞得乱七八糟的,但也可以在尝试一次;
  • Stylus 这个倒是没啥说的,复杂的不会,但少写大括号就很 nice(bushi
  • Webpack 打包,这个灵活度高,啊,配置,好吧,配置还得学……

我先去看文档了,然后初步弄起来看看这套东西放在一起能不能走得通(笨蛋表示努力学习,学不会……就绕路!

0002 第一坑

接着上面的思路,我创建了文件夹,安装了 Webpack,会不会用的放一边,安装咱还是得会的。

然后装 react,诶,这时候就要注意了,可能有坑,可能需要装的是 react-cli 什么的,我得看看文档……

靠,创建项目用:

npx create-react-app my-app

合着我刚才白忙活了啊,行吧,好歹还取了个项目名呢,复制出来,省的再敲字了。

然后,提示我:“项目名称不能有大写字母”……

这车翻的好彻底。

备注:如果和我一样使用 yarn,则命令如下:

yarn create react-app my-app

0003 第二坑

为什么喜欢写流水账(编程的时候喜欢吐槽)呢,因为实在是太欢乐了。

这才几分钟,我又把项目给删了。

事情是这样的,刚才建立好项目,我想着我得添加 TypeScript 呀,但是怎么添加呢,得改配置文件吧,配置文件在哪里呢……往下看,诶?!如果你想要这样可以用这个,想要那样可以用那个……是我莽撞了啊,没看完说明就开始,原来还有这么多开始项目的途径,可这些都是什么呢,咱也不懂啊,挨个查查,哦哦,好像我用不上呢。

等等,我刚才想做什么来着?对,加入 TypeScript 支持,啊,找到了!你可以在创建项目的时候使用对应的模板……靠?!

npx create-react-app my-app --template cra-template-typescript
# or
yarn create react-app my-app --template cra-template-typescript

行吧,删除项目,再来一次!

然后用命令:

npm run eject
# or
yarn run eject

让它把项目的配置文件显示出来。

然后看到它内置了 scss|sass 支持,要不,要不至此我就用这个吧,反正我需求也不高,都差不多。

0004 啊!

等等,我要是不添加 Stylus 支持的话,我显示配置干嘛啊?!能不能再隐藏回去,看着这么多文件我眼晕(

赶紧查文档,赶紧查……文档里怎么说:

Note: this is a one-way operation. Once you eject, you can’t go back!

闭嘴!删项目,再来~

0005 困:sleepy:

代码,功能,怎么实现……越想越兴奋。本来说着早睡早起的,现在想失眠了。

焚蛋啊!现在可兴奋了,清醒的像半夜的猫咪(

错别字啦

稻米
:rofl:

我改好啦,感谢提醒~

0006 安静

上午没有翻车,因为上午一直在读文档。文档里说:

我们建议你不要跳跃着阅读,因为每个话题都是紧密联系的。

所以我很老实的按部就班读文档,下午应该也是。

挺好的,深刻地证明了——我只要不动手,就不会翻车。

0007 没猜到呢

想想我需要一个路由,不是路由器,就是分配不同网址显示不同内容的路由。需求很低,基本上是最低状态了,连当 exmaple 都不够格那种低。其实我手搓几句代码完全可以实现。但是吧,现在前端的乐趣不就是干啥都有轮子么,何况 react 官方也提供路由组件了,那么……

查查文档,诶呀,英文的,看着头大,照猫画虎吧,反正我需求极低,跑不起来的概率应该不大吧。

看起来没报错,主页也能正常显示,但是另一个测试页面怎么就不行呢?我用的 hash 模式,#page 不对,/#page 不对;/page 不对……诶?!好神奇哦

算了,加入一个链接(路由自己提供的方法),指向那个页面看看它怎么写的吧。

/#/page,行吧,我是真没想到。

0008 又删了……

我以为开始写之后就没啥可絮叨的了,反正也没想搞什么复杂的东西。结果,诶,老报错,经过深入的思考,我好像不怎么会用 TypeScript,又懒得再去复习。那我用它干什么呢……好像,就是叶公好龙。

删了重来吧,虽然有点丢脸,但也不是什么大事情。而且刚开始嘛,才写几句,现在回头为时不晚。

写的这几句也舍不得丢掉,备份一下,一会儿再抄回来就是了,把 src 文件夹复制到……算了,就先放我的文档吧。

然后轻车熟路的关掉编辑器,关掉命令行,删库……不用跑路,不慌。诶,删不掉,文件夹被占用。再检查,编辑器关掉了,命令行关掉了,傻逼 Windows,就不能告诉我被啥占用么,生气气。

打开命令行 rm -rf 反正这个意思吧,虽然有报错,但是基本删干净了,剩下一个 .git 手动删掉。但是项目文件夹还是删不掉,还是被占用,生气气。

行啦,我也不较劲了,我重启电脑,然后删文件夹,重新创建项目,轻车熟路,一路无话,从头再来。先把我的代码抄回来……

诶?!我的文档里的 src 文件夹呢???靠,刚才卡着的不会是这个复制进程吧。

回收站……我刚才怎么删的来着?!命令行!行吧,完全没经过回收站。

真就,从头开始呗。

0009 我需要……

我需要状态管理,反正我需要传递数据,虽然我要写的是个非常简单的东西,但是你管我!

查了查,好像用 hook 就好了,嗯,要学习的东西又增加了,看文档,看文档

0010 摸鱼是有好处的

好慢啊,这都几天了,老鼠毛也没写出来了呢。

上面说到了 hook,啊,你不用管是什么,你也可以认为这是一项前沿的 H 技术,能提升生产力的。

那显然我就会想把它应用在所有地方啊,于是就得老技术换成新技术,改代码。这种重复劳动想想都头大啊!

不过好消息是,老鼠还没写几个组件,所以几分钟就都换好了。


注:hook 是渐进式的,就是你可以在任何时候开始选择使用它,而不必将前面的旧方法全替换成它。现在很多前端技术也都是类似的,这样的学习体验相对友好。我这里单纯是自己没写几行,当然就强迫症的全都替换了。

0011 平静

毕竟我不是一个纯新手,虽然我确实很笨,还很慢。终于写出了第一个效果,大概应该称为 case?

反正很小啦,真入门水平。

测试一下,在目标设备上打开,果然一片洁白什么都不显示呢。不过好消息是 build 之后就可以了,并没有需要我调节什么设置,这还是很令人开心的。

还有很多细节需要调整,一点一点往前蹭。现在的问题是……饿了,弄点吃的去

0012 蘑菇

做出了这样的效果。

蘑菇一天,睡了一觉,想起来这个阴影效果不需要增加一个伪元素,早起去掉了(

当然这次我想做的不是时钟,反正也可以单独使用。这推进速度,蜗牛都想嘲笑我

晚上吃蜗牛大餐的节奏
:rofl: