學習React.js - 如何開發一個組件(Component)

JayLinXR

發佈於Coding = Dynamic

更新於 2024/05/17發佈於 2023/05/18閱讀時間約 1 分鐘

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

學習重點

Prop
State
Reusable - 重複使用組建件
One Data Flow - 單一流程傳送你要的資料
Composition - 一個function內，包含另一個funciton
Declarative - 組建就描述你所創建立的

影片介紹

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXRCoding = Dynamic

留言

留言分享你的想法！

JayLinXR

13會員

33內容數

設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr

JayLinXR的其他內容

2024/05/22

使用 React Marquee 創建流暢的跑馬燈效果

React Marquee是一個輕量級的React library，可以在網頁上創建流暢的跑馬燈效果。本文提供快速教學和講解，教大家如何安裝、使用React跑馬燈library官方網站。另外，也分享了額外的資源和相關教學文章。希望透過以上講解和影片教學，能幫助大家瞭解這個library。

2024/05/22

使用 React Marquee 創建流暢的跑馬燈效果

2024/05/03

Vite前端工具加入Tailwindcss教學

本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。

2024/05/03

Vite前端工具加入Tailwindcss教學

2024/04/27

使用Vite工具創建開發初始檔案的教學

這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。

2024/04/27

使用Vite工具創建開發初始檔案的教學

看更多

你可能也想看

方格子 vocus 官方沙龍

沙龍介面新登場！自訂你的創作空間，讓好內容被看見

沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。改版完成後可以在社群媒體分享新版面，並標記 @vocus.official⁠ ♥️ ⁠

#vocus#方格子#方格子沙龍

2025/06/12

方格子 vocus 官方沙龍

沙龍介面新登場！自訂你的創作空間，讓好內容被看見

#vocus#方格子#方格子沙龍

2025/06/12

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界所得稅線上申報

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

Hogan｜軟體工程師沙龍

React Props – React 白話文運動 09

React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解，前幾篇也學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。

#軟體#程式語言#JavaScript

2023/12/30

Hogan｜軟體工程師沙龍

React Props – React 白話文運動 09

#軟體#程式語言#JavaScript

2023/12/30

Hogan｜軟體工程師沙龍

React JSX – React 白話文運動 06

React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發，使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法，因此接下來會介紹，JSX 是什麼？JSX 語法以及使用 JSX 建構 React 元件。

#開發#文章#白話文

2023/12/07

Hogan｜軟體工程師沙龍

React JSX – React 白話文運動 06

#開發#文章#白話文

2023/12/07

Hogan｜軟體工程師沙龍

React 運作原理 – React 白話文運動 05

React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過，React 為 Angular 和 Vue 等框架提供了另一種解決方式，使我們可以與它一起完成覆雜的前端頁面功能。

#開發#工程師#程式

2023/12/05

Hogan｜軟體工程師沙龍

React 運作原理 – React 白話文運動 05

#開發#工程師#程式

2023/12/05

JayLinXR

學習React.js - 如何開發一個組件(Component)

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

#學習#程式#軟體工程師

2023/05/18

JayLinXR

學習React.js - 如何開發一個組件(Component)

React.js 是一個熱門的library，JayLin今天講解React核心概念以及利用一個小案例概括理論部分

#學習#程式#軟體工程師

2023/05/18

JayLinXR

JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁

當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel

#網站#伺服器#教學

2023/05/18

JayLinXR

JayLin教你如何部署你的網站Next.js到Vercel，讓別人看的你的網頁

當你做好你的網站後，教大家把你的網站部署到雲端伺服器Vercel

#網站#伺服器#教學

2023/05/18

JayLinXR

學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)

這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework

#學習#教學#程式

2023/05/18

JayLinXR

學習image 圖片元件在Next.js並做一個簡單的作品集(Portfolio)

這集介紹Next Image Module模組和CSS3如何定位在Next.js Framework

#學習#教學#程式

2023/05/18

JayLinXR

深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳

Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js

#教學#文章#nextjs

2023/05/18

JayLinXR

深入了解_App檔案上設置在Next.js功能並且做一個Footer 頁腳

Next.js 架構是怎麼構成的呢?這次教學視頻和文章來帶大家了解_app.js or layout.js

#教學#文章#nextjs

2023/05/18

JayLinXR

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程

介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3

#學習#NFT#區塊鏈

2023/05/15

JayLinXR

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程

介紹編譯器使用以及HTML5 | CSS 初學者學習HTML5和CSS3不知道從哪裡開始，這次Jay帶你來做個NFT卡片，一次完整教學案例來理解HTML5和CSS3

#學習#NFT#區塊鏈

2023/05/15

Vic Lin的沙龍

Getting Started with React Hooks

Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打

#Reactjs#ReactHooks

2021/09/28

Vic Lin的沙龍

Getting Started with React Hooks

Create React App 提供了快速建立React App環境的方法: 1. 安裝node.js 2. 建立React project: $ npx create-react-app my-app 3. 啟動app $ cd my-app $ npm start npm start之後即打

#Reactjs#ReactHooks

2021/09/28

Vic Lin的沙龍

用最簡單的範例，10分鐘入門React!

本文章目的是希望可以用最簡單的範例，來讓大家了解React到底是什麼東西，有什麼好處，並且套用bootstrap的navbar，加上自己客製的css，來達到component重用的目的! 用React來開發網頁，必須把目標拆解成一個個component，最後組合起來就成為一個網站! 假如我們目標是要

2021/02/02

2021/02/02

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News