iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

從零開始學Web Framework : React篇 系列

自主學習React的技術並應用

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

Day_1:前置作業

去React的官方網站,並點擊教程。 接著選擇安裝底下的啟動一個新的React項目,可以自行選擇哪種React框架,而我是選擇Next.js。(注意:要先去...

2023-09-16 ‧ 由 Sharon_Mao 分享
DAY 2

Day2: 透過github創建Next App

打開Node.js command prompt到github的資料夾創建一個新的Next App。(成功畫面如下圖,會下載基本的模板到github資料夾裡面...

2023-09-17 ‧ 由 Sharon_Mao 分享
DAY 3

Day_3: 修改page.tsx和globals.css(1)

改變圖片和整體顏色,圖片從page.tsx那邊改,而顏色去globals.css。svg是存向量圖型的檔案類型,優點是放大縮小不會有圖片模糊的問題。relat...

2023-09-18 ‧ 由 Sharon_Mao 分享
DAY 4

Day_4: 理解code的意義

<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify...

2023-09-19 ‧ 由 Sharon_Mao 分享
DAY 5

Day_5:如何新增頁面並跳轉

首先要在nextjs-blog的資料夾中新增名為pages的資料夾,一定要跟app資料夾同一層,不然新增頁面會找不到進而出錯(這個很重要,當初沒設對位置一直出...

2023-09-20 ‧ 由 Sharon_Mao 分享
DAY 6

Day_6:想要加入css結果失敗的我

首先,這是錯誤案例,但我想要紀錄下來,因為官網上的教學都非常簡略,所以常常會發生明明照著它的指示去做,結果出問題......總之我將code部屬到vercel...

2023-09-21 ‧ 由 Sharon_Mao 分享
DAY 7

Day_7:想要加入css的我終於成功了...

昨天的問題終於解決了...果不其然跟路徑有關係。解決的方法就是把所有跟新頁面相關的設定檔案都放在同一個資料夾中,這樣在部屬時就不會出現找不到的問題。 按照官方...

2023-09-22 ‧ 由 Sharon_Mao 分享
DAY 8

Day_8:更改按鈕樣式到新增頁面上(CSS Modules)

首先在pages(也就是存放新頁面about.js的資料夾中)新增Button.js和Button.module.css,這兩個分別是存著按鈕和按鈕樣式。...

2023-09-23 ‧ 由 Sharon_Mao 分享
DAY 9

Day_9:讓按鈕有計數功能

先打開Button.js並修改成如圖那樣。(code參考:react官網) import { useState } from 'react'//useSt...

2023-09-24 ‧ 由 Sharon_Mao 分享
DAY 10

Day_10:點擊按鈕使其隨機變色

code import React, { useState } from 'react'; //生成隨機顏色的函數 function getRandomC...

2023-09-25 ‧ 由 Sharon_Mao 分享