codemilli codemilli

😇

Hooked on React Hooks

codemilli / package.json

Created February 11, 2016 19:29

초간단 개발환경

	{
	"name": "todo",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "hckrmoon <[email protected]> (http://blog.hckrmn.net/)",

codemilli / webpack.config.js

Created February 11, 2016 19:37

codemilli / index.html

Created February 11, 2016 19:38

초 간단 react 개발 환경

codemilli / index.js

Created February 11, 2016 19:44

초간단 react 개발 환경 세팅

	import React from 'react';
	import {render} from 'react-dom';

	const App = () => (
	<div>Hello?</div>
	);

	render(<App />, document.getElementById('root'));

codemilli / fullstate.json

Last active February 21, 2016 04:25

application state design

codemilli / index.js

Created February 12, 2016 12:25

모든 것의 시작.

	import React from 'react';
	import { render } from 'react-dom';
	import { createStore } from 'redux';
	import { Provider } from 'react-redux';

	import reducer from './reducers';
	import App from './containers/app';

	let store = createStore(reducer);

codemilli / actions.js

Last active February 21, 2016 04:17

actions for Todo

	// Todo 의 아이디 todo 의 갯수가 늘때마다 +1 해준다.
	let nextTodoId = 0;

	// Todo 의 상태(completed/uncompleted) 를 변경한다.
	export const toggleTodo = (id) => {
	return {
	type: 'TOGGLE_TODO',
	id
	};
	};

codemilli / reducers.js

Last active February 21, 2016 04:19

simple reducers

	export const visible = (state = 'SHOW_ALL', action) => {
	switch (action.type) {
	case 'SET_VISIBLE':
	return action.filter;
	default:
	return state;
	}
	};

	const toggleTodo = (todo, id) => {

codemilli / app.js

Created February 12, 2016 14:01

component 를

	/**
	* Created by youngmoon on 2/12/16.
	*/

	import React from 'react';
	import { bindActionCreators } from 'redux';

	import { connect } from 'react-redux';
	import * as ActionCreators from '../actions';

codemilli / add.js

Created February 12, 2016 14:02

add new todo

	import React, { PropTypes } from 'react';

	/**
	* Define React Presentational Component Add
	*/
	const Add = ({ onSubmit }) => {
	let input;
	const submit = (e) => {
	e.preventDefault();
	if (!input.value) return;