iT邦幫忙

react相關文章
共有 563 則文章
鐵人賽 Modern Web DAY 22

技術 <22 - React 上陣 01> Webpack - Babel - React 聯手

火紅的 React,建立元件銳不可擋,今天來寫一個 Hello World 的 React 元件,然後示範該如何透過 webpack 以及 babel 來 bu...

鐵人賽 Modern Web DAY 21
React - DOM界的彼方 系列 第 21

技術 Day 21: React篇 - TodoApp程式 + 編輯項目

今天的主題是要加入項目的編輯功能,以及更多的CSS樣式。至於重點部份有兩個,第一個是CSS樣式的加入,第二個是如何切換項目的編輯。 這個程式最後的呈現結果,會...

鐵人賽 Modern Web DAY 20
React - DOM界的彼方 系列 第 20

技術 Day 20: React篇: TodoList程式改造 => TodoApp

今天是鐵人賽的第20天,漫長的一個月旅程已經走完了3分之2,2017年只剩10多天就要到來。今天的主題是要來改造一下從前面一路學來的TodoList。為了專注...

鐵人賽 Modern Web DAY 19
React - DOM界的彼方 系列 第 19

技術 Day19: React篇: TodoList程式 + 樣式(Style)

本章的目標是在React元件中的套用樣式(Style),而且可以因狀態改變的作樣式變化,從上一章的程式碼作這些修改都是很簡單的,在React中使用CSS的樣式...

鐵人賽 Modern Web DAY 18
React - DOM界的彼方 系列 第 18

技術 Day 18: React篇: JSX語法指引

JSX語法是開發React的核心語法,前面的例子中都有用到,也有作一些簡單的解說,在進行下一章前,我們還需要更進一步理解這個語法。它是React自創的Reac...

鐵人賽 Modern Web DAY 17
React - DOM界的彼方 系列 第 17

技術 Day 17: React篇: TodoList程式

"本文章附有影片"。這個程式最後的呈現結果,會是在網頁上出現一個文字輸入框,當你輸入文字後按下Enter鍵,就會把文字加到下面的列表中,每...

鐵人賽 Modern Web DAY 2

技術 Day 02:快速學會 React 基礎

本篇目的 希望能帶完全不會 React 的人快速掌握基礎概念,React 雖然博大精深,但核心概念是小而精美的。 React 是什麼? React 是用來建置...

鐵人賽 Modern Web DAY 1

技術 Day 01:使用 Modern Web 技術來打造 Native App

前言 React Native 是由 Facebook 所開發的行動應用程式開發框架,雖然也是使用 JSX、CSS in JS 等 Web 技術來開發,但開發的...

鐵人賽 Modern Web DAY 16
React - DOM界的彼方 系列 第 16

技術 Day 16: React篇: TextInput程式

"本文章附有影片"。這個程式最後的呈現結果,會是在網頁上出現一個文字輸入框,當你輸入文字時,下面的顯示區域會一併跟著顯示,就像下面的動態圖...

鐵人賽 Modern Web DAY 15
React - DOM界的彼方 系列 第 15

技術 Day 15: React篇: HelloWorld解說與JSX語法

"本文章附有影片"。本章的目標是提供上一章的HelloWorld應用的詳盡說明,JSX語法的基礎與元件的三種語法。不過在這之前,我要先說明...

鐵人賽 Modern Web DAY 14

技術 Day 14 / Redux -- Reducer & Action creater & Action

Reducer & Action creater & Action <好讀版> 前言 這章要開始講解 redux 中重要的三個部分,...

鐵人賽 Modern Web DAY 14
React - DOM界的彼方 系列 第 14

技術 Day 14: React篇: 建置React開發環境

"本文章附有影片",在之前的"開發環境&開發工具",我們已經介紹過整個的環境的建置,從這裡開始,我們需要為因應...

鐵人賽 Modern Web DAY 12
React - DOM界的彼方 系列 第 12

技術 Day 12: ES6篇: Side Effects(副作用)與Pure Functions(純粹函式)

本章的目標是對Side Effect(副作用)與(Pure Functions)純粹函式的概念提供一些簡要的說明。Pure Functions(純粹函式)的概...

鐵人賽 Modern Web DAY 10
React - DOM界的彼方 系列 第 10

技術 Day 10: ES6篇 - Class(類別)

本章的目標是提供ES6中的Class(類別)一些廣泛的討論與使用建議。Class(類別)是一個全新的語法,但它的目前整體的內容,如果與Java、C++這些語言...

鐵人賽 Modern Web DAY 9
React - DOM界的彼方 系列 第 9

技術 Day 09: ES6篇: Spread Operator & Rest Operator(展開與其餘運算符)

本章的目標是對展開運算符(Spread Operator)與其餘運算符(Rest Operator)提供一些使用上的說明。這些語法在React、React N...

鐵人賽 Modern Web DAY 8
React - DOM界的彼方 系列 第 8

技術 Day 08: ES6篇 - Destructuring Assignment(解構賦值)

本章的目標是對Destructuring Assignment(解構賦值)提供一些使用上的說明。這些語法在React、React Native、Redux等等...

鐵人賽 Modern Web DAY 6
React - DOM界的彼方 系列 第 6

達標好文 技術 Day 06: ES6篇 - Arrow Function(箭頭函式)

本章的目標是對箭頭函式提供一些較為全面性的介紹,除了基本的語法之外,也補充了很多React搭配使用時的實例,此外也提供撰寫的風格建議。當然,箭頭函式並不光只是...

鐵人賽 Modern Web DAY 4
React - DOM界的彼方 系列 第 4

技術 Day 04: Flow - JavaScript靜態類型檢查工具

本章的目標是提供一些Flow工具的簡介與使用建議。當然Flow也只是個檢查工具,它並不會自動修正程式碼中的錯誤,也不會強制說你沒按照它的警告訊息修正,就不會讓...

鐵人賽 Modern Web DAY 3
零基礎學習Reactjs 30天 系列 第 3

技術 動手做元件

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

鐵人賽 Modern Web DAY 3
React - DOM界的彼方 系列 第 3

達標好文 技術 Day 03: ESLint - Lint工具的後起之秀

本章的目標是提供一些ESLint的簡介與使用建議,當然它只是個檢查工具,並不會自動幫你修正錯誤或警告。在撰寫程式碼的過程中,檢查工具的提示是很重要,它是可以提...

鐵人賽 Modern Web DAY 2
React - DOM界的彼方 系列 第 2

達標好文 技術 Day 02: 開發環境與開發工具

本章節的目標是打造出一個適合用於練習與開發ES6應用程式的環境,為了簡單學習起見,這裡的一些太細部的套件或功能說明,就請再到各套件的說明文件中,或是到我附的一...

鐵人賽 Modern Web DAY 1
零基礎學習Reactjs 30天 系列 第 1

技術 課程規劃

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

鐵人賽 Modern Web DAY 1
React - DOM界的彼方 系列 第 1

達標好文 技術 Day 01: 介紹

本文章同步放在Github的這個網址上。 大家好!我是Eddy。今天是鐵人賽的第一天,我個人是第一次參加,也沒在討論區中回答過什麼問題,可能按照前輩們所說...