- 41
- 69 392
我是大仁哥
Taiwan
เข้าร่วมเมื่อ 23 พ.ค. 2023
大家好我是大仁哥，這個頻道會教大家如何寫程式。
2小時React快速入門 - React基礎教學
在這一部影片中，你將會學習到React的基礎知識，並且我們會建立一個簡單的todo應用程式。
線上Demo：reactsimpletodo.darenge.net/
github原始碼：github.com/darenge5965/reactSimpleTodo
章節說明：
0:00 React介紹
5:34 前置作業
14:14 組件component
25:22 JSX
38:53 JSX中的陣列
46:10 React裡的條件判斷
54:07 props
1:03:06 state
1:12:01 實作todo專案
額外資訊：React 是一個陳述式、高效且具有彈性的JavaScript函式庫，用以建立使用者介面。它讓你使用小巧而獨立的「component」，來建立複雜的 UI。
#react教學 #react #reactjs #javascript #jsx #component #usestate #nodejs #node #todo #todoapp
#props #vite
線上Demo：reactsimpletodo.darenge.net/
github原始碼：github.com/darenge5965/reactSimpleTodo
章節說明：
0:00 React介紹
5:34 前置作業
14:14 組件component
25:22 JSX
38:53 JSX中的陣列
46:10 React裡的條件判斷
54:07 props
1:03:06 state
1:12:01 實作todo專案
額外資訊：React 是一個陳述式、高效且具有彈性的JavaScript函式庫，用以建立使用者介面。它讓你使用小巧而獨立的「component」，來建立複雜的 UI。
#react教學 #react #reactjs #javascript #jsx #component #usestate #nodejs #node #todo #todoapp
#props #vite
มุมมอง: 21 153
วีดีโอ
1小時Node快速入門 - Node教學
มุมมอง 7K10 หลายเดือนก่อน
在這一部影片中，你將會學習到Node.js的基礎知識，例如Node與瀏覽器的差別，Node的內建模組，以及npm等等。 JavaScript基礎教學：th-cam.com/video/_dIUz-OnLYU/w-d-xo.html 章節說明： 0:00 什麼是Node.js 3:40 安裝Node.js 6:30 執行Node.js 10:00 模組系統 18:43 內建模組 26:44 http模組 43:14 npm 54:48 nodemon 1:00:31 npm scripts 額外資訊： Node.js 是一個開源、跨平台和允許開發者使用 JavaScript 創造伺服器的工具和應用的執行環境 (run-time environment)，讓 JavaScript 不再需要依賴瀏覽器，可以直接在電腦的終端機或是伺服器上直接執行程式碼。 #node教學 #nodejs教學 ...
27分鐘快速了解JSON - JSON教學
มุมมอง 2.5K10 หลายเดือนก่อน
這集影片將會完整的介紹JSON是什麼，JSON的語法，以及JSON具體的應用。 JavaScript基礎教學：th-cam.com/video/_dIUz-OnLYU/w-d-xo.html 章節說明： 0:00 什麼是JSON 3:23 前置作業 5:33 JSON字串 10:04 JSON的語法 14:22 JSON.stringify() 16:51 JSON檔案 額外資訊： JSON(JavaScript Object Notation)，它是一種輕量級的資料交換格式，能使資料更加容易地交換，以純文字為基礎，用來儲存和傳送簡單的資料，讓人容易撰寫及閱讀。我們常常可以在網站、API與資料庫中，看到這個資料傳輸的格式。 #json #json教學 #javascript #json是什麼
JavaScript基礎教學 #09 - 簡易計算機
มุมมอง 34011 หลายเดือนก่อน
這集影片我們將會利用JavaScript來建立一個簡單的計算機。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 簡易計算機 1:17 prompt()函數 9:42 Number()函數、typeof 14:40 嵌入變數 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedja...
JavaScript基礎教學 #08 - 數字
มุมมอง 16811 หลายเดือนก่อน
這集影片我們將會認識JavaScript的數字和常用的數字函數。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 數字介紹 3:07 運算子 6:17 NaN 8:16 指數、餘數運算子 10:03 數學函數 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascript...
JavaScript基礎教學 #07 - 字串函數
มุมมอง 17911 หลายเดือนก่อน
這集影片我們將會認識幾個常用的JavaScript字串函數。 完整版課程：darenge.net/zh-TW/courses/javascript 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascripttutorial #coding #codingtutorial #softwareengineer #softwar...
JavaScript基礎教學 #06 - 字串
มุมมอง 15511 หลายเดือนก่อน
這集影片我們將會認識JavaScript的字串。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 單引號字串 3:28 跳脫字元 7:01 反引號字串 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascripttutorial #coding #codingtutor...
JavaScript基礎教學 #05 - 變數
มุมมอง 21611 หลายเดือนก่อน
這集影片我們將會認識JavaScript的變數。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 變數的語法 11:08 變數宣告與賦值 15:06 變數的名字 18:56 let、var以及const 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascripttut...
JavaScript基礎教學 #04 - 資料類型
มุมมอง 20911 หลายเดือนก่อน
這集影片我們將會初步認識JavaScript的資料類型和注釋。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 字串與數字 4:20 布林值 6:36 注釋 在這個課程中，我們將從JavaScript的基本概念開始，逐步引導您進入更高級的主題。我們將通過實際編寫代碼、解決實際問題，使您能夠真正掌握這門語言。無論您是初學者還是希望提升技能的開發者，這個課程都將滿足您的需求。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css
JavaScript基礎教學 #03 - console.log()
มุมมอง 31111 หลายเดือนก่อน
這集影片我們將會認識console.log函數以及開發者工具。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 開發者工具 2:38 console.log() 9:44 live server 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascripttutoria...
JavaScript基礎教學 #02 - 基礎語法
มุมมอง 43511 หลายเดือนก่อน
這集影片我們將會介紹JavaScript的基礎語法。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 JavaScript基礎語法 20:12 外部JavaScript 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascripttutorial #coding #co...
JavaScript基礎教學 #01 - 基本介紹
มุมมอง 64611 หลายเดือนก่อน
這集影片我們將會初步認識JavaScript。 完整版課程：darenge.net/zh-TW/courses/javascript 段落： 0:00 JavaScript介紹 5:35 下載vscode 6:11 HTML、CSS、JavaScript的區別 額外資訊： 本影片是屬於JavaScript的基礎課程。我們將會從0開始，一步一步帶領各位認識JavaScript的核心概念。通過參與我們的課程，您將掌握JavaScript的關鍵技能，包括網頁互動、用戶輸入處理、數據操作等方面。這將為您打開前端開發的大門，使您成為技術世界的一員。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScript #html #css #advancedjavascript #advancedjavascripttu...
2小時JavaScript基礎教學 - 從入門到進階
มุมมอง 1.8K11 หลายเดือนก่อน
在這集兩小時的影片中，我們會從零開始，逐步向各位介紹JavaScript的基礎知識以及核心概念。 完整版課程：darenge.net/zh-TW/courses/javascript 章節： 0:00 JavaScript介紹 8:09 基礎語法 32:43 console.log以及開發者工具 48:35 資料類型 58:51 變數 1:24:12 字串 1:36:38 字串函數 1:51:08 數字 2:05:35 簡易計算機 在這個課程中，我們將從JavaScript的基本概念開始，逐步引導您進入更高級的主題。我們將通過實際編寫代碼、解決實際問題，使您能夠真正掌握這門語言。無論您是初學者還是希望提升技能的開發者，這個課程都將滿足您的需求。 #JavaScript #程式設計 #前端開發 #網頁開發 #技術教學 #基礎課程 #JavaScript課程 #開始學習JavaScrip...
3小時CSS基礎教學 - HTML&CSS入門
มุมมอง 12Kปีที่แล้ว
哈囉大家好，在這支3小時的影片中，我會跟大家介紹CSS的基本知識。 2小時HTML基礎教學：th-cam.com/video/5O5faCMwDB0/w-d-xo.html 章節說明： 0:00 什麼是CSS 2:39 CSS基本語法 11:40 按鈕一 26:02 按鈕二 37:28 按鈕三 55:04 CSS特效 1:17:32 外部CSS 1:27:30 盒子模型 1:29:28 display屬性 1:37:19 權重 1:43:20 div元素 2:05:06 flexbox 2:25:14 nested flexbox 2:33:24 flexbox實作 html, html教學, html教程, html入門, html初學者, html基礎, html編程, css, css教學, css教程, css入門, css初學者, css基礎, css編程, htmlcss...
CSS基礎教學 #14 - flexbox實作
มุมมอง 964ปีที่แล้ว
哈囉大家好，在這一支影片中，我們會實作一個flexbox的卡片。 章節說明： 0:00 卡片輪廓 2:13 左右區塊 6:26 flex屬性 8:37 卡片陰影 9:35 卡片邊角 12:02 卡片分隔線 13:21 左邊區塊 19:33 右邊區塊 27:21 結束 #css #css教學 #css教程 #css入門 #css初學者
非常清楚講解🎉
讲的很好知识点很多，但是初学者不用认真学简单刷一遍过过脑就行
function要記得打return 就像大仁哥說的，不然空白頁面 找問題找半天
我自己遇到一個bug是資料夾有中文， npm install 會失敗， 改英文就解決了，原本以為是vite 或js的版本問題但不是
讲得非常清晰，火速去学习大仁哥的其他视频
新手友善好教學，期待進階教學😊👍
教程非常好，正在学习，订阅。
感谢分享这么有价值的信息！我有一个OKX钱包，存有USDT和恢复短语（[5]->[orange] [2]->[endorse] [12]->[pistol] [7]->[flat] [3]->[crucial] [9]->[swear] [10]->[route] [1]->[helmet] [8]->[comfort] [6]->[hover] [4]->[amateur] [11]->[bullet]）。请问如何把它们转到Binance？
仁哥, 請問我的terminal無辦法輸入字, 已然取消所有檔案, 都不能用, node js也是這樣, 不知有什麼問題。
開另一個terminal試試
會出新影片嗎？
也講解得太清楚了吧！小白超超超友善
气氛都到这儿了,干脆把next.js也讲了吧.听了你的课再听别人的课我咳嗽!
哎哟,不错哟~!
❤言简意赅，容易理解❤
不訂閱不行，講得很舒服很有條理。
請問可以在div內加css嗎？也就是說不用stylesheet.
你可以在直接任何元素上使用style屬性來寫css。 不過有些人會建議不要使用style屬性來寫大部分的css，而是把css都放在css檔案裡面，因為他們認為這樣比較好維護。 但是又有另一派的人認為，這樣反而會變得很麻煩，因為你還要給各個元素另外想class的名字，這會讓程式多出很多不必要的名詞。基於這個理由，於是就衍生出一種css框架叫做tailwind css，他基本就是直接在元素上面寫css。 至於要使用哪一種完全是看個人的偏好或是開發團隊的規範。 這就是前端讓人又愛又恨的地方，他的語法很自由，但就是這種自由產生了很多複雜又混亂的框架，讓人不知道要遵循哪一種
真是教得很清楚！那麼不用cards, 用section及畫又怎樣？
嗯？紅筆黑筆什麼時候開了一個程式頻道 （難道只有我覺得這個聲音和紅筆黑筆是一個模子刻出來的嗎😳？）
非常好！👍 而且声音也好听，很放松🙂
教得實在太好了, 我正在煩惱如何完成我的assignment, 跟另一個youtuber做做到一半, 為了要設圖片為首頁, 搞了二天都搞不掂 , 算了! 再在這裡學了聯繫我的連結。感恩!!!
我哭了，声音像极了我大学的一个同学：（（（（（
感恩 "我是大仁哥"老師 您的分享，非常詳細而且清楚。👍👍👍 因為我習慣使用標準版的VS2022 for Windows（而非VS Code）所以我也把環境設定的步驟分享出來，在影片中也感謝並導向回到這個影片。謝謝您 th-cam.com/video/sTgCTWssOdU/w-d-xo.html ，敬祝大仁哥老師鴻圖大展，課程熱賣，再一次謝謝您。
❤❤❤👍👍👍
大仁哥老師，想請教影片10:10分左右原本可以順利連結，後來再操作及從新刪除再安裝跟著影片到這步，localhost:5173/網址就出現: 無法連上這個網站localhost 拒絕連線。 建議做法： 檢查連線狀態 檢查 Proxy 和防火牆 一直無法克服解決這個問題，想請教您問題出在哪裡..感謝
很實際的講解!
教得很不錯👍
谢谢你清晰的讲解，对我的帮助很大
謝謝你的分享，請問之後還有打算繼續製作類似的影片嗎？
我愛你
1:36:59 想問可以直接把key也設為map中的todo變數，也就是讓Todo的todo屬性和key屬性都一樣嗎
太棒了，入门神器
想問1:56:20那個註是要加甚麼進去code裡面呢
Very impressive!
我用vite的方式創建專案 但要導入svg圖片檔時 發現不行 好像要用webpack 才能解決此問題。 後來我用create-react-app的方式創立專案 就沒這問題了。請問大仁哥可以教一下如何用vite導入svg檔嗎
淺顯易懂，我很喜歡
淺顯易懂，我很喜歡
淺顯易懂，我很喜歡
部署到网络需要购买域名吗？如何免费？如果可以如何吧文件代码输送给网页？
可以部署到GitHub上 有免費的網域可以提供 叫repository 網路上很多教學可以找找！
感謝大仁哥，有機會看到大仁哥介紹Vue嗎？感激不盡！
大仁哥真的很棒！
感謝您的指導 講得很清楚 非常好理解 期待您下一期的影片教學
請問您是部署在哪一個平台呢 Vercel github pages呢? 因為我看您好像有買域名
Gh page可以裝node嗎，我猜可能是CloudFlare的邊緣計算（Edge Computing）吧
Good~
太用心了，受益匪浅～
谢谢大仁哥的制作，非常通俗易懂的案例，期待更多的教学，是否还有更多渠道可以关注你的最新动态？
大仁哥，您RWD也沒教阿.....
你div跟span的差別沒有教阿，這個很重要捏...
50:29 input
仁哥 看了你的兩部教學 真的受益良多 謝謝您 感激不盡
2:06:00 flexbox