FE 讀書會（4-3）：React Lifecycle

2018-05-11

React Component Lifecycle Component 的 lifecycle 如下：建立 component 更新 component 刪除 component 建立 Component 建立 Component 的執行順序如下： constructor(); componentWillMount(); render(); componentDidMount(); 更新 Component 更新 Component 的執行順序如下： componentWillUpdate(); render(); componentDidUpdate(); 刪除 Component componentWillUnmount(); 讓我們看看 code <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>My

FE 讀書會（4-4）：React JSX and Babel

2018-05-11

front-end

JSX 在 JavaScript 中類似 HTML 標籤的語法 Why JSX? 可以直觀且方便的產生 React Element 如何使用 JSX ? 前面實作的範例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>My Component</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script> window.addEventListener("load", ()=>{ //1. 建立自訂的React組件

FE 讀書會（4-5）：React Dynamic Binding and CSS style by JSX

2018-05-11

front-end

Dynamic Binding by JSX 先回想一下在 React Component 中附加屬性的方法：方法一: let myHead=React.createElement(MyHead, {level:3}); 方法二: let myHead=<MyHead level="3"/>; Dynamic Binding 讓我們直接來看 code 吧 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>My Component</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <style type="text/css"> .head{font-size: 24px;font-weight: bold;} </style> <script type="text/babel">

FE 讀書會（4-6）：React Event Handling

2018-05-11

front-end

React Event Handling React Element 中註冊事件的方法 class MyHead extends React.Component { render(){ return React.createElement("H1", { // 在屬性中註冊事件處理器變為Camel命名: onclick => onClick, onClick:this.clickHandler.bind(this) }, "Hello World"); } clickHandler(e){ //事件處理器的第一個參數, 取得 Event

FE 讀書會（4-7）：React Form Summit

2018-05-11

front-end

React Form Summit 讓我們直接看看完整的程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>My Component</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <style type="text/css"> .head-3 {font-size: 1.2em;font-weight: bold;} </style> <script type="text/babel"> //設計組件類別 class MyForm extends React.Component{ constructor(props){ super(props); this.state={ name:"", gender:"male", story:"" }; } render(){ return <form onSubmit={this.submitHandler.bind(this)}> Name <input type="text" value={this.state.name} onChange={this.changeTextHandler.bind(this)}/>