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); Colored by Color Scripter

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