DAY2-必先利其器

前言:

看完了Day1的介绍後,大概可以知道接下来30天会用到的语言有:html、php、css、mysql、javascript、react等,所以今天会介绍几个在编辑这几个语言时,我最常使用的开发工具。

一、Sublime text3:

Sublime text3是我在编辑html, php, css, mysql时最常用到的编辑器,最主要的原因是他真的**太方便了!**只要选好语言接下来的快捷键跟提示功能可以大大提升编辑速度跟工作效率,更不用说他还有其他可以自行扩充的package,在初期编写网页时真的很需要这样一个得力助手阿!

安装方法其实非常简单...(待补)。

再来介绍几个常用的快捷键:

快捷键 功能
Ctrl + Shift + P 命令框
Ctrl + F 搜寻内文
Ctrl + H 取代
Ctrl + D 连续选取相同文字,并可同步操作
Ctrl + S 存档
Ctrl + W 关闭此分页
Ctrl + 数字 切换到第几个分页

二、服务器架设工具:

接下来因为我们的开发会涉及到前後端的连动,所以在本地电脑上架设一个服务器和资料库是一大重点,这里我推荐的工具是XAMPP,他可以快速的在你的电脑上安装好Apache和mysql等必备软件,并透过xampp control panel进行操作,相当便利且直观,之後在编写react需存取资料时,也可以透过XAMPP来充当资料库及服务器。

而apache又是什麽呢?其实可以想像成是一个把你的电脑模拟成网路服务器的工具,听到这里你可能会担心,如果自己电脑变成网路服务器,那会不会有其他骇客跑来乱搞我的电脑呢?**不用担心!除非你非常不小心的告诉了别人你的IP同时你家刚好是固定IP然後防火墙又刚好故障然後SSL又出事,**不然一般来说是只有你自己可以存取到这个本地服务器的!

听到这里,你可能又会问,阿如果我今天写了一个漂漂亮亮的网页想给别人看怎麽办?那我只能跟你说,你问题真的有够多。

不用担心,这时候就可以请出我们万能的Ngrok来帮忙了,关於这个Ngrok我们就在此先提过,等之後写好网页可以跟朋友分享的时候,再做一期专门的影片来跟大家介绍吧!

至於XAMPP的安装方法也非常简单:

先到下面的网址:https://www.apachefriends.org/zh_tw/download.html

选取自己的作业系统和任意版本後点击下载

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f790d428-6667-41f2-8af0-fa3fcd09dbc6/截图_2021-08-03_下午4.42.23.png

安装好後只需打开XAMPP control panel:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7e05109f-810f-4a69-ab7b-6225cb04fe6c/1627804860952.jpg

把Apache和Mysql的start按钮点下去就算架设完成了喔!

详细的操作会在之後用到时继续说明!

三、Visaul Studio Code:

VS Code作为微软开发且跨平台的免费源代码编辑器,其功能自然也是非常强大,我个人的感觉是在文字编辑的部分有不输给sublime的操作便利性,但同时又拥有强大的编译、Terminal操作和扩充功能,在开发python和react都非常方便,而之後在写react时也会用到几个必备的Extensions,到时候会再做介绍,这里就先教大家基本的安装。

那可想而知我们Visual Studio Code的安装也是非常简单,只要打开浏览器,连至 Visual Studio Code 官网:https://code.visualstudio.com/,接着他应该会对应你所用的作业系统显示相应的下载版本,只要下载安装档然後顺着按下去就可以罗!

四、小结:

今天我们大概介绍了之後会用到的几种工具,和他们的安装方法,接下来就要进入到比较多Coding的前端部份了!而这里阿森建议在用到react前都先用sublime来编辑就可以了,主要是对於html、php等没有编译需求的语言来说,sublime的功能即相当足够,也不太需要考虑到workspace等问题。

接下来,如果上述的内容你都准备好了,就让我们进入coding的世界吧!


<<:  [Golang] Deep into Hello World!

>>:  客制化带背景音乐与画面淡出的launchScreen

【心得】你今天青蛙了吗?flex之路-flex设定了宽却没有用???

前言 曾经有一段瞎摸索的时间,老是不知道为什麽flex时灵时不灵 歪着脑袋想不通为什麽... 直到摸...

Day 13 - 基本语法8(函式2)

昨天我们学完了函式的基础用法以及讲解,今天要写的是进阶用法。 会这样分两天是因为我觉得有一点难,可以...

[DAY 28]GooseMod介绍

最近发现一个酷酷的东西叫GooseMod 他能方便管理Discord的MOD 安装步骤 先到Goos...

[Day9] 14 Must Know Dev Tools Tricks

[Day9] 14 Must Know Dev Tools Tricks 14个必须知道的开发工具技...

离职倒数21天:「欸,蒲公英是什麽颜色?」谈工作上的沟通问题

有一天男友上完远端的中文课後走出房间,突然问我「欸,蒲公英是什麽颜色?」我觉得以他的习性,突然跟我聊...