iT邦幫忙

鐵人檔案

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

零基礎學習Reactjs 30天 系列

紀錄帶領一名高職新生從無到有設置環境,安裝必要套件,最後完成一個公開展示作品的過程。技術以前端Reactjs元件化的實作為主,期間補充HTML、CSS、Javascript,希望往後這個模式能多加推廣,增加大眾對學海無涯的摩登前端的了解。

參賽天數 7 天 | 共 8 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 1

課程規劃

話說前頭 這系列比較像是我的教學記錄。剛好有這個機會,能夠指導一位完全對程式陌生的少年,一對一的做教學。 透過前端網頁設計最前端的Reactjs來進入跟資訊停滯...

2016-12-01 ‧ 由 陳柏任 分享
DAY 2

「元件」

「元件」 我用了大家熟知的積木做比喻。 點開一個網站的檢視原始碼,或者打開那個「開發人員工具」,就會發現基本上是由三種東西構成這樣的網站: HTML CSS...

2016-12-02 ‧ 由 陳柏任 分享
DAY 3

動手做元件

動手做勝過千言萬語 因為用的是Windows10的筆電,已經先請他安裝完以下項目,方便後續開發與操作: Git For Windows Nodejs...

2016-12-03 ‧ 由 陳柏任 分享
DAY 4

元件是如何組裝的?

引入 import是引入的意思,正如同 import React, { Component } from 'react'; //是把整組做元件的工具拿進來 i...

2016-12-04 ‧ 由 陳柏任 分享
DAY 5

Props

元件中的小道具或者支撐物 我不曉得怎麼翻譯會比較精確,但總之就是一種用來套資料進去一種參數或者屬性。 這邊要來修改App.js和MyComponent.js,來...

2016-12-05 ‧ 由 陳柏任 分享
DAY 6

利用元件製作一個頁面

頁面實作:登入畫面 本節實作,將以一個登入表單作為範例 清除App.js不必要的部份 import React, { Component } from 'rea...

2016-12-06 ‧ 由 陳柏任 分享
DAY 7

安裝套件

(施工中) 首先來利用npm套件管理來安裝Material-UI以及他們用來處理手機觸碰點擊事件的react-tap-event-plugin,請把終端機(如c...

2016-12-07 ‧ 由 陳柏任 分享
DAY 7

瓶頸

不小心斷法了。這也是命吧XD 不過這幾天遇到很明顯的瓶頸,冒出來的一些專業名詞已經讓少年仔聽不懂了,我要想辦法轉化一下。 或者該用比較有趣的方式上課,或者出些...

2016-12-09 ‧ 由 陳柏任 分享