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

更新於 發佈於 閱讀時間約 5 分鐘

本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的!

用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站!

假如我們目標是要開發一個有navbar的網頁,可以把它想像成是這樣組成的:

raw-image

橘色的是Main元件,裡面包含了綠色的Navbar這個元件!


以下直接透過範例來了解,並開發一個可重用的navbar component。

以下是我的環境配置:

raw-image
raw-image

專案結構:

raw-image

public/index.html長這樣:

raw-image

這邊直接用CDN的方式import bootstrap,然後加上自己定義的navbar.css。
放在components下,未來如果有更多元件,可以有自己的css。


app.jsx:

raw-image

app.jsx為程式進入點,這邊可以想像成,我的網頁有一個最大的Main元件,裡面包含很多子元件,所以這邊直接把Main元件import進來,指到root div。

Main.jsx:

raw-image

而Main元件裡面又可能有navbar, header, content, footer...等等,這邊的範例為了簡單化,只做了一個Navbar元件。

其實就是import Navbar,直接在render()中回傳Navbar,然後設定bgTheme 這個props,傳入Navbar 元件中。

props可以用來傳參數用,假如這個navbar會在很多地方用到,然後在不同地方想要有不同的背景顏色,就可以用這種方式!

最後的export Main,主要是想要讓app.jsx可以import的到Main。

Navbar.jsx:

raw-image

在Navbar裡面就是直接套bootstrap,要注意的是jsx中要用className。
className={`navbar navbar-default ${this.props.bgTheme}`}
這個東西意思其實就是除了boostrap本身有的兩個class: navbar, navbar-default外,多設定一個傳進來的參數bgTheme。


public/css/components/navbar.css:

raw-image

從原始碼來看應該不難理解,由於index.html中head有import bootstrap lib,還有自己定義的navbar.css,最後jsx都被build在bundle.js裡:

raw-image

最後來看看網頁的結果:

raw-image

值得一提的是,如果我把Main.jsx中傳入的navbar背景主題換掉,改成navbar-theme-red,navbar背景就會變紅色。

raw-image
raw-image

結論:

使用React開發網頁必須把網頁拆解成元件來思考,這個範例其實就是Main裡面有Navbar,未來如果有Footer元件,相信看到這邊,大家都知道怎麼加了吧!

假如一個元件被開發出來後,在很多頁面都會用到,而且只差在style可能不太一樣,就很適合用props這個特性,把style傳入元件中,例如本範例的navbar,達到component重用的目的!

當然,React還有很多東西需要更深入學習,例如事件處理、元件生命週期、資料串接等等東西,小弟也是剛入門順便做個筆記,若有錯誤還請不吝給小弟指教,希望這篇文章可以幫助到大家,未來若有機會再補充更進階的應用,謝謝!


Source code:



本筆記參考:
1. https://ithelp.ithome.com.tw/articles/10205439
2. https://stackoverflow.com/questions/32230635/passing-in-class-names-to-react-components

留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發,使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹,JSX 是什麼?JSX 語法以及使用 JSX 建構 React 元件。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發,使開發人員能夠創建可重覆使用的元件來完成前端頁面。JSX 也是目前我們比較常看到的 React 寫法 ,因此接下來會介紹,JSX 是什麼?JSX 語法以及使用 JSX 建構 React 元件。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
Thumbnail
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之後即打
Thumbnail
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之後即打
Thumbnail
接續上一篇,navbar元件其實寫的不是很好,還不能說是可真正reuse,我們把程式改成這樣,透過props傳入navbar的items,定義好navbar title, li的href/name/active等等,就可以達到navbar元件無須改code就能重用的目的! Navbar 元件中用m
Thumbnail
接續上一篇,navbar元件其實寫的不是很好,還不能說是可真正reuse,我們把程式改成這樣,透過props傳入navbar的items,定義好navbar title, li的href/name/active等等,就可以達到navbar元件無須改code就能重用的目的! Navbar 元件中用m
Thumbnail
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
Thumbnail
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
Thumbnail
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
Thumbnail
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News