iT邦幫忙

react相關文章
共有 560 則文章
鐵人賽 Modern Web DAY 4

技術 Day4. React的基本用法 (三)

props 當父元件想要傳參數給子元件,子元件想要從父元件那邊得到資料時,我們就會用到props這個東西了~ 用法十分簡單,首先,我們新增一個檔案src...

鐵人賽 Modern Web DAY 4

技術 【Day 4】JSX 語法 && Virtual DOM

第四天將接著昨日的內容繼續! 第一次接觸React的朋友們可能心裡會os: "X! 這到底是甚麼語法,又像JS但又有HTML包在裡面。"別...

鐵人賽 Modern Web DAY 3

技術 【Day 3】CRA專案架構

昨天介紹了 React 的特色與元件化開發的特色,也使用 create-react-app 建構了我們的第一個 React 程式專案,今天將延續昨日 CRA 建...

鐵人賽 Modern Web DAY 3

技術 Day3. React的基本用法 (二)

今天最一開始,我們要在我們的主元件中,去加入一個子元件( sub-components )。 Sub-component 首先,我們新增src/comp...

鐵人賽 Modern Web DAY 2

技術 【Day 2】React.js介紹 && 第一個 React 程式

這是 React 從 0 到 1 系列的第二篇,今天廢話不多說,直接進入正題。 今天將簡單介紹 React.js 的基礎概念,最後建立我們第一個 React 的...

鐵人賽 Modern Web DAY 2

技術 Day2. React的基本用法 (一)

因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理...

徵才 [百萬年薪!] Sr. Frontend Developer

Responsibilities: Quick prototyping web content including working with DESIGN T...

鐵人賽 自我挑戰組 DAY 29
Some thing with Reason 系列 第 29

技術 ReasonReact- Lifecycle

LifeCycle ReasonReact 也有類似 ReactJS 的生命週期 didMount: self => unit willRecei...

鐵人賽 自我挑戰組 DAY 26
Some thing with Reason 系列 第 26

技術 ReasonReact- Render todo items

Rendering items 希望有一個區塊 Component 來顯示輸入的 items type item = { title: string,...

鐵人賽 自我挑戰組 DAY 25
Some thing with Reason 系列 第 25

技術 ReasonReact-題目未定

Demo type item = { title: string, completed: bool }; type state = {items: l...

鐵人賽 自我挑戰組 DAY 24
Some thing with Reason 系列 第 24

技術 ReasonReact-PartIII

Step 2: Rendering items The TodoItem component We're going to want to have a com...

鐵人賽 Modern Web DAY 24

技術 Day24 - 記憶方塊篇:畫出主畫面記憶方塊

前情提要 今天我們要來實作記憶方塊的主畫面區塊,在昨天的努力之下,我們已經把區塊都規劃好了,接下來就是要把我們的方塊畫上去。 由於前兩個遊戲 Tic-Tac-T...

鐵人賽 自我挑戰組 DAY 23
Some thing with Reason 系列 第 23

技術 ReasonReact-Action and Reducer

Action 昨天進度到了完成了一個 Reducer 但是我們知道要修改 Reducer 只能夠透過 Action 而在 ReasonReact 如何描述一個...

鐵人賽 Modern Web DAY 23

技術 Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...

鐵人賽 自我挑戰組 DAY 22
Some thing with Reason 系列 第 22

技術 ReasonReact-TodoApp-PartI

調整 initial 的 project 之前我們有用 bsb initial 了一個 project 但是要做一些小小的調整 先新增一個 .re TodoAp...

鐵人賽 Modern Web DAY 22

技術 Day22 - 記憶方塊篇:資料結構規劃

昨天 Day21 我們已經說明了我們所需要的物件以及規則,為了要實現這些功能及規則,我們要來規劃我們需要哪些參數來幫助我們實現。 跟前面一樣,我們使用 crea...

鐵人賽 自我挑戰組 DAY 21
Some thing with Reason 系列 第 21

技術 ReasonReact-RenderAndJSX

Render render 是一個 function 需要回傳的是一個 ReasonReact.reactElement 之類的 會有一個參數 self...

鐵人賽 Modern Web DAY 21

技術 Day21 - 記憶方塊篇:前言及功能構想

前言 終於到了這次鐵人賽最後一個遊戲,經歷一番東挑西選及天人交戰之後,最後選定了這個遊戲,記憶方塊(Memory Blocks)。 這個遊戲也是很經典的童年回憶...

鐵人賽 自我挑戰組 DAY 30

技術 【DAY 30】鐵人練成!完賽心得!很累、很好玩。

「不然我也來參加這次的鐵人賽好了。」   就是上面一句無心的話就開啟我這三十天的鐵人歷程,說實在的,如果不是去年有老師分享過IT邦鐵人賽的文章,我想我應該從來不...

鐵人賽 自我挑戰組 DAY 29

技術 【DAY 29】react-router,很高興認識你!

【正文】   倒數第二篇...... 【前言】   按照以往,react-router的部分也在上一篇結束得差不多了,當然還有許多地方可以探討的,但我們就以比較...

鐵人賽 Modern Web DAY 30
一步一腳印的React旅程 系列 第 30

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(10)-剩下兩個頁面完全不是問題,還有最後的完賽感言

終終終於來到了每天朝思暮想的第三十天了,ㄛ天吶,這一路走來真的很漫長,不過每次回頭看看都會有覺得什麼時候發那麼多篇去了!的感覺XD,在打這段話的時候我覺得還滿適...

鐵人賽 自我挑戰組 DAY 20
Some thing with Reason 系列 第 20

技術 ReasonReact-Component

Component Creation ReasonReact 不需要 class 來建立 Component 提供一個建立的 API 會回傳一個 record...

鐵人賽 Modern Web DAY 20

技術 Day20 - 貪吃蛇篇:虛擬方向鍵及暫停遊戲

前情提要及動機 在 Day11 的功能構想中我們有提到,雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了,但是有一點美中不足的地方,就是透過手機開啟這個遊戲的...

鐵人賽 自我挑戰組 DAY 19
Some thing with Reason 系列 第 19

技術 ReasonReact-Helloworld

Install 這部分和 Reason 一樣 只是提供了一個 react theme $ npm install -g bs-platform $ bs...

鐵人賽 Modern Web DAY 29
一步一腳印的React旅程 系列 第 29

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(9)-把資料做排序吧

Hi!大家好!昨天寫完那篇的時候,心情輕鬆了不少XD,其實我真的很怕做不出來哎!不過還好還是搞定了,雖然完全放棄了排版,哈哈,那接下來剩下的就把資料排序和輸出而...

鐵人賽 自我挑戰組 DAY 28

技術 【DAY 28】用react-loadable與react-router做code splitting吧

【前言】   第28天了....... 【正文】   雖著專案越來越大,我們要撰寫的js檔也越來越多,但最後我們都會在App.js(或是Root.js)去imp...

鐵人賽 Modern Web DAY 19

技術 Day19 - 貪吃蛇篇:重新開始按鈕

昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。 首先,我們需要先來製作一個按鈕,這個按鈕我想要直接蓋在遊戲地圖的...

鐵人賽 Modern Web DAY 18

技術 Day18 - 貪吃蛇篇:吃到自己會死

前情提要 昨天 Day17 我們已經讓食物可以隨機產生,食物還會炫砲的發光,蛇也可以順利吃到食物,而且吃到之後身體會變長,速度會變快。 但是讓蛇這樣一直吃下去,...

鐵人賽 自我挑戰組 DAY 27

技術 【DAY 27】React-router,其它很有用的組件(下)

【前言】   終於要來到倒數幾篇了!!!有沒有對於這些更熟悉了呢?希望有幫到大家! 【正文】   今天來介紹<Redirect>吧! <Red...

鐵人賽 Modern Web DAY 28
一步一腳印的React旅程 系列 第 28

技術 [筆記][React]來做個作品吧!待辦事項「todolist」篇(8)-人生不能重來,但資料可以修改

嗨囉!大家好!最後三天最難熬!昨天已經能夠展開我們的編輯區了,今天來把編輯資料的部分做完吧! 那一開始先來做Redux的部分吧!要處理的事情有以下幾點,讓我們...