随笔分类 - React
摘要：React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo s
阅读全文
posted @ 2016-03-02 02:06
Zhentiw
摘要：We will create an anction creator to manage the dispatch actions, to keep code maintainable and self-documenting by extracting action creators from th
阅读全文
posted @ 2016-02-12 03:32
Zhentiw
摘要：Code to be refactored: class FilterLink extends Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe((
阅读全文
posted @ 2016-02-12 03:15
Zhentiw
摘要：Code to be refacted: const AddTodo = (props, { store }) => { let input; return ( <div> <input ref={node => { input = node; }} /> <button onClick={() =
阅读全文
posted @ 2016-02-12 02:43
Zhentiw
摘要：Learn how to use the that comes with React Redux instead of the hand-rolled implementation from the previous lesson. Code to be refactored: class Visi
阅读全文
posted @ 2016-02-09 03:17
Zhentiw
摘要：Previously, we wrote the Provider component by ourself: class Provider extends Component { getChildContext() { return { store: this.props.store }; } r
阅读全文
posted @ 2016-02-08 03:18
Zhentiw
摘要：We have to write a lot of boiler plate code to pass this chore down as a prop. But there is another way, using the advanced React feature called conte
阅读全文
posted @ 2016-02-05 22:27
Zhentiw
摘要：n the previous lessons, we used this tool to up level variable to refer to the Redux chore. The components that access this chore, such as the contain
阅读全文
posted @ 2016-02-05 19:17
Zhentiw
摘要：Clean TodoApp Component, it doesn't need to receive any props from the top level component: const TodoApp = () => ( <div> <AddTodo /> <VisibleTodoList
阅读全文
posted @ 2016-02-04 16:14
Zhentiw
摘要：Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> <input ref={node => { input = node; }} /> <button onClick={() =
阅读全文
posted @ 2016-02-04 16:00
Zhentiw
摘要：Code to be refacted: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(t
阅读全文
posted @ 2016-02-04 15:39
Zhentiw
摘要：Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components. Code to be refactor
阅读全文
posted @ 2016-01-29 16:56
Zhentiw
摘要：Finally, I just noticed that the to-do app component doesn't actually have to be a class. I can turn it into a function. I prefer to-do that when poss
阅读全文
posted @ 2016-01-27 20:18
Zhentiw
摘要：Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleT
阅读全文
posted @ 2016-01-27 20:10
Zhentiw
摘要：Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleT
阅读全文
posted @ 2016-01-27 19:09
Zhentiw
摘要：The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visi
阅读全文
posted @ 2016-01-27 18:22
Zhentiw
摘要：/** * A reducer for a single todo * @param state * @param action * @returns {*} */const todo = ( state, action ) => { switch ( action.type ) { ...
阅读全文
posted @ 2016-01-15 16:48
Zhentiw
摘要：/** * A reducer for a single todo * @param state * @param action * @returns {*} */const todo = ( state, action ) => { switch ( action.type ) { ...
阅读全文
posted @ 2016-01-12 19:49
Zhentiw
摘要：Learn how to create a React todo list application using the reducers we wrote before./** * A reducer for a single todo * @param state * @param action ...
阅读全文
posted @ 2016-01-12 18:11
Zhentiw
摘要：Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we will walk through setting up some Redux reducer tes...
阅读全文
posted @ 2016-01-12 03:21
Zhentiw
浙公网安备 33010602011771号