iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

Zero to hero with React.js 系列

吃素的工程師,因為我很菜。我甚麼都不會,只會報名鐵人賽。希望這30天可以讓自己跌入 React 的懷抱,探究它的魅力,記錄學習的一步一腳印。30天後我要成為 React HERO!!!!

參賽天數 30 天 | 共 30 篇文章 | 46 人訂閱 訂閱系列文 RSS系列文
DAY 1

達標好文 【Day1 React】What the hell is React?

鼓起勇氣挑一個沒有接觸過的 ReactJS 來挑戰 希望在這30天內可以盡最大所能挖掘 React 的奧秘! 作品懶人包 由於我喜歡嘗試各種新的可能 因此在這3...

2017-12-07 ‧ 由 anniesnoopymd 分享
DAY 2

【Day2 React】React 環境設定 採用 Webpack 和 Babel

一個 React 的專案中我們需要什麼樣的函式庫? React.js core library React DOM library 這次不僅學習 React...

2017-12-08 ‧ 由 anniesnoopymd 分享
DAY 3

【Day3 React】認識 JSX Syntax

理解 JSX 在撰寫 React Component 的時候,使用 JSX 可以提高程式撰寫的效率。JSX(JavaScript Extention)並不是一種...

2017-12-09 ‧ 由 anniesnoopymd 分享
DAY 4

【Day4 React】終於跟 World 說 Hello World!

簡易起手式,我使用 CDN 引入 React 來理解 React 的運作原理 我們需要的 CDN 有三個: 最基本的 React CDN React 在 0....

2017-12-10 ‧ 由 anniesnoopymd 分享
DAY 5

【Day5 React】render 一個會動的 React 日曆

日曆 DEMO 時間誠可貴,參加鐵人賽方得時間更加珍貴 我們可以直接把要呈現在 DOM 的內容直接寫在 ReactDOM.render() ,不過通常我們...

2017-12-11 ‧ 由 anniesnoopymd 分享
DAY 6

【Day6 React】學習都是從觀摩他人的 code 開始

Codepen 是寶庫!! 我是一個喜歡把玩顏色、嘗試各種介面風格的人,因此 codepen 是我經常使用的工具,更棒的是,可以在上面看到各種高手,用著千奇...

2017-12-12 ‧ 由 anniesnoopymd 分享
DAY 7

【Day7 React】從拆解電子名片學習 React Components #Part1

把整張名片作為一個 component 每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component...

2017-12-13 ‧ 由 anniesnoopymd 分享
DAY 8

【Day8 React】從拆解電子名片學習 React Components #Part2

今天講解把如何模組化程式碼 前提: 我們目前所有的程式碼都放在 index.html 裡面,分別嵌入了 React, React-dom, babel 的 CD...

2017-12-14 ‧ 由 anniesnoopymd 分享
DAY 9

【Day9 React】從拆解電子名片學習 React Props #Part3

皮卡丘就這麼跑進我的文章裡。。。 目前我的專案長這樣~ 我一樣用電子名片這個專案來學習 React props 的運作原理,今天也會將我預先儲存在 json...

2017-12-15 ‧ 由 anniesnoopymd 分享
DAY 10

【Day 10 React】透過番茄計時器實作理解 React State and Lifecycle

之前我修了一堂 University of California, San Diego 開的線上課程 Learning How to Learn: Powerf...

2017-12-16 ‧ 由 anniesnoopymd 分享