Post List

2016년 10월 18일 화요일

Walmart Electrode 컴포넌트 구성 (튜토리얼 계속) #03

기존에 올렸던 일렉트로드 App에 React Component를 재구성 해 보자

1. 디렉토리 찾아가기
/home/binrang/ex-electrode-app/client/components/home.jsx

2. home.jsx 내용 확인 하기



import React, {PropTypes} from "react";
import {connect} from "react-redux";
import {toggleCheck, incNumber, decNumber} from "../actions";
class Home extends React.Component {
  render() {
    const props = this.props;
    const {checked, value} = props;
    return (
      <div>
        <h1>Hello <a href={"https://github.com/electrode-io"}>{"Electrode"}</a></h1>
        <div>
          <h2>Managing States with Redux</h2>
          <label>
            <input onChange={props.onChangeCheck} type={"checkbox"} checked={checked}/>
            Checkbox
          </label>
          <div>
            <button type={"button"} onClick={props.onDecrease}>-</button>
             {value} 
            <button type={"button"} onClick={props.onIncrease}>+</button>
          </div>
        </div>
      </div>
    );
  }
}
Home.propTypes = {
  checked: PropTypes.bool,
  value: PropTypes.number.isRequired
};
const mapStateToProps = (state) => {
  return {
    checked: state.checkBox.checked, value: state.number.value
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    onChangeCheck: () => {
      dispatch(toggleCheck());
    },
    onIncrease: () => {
      dispatch(incNumber());
    },
    onDecrease: () => {
      dispatch(decNumber());
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);




위 코드를 아래와 같이 수정

import React, {PropTypes} from "react";
import {connect} from "react-redux";
import {toggleCheck, incNumber, decNumber} from "../actions";
export const imageUrls = [
  'http://daynin.github.io/clojurescript-presentation/img/react-logo.png',
  'https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png',
  'http://freevector.co/wp-content/uploads/2014/04/webpack.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Emoji_u26a1.svg/2000px-Emoji_u26a1.svg.png'
];
class Home extends React.Component {
  renderImage(imageUrl, key) {
    return (
        <img key={key} src={imageUrl} width="10%" height="10%"/>
    );
  }
  render() {
    const props = this.props;
    const {checked, value} = props;
    return (
      <div>
        <h1>Hello <a href={"https://github.com/electrode-io"}>{"Electrode"}</a></h1>
        <div> <p>Our beloved friends</p></div>
        <div className="images">
          {imageUrls.map((imageUrl, index) => this.renderImage(imageUrl, index))}
        </div>
        <div>
          <h2>Managing States with Redux</h2>
          <label>
            <input onChange={props.onChangeCheck} type={"checkbox"} checked={checked}/>
            Checkbox
          </label>
          <div>
            <button type={"button"} onClick={props.onDecrease}>-</button>
             {value} 
            <button type={"button"} onClick={props.onIncrease}>+</button>
          </div>
        </div>
      </div>
    );
  }
}
Home.propTypes = {
  checked: PropTypes.bool,
  value: PropTypes.number.isRequired
};
const mapStateToProps = (state) => {
  return {
    checked: state.checkBox.checked, value: state.number.value
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    onChangeCheck: () => {
      dispatch(toggleCheck());
    },
    onIncrease: () => {
      dispatch(incNumber());
    },
    onDecrease: () => {
      dispatch(decNumber());
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);


3. UI 와 관련 된 스타일쉬트 파일을 찾아가자.
/home/binrang/ex-electrode-app/client/styles/base.css

vi 로 base.css 파일을 열어본다.

[binrang@localhost styles]$ vi base.css 
:root {
  --black: #000;
  --white: #fff;
}
body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

이 파일 밑으로 다음 코드를 입력한다.

h1 {
  font-size: 16px;
  color: red;
}
p {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
a {
  font-size: 14px;
  color: red;
}
a:hover {
  color: blue;
}
.resource {
  margin-bottom: 10px;
}
.title {
  border-bottom: 2px solid blue;
  text-align: center;
}


4. 이제 서버를 동작시켜본다.

[binrang@localhost styles]$ cd ../../
[binrang@localhost ex-electrode-app]$ gulp dev
[16:47:59] Using gulpfile ~/ex-electrode-app/gulpfile.js
[16:47:59] Starting 'dev'...
[16:47:59] Starting '.webpack-dev'...
[16:47:59] Finished '.webpack-dev' after 120 μs
...
[nodemon] restarting due to changes...
[nodemon] starting `node server/index.js`
staticPaths Plugin: static files path prefix "dist"

Hapi.js server running at http://localhost.localdomain:3000

5. 이제 웹화면을 아래와 같이 나오는지 확인해보자.

6. 화면이 보였다면 축하축하!!!!

참고 URL : http://www.electrode.io/docs/build_component.html

댓글 1개: