Post List

2016년 10월 26일 수요일

Walmart Electrode #05 Develop Main Component

상위 레벨의 메인 Component 개발

1. 위치 : <your-awesome-component>/src/components/your-awesome-component.jsx
해당 파일을 열어 아래 코드를 재정의 한다.

현재 코드



[binrang@binrang components]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src/components
[binrang@binrang components]$ ls
br-elec-component.jsx  guest-list.jsx  render-friend.jsx
[binrang@binrang components]$ vi br-elec-component.jsx 
import React from "react";
import { FormattedMessage } from "react-intl";
import styles from "../styles/br-elec-component.css";
import messages from "../lang/default-messages";
export default class BrElecComponent extends React.Component {
  render() {
    return (
      <div className={styles.someStyle}>
        <FormattedMessage {...messages.editMe} />
      </div>
    );
  }
}
BrElecComponent.displayName = "BrElecComponent";
BrElecComponent.propTypes = {};
BrElecComponent.defaultProps = {};

재정의 코드

import React, { Component, PropTypes } from "react";
import styles from "../styles/br-elec-component.css";
import RenderFriend from "./render-friend";
import GuestList from "./guest-list";
export default class BrElecComponent extends Component {
  constructor(props) {
    super(props);
  }
  renderFriends(friends, party) {
    const invitees = this.props.invitees;
    const partyTime = party ? styles.party : "";
    return friends
      .filter((friend) => {
        return !!invitees.filter((invitee) => {
          return invitee.name === friend.name && invitee.invited;
        }).length;
      })
      .map((friend) => (
        <RenderFriend className={partyTime} key={friend.name} friend={friend}/>
      ));
  }
  viewState(view) {
    if (view) {
      return view;
    }
    return {
      intro: true,
      invite: true
    };
  }
  houseParty(invitees, party) {
    return party
      ? `${styles.yourAwesomeComponent} ${styles.house}`
      : styles.house;
  }
  render() {
    const { ourFriends, invitees, view, message, toggleGuest } = this.props;
    const party = invitees.length === invitees.filter((invitee) => invitee.invited).length &&
      invitees.length > 0;
    const { invite, intro } = this.viewState(view);
    const houseParty = this.houseParty(invitees, party);
    return (
      <div>
        {invite && invitees.length > 0 &&
          <GuestList invitees={invitees} toggleGuest={(invitee) => toggleGuest(invitee)}/>}
        <div className={styles.container}>
        {intro && !invitees.filter((invitee) => invitee.invited).length && message(styles.message)}
          <div className={houseParty}>
            <div className={styles.room}>
              {this.renderFriends(ourFriends, party)}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
BrElecComponent.displayName = "BrElecComponent";
BrElecComponent.propTypes = {
  ourFriends: PropTypes.array,
  message: PropTypes.func,
  invitees: PropTypes.array,
  view: PropTypes.object,
  toggleGuest: PropTypes.func
};
BrElecComponent.defaultProps = {
  ourFriends: [],
  message: () => {
    return `<p>Let's party! Un-comment the all the commented-out lines in the
      playground then check the boxes on the GuestList to invite our friends to the party!</p>`;
  },
  invitees: []
};

2. 위치 : <your-awesome-component>/src/index.js
해당 파일을 열어 아래 코드를 추가한다.

해당코드
>
[binrang@binrang src]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src
[binrang@binrang src]$ ls
components  helpers  index.js  lang  styles
[binrang@binrang src]$ vi index.js 
export { default as BrElecComponent } from "./components/br-elec-component";

추가 코드 완성본

export { default as BrElecComponent } from "./components/br-elec-component";
export { default as RenderFriend } from "./components/render-friend";
export { default as GuestList } from "./components/guest-list";


참조 URL : high_level_component.html