shiningjason/react-quick-tutorial

:rocket: 讓你用最短時間，充分體會 React 的脈絡思維

react-quick-tutorial's Issues

todo item 刪完就不能再新增了

待辦事項刪到0時，不能再新增，這是因為todo item元件全部移除的關係嗎? 該如何解呢? 感謝您的協助

proptypes validation failded

你好～目前剛學習reactjs,對於debug不是那麼熟練，
目前到此章節有卡關，查了原因似乎是因為react有更新調整，
將防呆機制另外搬遷為個別package做使用的樣子，
但我參考官網手冊在有用到資料驗證的TodoItem.js & TodoHeader.js開頭加入
import PropTypes from 'prop-types'; // ES6
依然在live-server上顯示失敗，
請問可否請教相關建議或解決方式?

大大，您富姦了嗎

拍謝因為快六月底了
我看第三章的內容未更新(title也未調整)
所以來提醒大大一下 :)
大大加油!!

有關於Level 5. 組合多個 React 元件

嗨，感謝您提供如此簡顯易懂的教學
但這裡有小小問題
我按照demo上code撰寫後，發現他出現空白
包含我把所有code貼在自己專案都是空白
請問一下這有可能是什麼問題呢？謝謝
(初學者:'( 還不是很能知道問題出在哪裡><)
附上錯誤截圖

外部js import的方法

外部js檔案匯入
通常比較常看到的是
import與export default class名+ import xxx from './class'
window.App = {} 這種方式的import方法比較少見
這是ES6獨有的語法嗎？
不知道哪裡可以找到相關的資料學習window這類匯入方式～謝謝

Level 6: 該一層一層傳下去嗎？

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')
    );

有更好的做法嗎？

React v15.5.4 propTypes問題

貼心提醒

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.

請額外引入檔案
https://github.com/reactjs/prop-types

Level 6: InputField 的 placeholder 傳值方法是簡寫嗎？

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下來，對比每個關之間的變化，再看看筆記的補充

Unknown prop `onSubmitEditing` on <input> tag. Remove this prop from the element.

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

Level 4. const { TodoApp } = window.App;語法

您好
最近開始學習React
對於文章中的語法有一點疑惑

// 3. 從 window.App 中，取得 TodoApp 元件
const { TodoApp } = window.App;

1.這一句語法有點疑問，const的大括號的意思是什麼呢?

2.還有就是既然是要取得window.App.TodoApp為什麼不是const { TodoApp } = window.App.TodoApp;呢?

查了一些資料，可能下的關鍵字不是很好，沒有找到解答QQ
所以來留言提問，謝謝囉

level 15的register

版主你好,

想請問個問題

這段程式碼是會在哪個時候觸發呢，不太了解這是在哪邊啟動註冊的呢，是在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: /* 略 */
  }
})

Level 8筆誤

在Level 8的4. [ES6] 箭頭函數 (arrow function)區段

// Error: ES6 的匿名函數不會自動綁定 this，因此取不到 this.text
  setInterval(function() {
    console.log(this.text);
  }, 1000);

應為ES5, 不是ES6

React.PropTypes.string deprecated

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 的進入時機點

為何範例中的 ajax 會放在 componentDidMount() 這個時間點呢 ?
按照這個流程下來，應該在 render() 之前就去將 todos.json 放進來會比較好吧 ? 所以是放在 componentWillMount()
還是說，大部分由於通用性的關係，會比較常放在 componentDidMount() 這個時間點呢 ?

rest

解構賦值rest參數要使用出錯

请问 有没有什么库能过滤掉这些不被支持的属性？

如：input 属性白名单之类的

Level 2. 步驟缺少

4. 安裝 live-server
   執行npm install -g live-server前需要先開啟node.js (nvm use node版本號)

level3 主線任務實作沒有畫面

一開始實作有helloworld，只是後面拿掉 id 看會發生什麼事情，就變成空白一直沒有畫面，回到一開始也是
Luxame/react@f67e813

請問何時給值2變數content && completed ?

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 9 &&符號

大大你好
大大你好

Level 9
3. 完成刪除待辦項目功能
<button onClick={() => onDelete && onDelete()}>x
裡面&&的意思 我想了很久都不是很清楚
大大可以提點一下嗎?

TodoList.defaultProps 設定問題

寫法如下, 請問為何沒有作用???

TodoList.defaultProps = {
  todos :  [
    {
      id: 0,
      title: 'Item 111',
      completed: false
    }
  ]
};

請問 updateFn 函數參數 ...args, 是如何給值?

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)
      });
    };
  }

Level2 -Liveserver 問題

意即當你在編輯器中儲存剛編輯完的程式，瀏覽器會立即重新整理，並顯示最新的結果

我在 Ubuntu14 + Version 71.0.3578.98 (Official Build) (64-bit)
只有第一次 live-server 有偵測到變更，瀏覽器也更新了。
但後面繼續更改內容，live-server 也沒偵測到（沒看到印 log），瀏覽器也就沒有重新更新。

level-15 開始 的TodoStore.js 有蟲

id: todos[todos.length - 1].id + 1, // 當length為0的時候就會出錯

id: todos.length === 0? 0:todos[todos.length - 1].id + 1,

請問 AppDispatcher 出了甚麼錯?

Level 16. 完成 Controller View：讓元件同步資料狀態
https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-16_flux-controller-view

錯誤訊息
Uncaught ReferenceError: AppDispatcher is not defined(…)