shiningjason / react-quick-tutorial Goto Github PK
View Code? Open in Web Editor NEW:rocket: 讓你用最短時間,充分體會 React 的脈絡思維
:rocket: 讓你用最短時間,充分體會 React 的脈絡思維
大大你好
大大你好
Level 9
3. 完成刪除待辦項目功能
<button onClick={() => onDelete && onDelete()}>x
裡面&&的意思 我想了很久都不是很清楚
大大可以提點一下嗎?
24 小時,React 快速入門,Level 10
InputField.js
我判斷是因為寫了{...this.props},取到上層傳給input沒有的屬性,而造成問題
請問除了自己重新取用props自己塞,還有沒有簡便的方法
<input
{...this.props}
type="text"
value={this.state.value}
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
/>
以下為瀏覽器發生的錯誤
react.js:20209 Warning: Unknown prop `onSubmitEditing` on <input> tag.
Remove this prop from the element.
For details, see https://fb.me/react-unknown-prop
in input (created by InputField)
in InputField (created by TodoApp)
in div (created by TodoApp)
in TodoApp
外部js檔案匯入
通常比較常看到的是
import與export default class名+ import xxx from './class'
window.App = {} 這種方式的import方法比較少見
這是ES6獨有的語法嗎?
不知道哪裡可以找到相關的資料學習window這類匯入方式~謝謝
意即當你在編輯器中儲存剛編輯完的程式,瀏覽器會立即重新整理,並顯示最新的結果
我在 Ubuntu14 + Version 71.0.3578.98 (Official Build) (64-bit)
只有第一次 live-server 有偵測到變更,瀏覽器也更新了。
但後面繼續更改內容,live-server 也沒偵測到(沒看到印 log),瀏覽器也就沒有重新更新。
Level 16. 完成 Controller View:讓元件同步資料狀態
https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-16_flux-controller-view
錯誤訊息
Uncaught ReferenceError: AppDispatcher is not defined(…)
解構賦值rest參數要使用出錯
版主你好,
想請問個問題
這段程式碼是會在哪個時候觸發呢,不太了解這是在哪邊啟動註冊的呢,是在TodoApp將TodoStore從window.App拿出來的時候嗎?
dispatchToken: AppDispatcher.register((action) => {
switch (action.type) {
case ActionTypes.LOAD_TODOS_SUCCESS:
_todos = action.todos;
_emitter.emit(CHANGE_EVENT); // 5. 當資料改變,必須觸發事件
break;
case ActionTypes.CREATE_TODO:
_todos = _createTodo(_todos, action.title);
_emitter.emit(CHANGE_EVENT);
break;
case ActionTypes.UPDATE_TODO: /* 略 */
case ActionTypes.TOGGLE_TODO: /* 略 */
case ActionTypes.DELETE_TODO: /* 略 */
}
})
https://github.com/shiningjason1989/react-quick-tutorial/blob/master/level-10_forms/TodoApp.js
請問如何得知 updateTodosBy(updateFn) 內 不定數量的參數, ...args
是由哪一段程式給值的?
麻煩你'~謝謝
updateTodosBy(updateFn) {
return (...args) => {
this.setState({
todos: updateFn(this.state.todos, ...args)
});
};
}
待辦事項刪到0時,不能再新增,這是因為todo item元件全部移除的關係嗎? 該如何解呢? 感謝您的協助
TodoApp.js
<InputField placeholder="新增待辦清單" />
InputField.js (git上的)
render() {
return (
<input {...this.props} type="text" />
);
}
InputField.js (參巧TodoItem的)
render() {
const {
placeholder
} = this.props;
return <input type="text" placeholder={placeholder} />;
}
InputField 的 placeholder 傳值方法是簡寫嗎?可以省略html attribute?
借機會先感謝Jason大大建立這份tutorial,讓新手可一關關走下去。
累計看了幾個小時,比較好的閱讀方法是git clone下來,對比每個關之間的變化,再看看筆記的補充
如:input 属性白名单之类的
您好
最近開始學習React
對於文章中的語法有一點疑惑
// 3. 從 window.App 中,取得 TodoApp 元件
const { TodoApp } = window.App;
1.這一句語法有點疑問,const的大括號的意思是什麼呢?
2.還有就是既然是要取得window.App.TodoApp為什麼不是const { TodoApp } = window.App.TodoApp;呢?
查了一些資料,可能下的關鍵字不是很好,沒有找到解答QQ
所以來留言提問,謝謝囉
https://github.com/shiningjason1989/react-quick-tutorial/blob/master/level-10_forms/TodoList.js
onUpdate={(content) => onUpdateTodo && onUpdateTodo(todo.id, content)}
onToggle={(completed) => onToggleTodo && onToggleTodo(todo.id, completed)}
貼心提醒
Level 7. 培養好習慣,設計防呆的 React 元件
https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-07_prop-types-n-default-values
根據官方ReleaseNote,在2017/04/07釋出的v15.5.0版本中
已經移除React.createClass及React.PropTypes
https://github.com/facebook/react/releases/tag/v15.5.0
如果有Console有以下警告訊息
Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
一開始實作有helloworld,只是後面拿掉 id
看會發生什麼事情,就變成空白一直沒有畫面,回到一開始也是
Luxame/react@f67e813
拍謝因為快六月底了
我看第三章的內容未更新(title也未調整)
所以來提醒大大一下 :)
大大加油!!
你好~目前剛學習reactjs,對於debug不是那麼熟練,
目前到此章節有卡關,查了原因似乎是因為react有更新調整,
將防呆機制另外搬遷為個別package做使用的樣子,
但我參考官網手冊在有用到資料驗證的TodoItem.js & TodoHeader.js開頭加入
import PropTypes from 'prop-types'; // ES6
依然在live-server上顯示失敗,
請問可否請教相關建議或解決方式?
Hi shiningjason,
感謝你的教學, 很清楚明瞭,
我在學習過程中發現一點問題, 回報一下希望能幫助到你更版
“Level 7. 培養好習慣,設計防呆的 React 元件”章節有用到React.PropTypes.string
但React v15.5後已經不支援React.PropTypes, 進行到這段會報錯
(教學中提供的react cdn連結 https://cdnjs.com/libraries/react 目前已經是v16)
// 1. 使用 propTypes 定義參數的型別
TodoHeader.propTypes = {
title: React.PropTypes.string, //Error: Cannot read property 'string' of undefined
username: React.PropTypes.string,
todoCount: React.PropTypes.number
};
我上網爬了一下, 目前須改用prop-types
https://reactjs.org/docs/typechecking-with-proptypes.html
index.html: include prop-types
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
...
TodoHeader.js: React.PropTypes改成PropTypes
// 1. 使用 propTypes 定義參數的型別
TodoHeader.propTypes = {
title: PropTypes.string,
username: PropTypes.string,
todoCount: PropTypes.number
};```
為何範例中的 ajax 會放在 componentDidMount() 這個時間點呢 ?
按照這個流程下來,應該在 render() 之前就去將 todos.json 放進來會比較好吧 ? 所以是放在 componentWillMount()
還是說,大部分由於通用性的關係,會比較常放在 componentDidMount() 這個時間點呢 ?
寫法如下, 請問為何沒有作用???
TodoList.defaultProps = {
todos : [
{
id: 0,
title: 'Item 111',
completed: false
}
]
};
在Level 8的4. [ES6] 箭頭函數 (arrow function)區段
// Error: ES6 的匿名函數不會自動綁定 this,因此取不到 this.text
setInterval(function() {
console.log(this.text);
}, 1000);
應為ES5, 不是ES6
TodoHeader.js
裡的
<h1>{title}</h1>
由TodoApp.js
的
<TodoHeader
title="我的待辦清單"
username="Jason"
todoCount={99}
/>
傳入去,
那如果再由出一層的index.html傳入去,是不是要改為
TodoApp.js
<TodoHeader
title="{toDoHeaderTitle}"
username="Jason"
todoCount={99}
/>
index.html
const props = {
title: '我的待辦清單'
};
ReactDOM.render(
<TodoApp {...props} />,
document.getElementById('app')
);
有更好的做法嗎?
id: todos[todos.length - 1].id + 1, // 當length為0的時候就會出錯
id: todos.length === 0? 0:todos[todos.length - 1].id + 1,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.