iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

MERN Stack + Tailwind CSS - React 小專案實踐計畫 系列

透過MERN Stack 架構 (MongoDB, Express.js, React, Node.js) 來建立 React 小型專案,並使用近期流行的 Tailwind CSS 打造網站樣式。藉由邊學邊做的模式,紀錄學習過程。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

【Day 1】什麼是 MERN Stack ? 為什麼選擇它?

嗨大家好~ 這是我第一次參與 iThome 鐵人賽,這次的挑戰比較著重在應用、個人經驗及結果的部分,所以理論部分不會描述太多。雖然已經接觸前端一段時間了,但還是...

2022-09-16 ‧ 由 Sofffia 分享
DAY 2

【Day 2】目前前端三大主流框架之一 - React

前端三大主流框架 如果有心往前端的方向前進,相信你肯定聽過這三個框架,他們常常被拿來比較,是目前前端三大主流框架:(以下為維基百科簡介) React -...

2022-09-17 ‧ 由 Sofffia 分享
DAY 3

【Day 3】專案前的準備 - 流程規劃 & 頁面設計 Figma

官網:https://www.figma.com/在進入開發之前,免不了需要經過籌劃階段,例如主題的制定、流程的規劃、以及設計環節等等,而整體 UIUX 更算是...

2022-09-18 ‧ 由 Sofffia 分享
DAY 4

【Day 4】著手建立 React 專案

準備工具 在開始 Coding 前,先介紹需要用到的工具: VS Code 應該算是目前最好用的程式碼編輯器,功能強大且方便使用,也可以添加許多擴充功能。...

2022-09-19 ‧ 由 Sofffia 分享
DAY 5

【Day 5】等等!正式 Coding 前的最後準備 - Git 版本管理

想要成為工程師的大家,一定知道用 git 管理專案是非常重要的一件事!不論是團隊合作或是個人開發,git 管理都是不可或缺的重要環節,git 可以紀錄每個版本...

2022-09-20 ‧ 由 Sofffia 分享
DAY 6

【Day 6】快速建立專案的秘訣 - 套件的使用

除了一行一行把自己要的功能或介面 code 出來之外,還有一個快速又方便的方法,能夠幫我們快速建構專案所需的東西,那就是使用「套件 Package」。 對於個人...

2022-09-21 ‧ 由 Sofffia 分享
DAY 7

【Day 7】崛起的 CSS 框架 - Tailwind CSS

Tailwind CSS Tailwind CSS 是近年來愈來愈多人使用的 CSS 框架,跟其他框架如: Bootstrap、Material-UI、Ant...

2022-09-22 ‧ 由 Sofffia 分享
DAY 8

【Day 8】模組化開發 - 元件 Component

利用 JavaScript ES6 的模組化開發在 React 中也是重要的一環,模組化的方式讓我們在開發大型複雜應用程式時更為方便且易於管理,相同的程式碼可以...

2022-09-23 ‧ 由 Sofffia 分享
DAY 9

【Day 9】頁面導覽 - React Router

到目前為止,我們都還是將所有東西寫在 App.js 中,但大部分網站總不可能只有一個頁面吧? 不像傳統靜態網頁是由一堆 HTML 檔案切換而成,SPA 動態網頁...

2022-09-24 ‧ 由 Sofffia 分享
DAY 10

【Day 10】常見的 JavaScript 語法

在繼續往下之前,想先來整理一篇常見也常用的 JavaScript 語法,這些是我認為新手會比較不熟悉但用到頻率會很高的語法。 雖然在前端開發常常是看到什麼不會,...

2022-09-25 ‧ 由 Sofffia 分享