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