Post List

2016년 10월 27일 목요일

Walmart Electrode #07 Add Examples

예제를 추가 해보기.

1. 위치 : <your-awesome-component>/demo/examples/render-friend.example

해당 디렉토리에 render-friend.example 파일을 신규로 생성하고 아래 코드를 추가한다.

[binrang@binrang examples]$ pwd
/home/binrang/br-electrode-component/br-elec-component/demo/examples
[binrang@binrang examples]$ vi render-friend.example
<RenderFriend
    friend={
      {name: "John", img: "//goo.gl/dL5MXT"}
    } />



2. 위치 : <your-awesome-component>/demo/examples/guest-list.example

해당 디렉토리에 guest-list.example 파일을 신규로 생성하고 아래 코드를 추가한다.

[binrang@binrang examples]$ pwd
/home/binrang/br-electrode-component/br-elec-component/demo/examples
[binrang@binrang examples]$ vi guest-list.example
<GuestList
  invitees={[
  {name: 'John Smith', invited: false},
  {name: 'Jane Smith', invited: false},
  {name: 'Dan Jones', invited: false}
  ]}
  toggleGuest={(invitee) => alert(invitee.name)}
  />

3. 위치 : <your-awesome-component>/demo/examples/your-awesome-component.example

해당 디렉토리에 파일을 열고 아래 코드를 추가한다.

[binrang@binrang examples]$ pwd
/home/binrang/br-electrode-component/br-elec-component/demo/examples
[binrang@binrang examples]$ vi br-elec-component.example 
<BrElecComponent 
  ourFriends={[
   {name: "electrode", img: "//goo.gl/CZ4wAF", size: 12},
   {name: "hapi", img: "//goo.gl/q9uIFW", size: 12},
   {name: "React", img: "//goo.gl/dL5MXT", size: 12},
  ]}
  invitees={[
   {name: "electrode", invited: false},
   {name: "hapi", invited: false},
   {name: "React", invited: false}
  ]}
  toggleGuest={(invitee) => alert('Edit invitees array in playground to invite a guest!')}
  message={(c)=>(
  <div className={c}>Change key 'invited' to true in 'invitees' array in the playground
  above to invite guests!</div>
  )}
/>

4. 위치 : <your-awesome-component>/demo/demo.jsx

해당 디렉토리에 위치한 파일을 열고 const components 부분에 데모 example 코드를 포함시킨다.

[binrang@binrang demo]$ pwd
/home/binrang/br-electrode-component/br-elec-component/demo
[binrang@binrang demo]$ vi demo.jsx 
/*@flow*/
/*global document:false*/
import React from "react";
import { addLocaleData, IntlProvider } from "react-intl";
import Demo from "electrode-demo-index";
import * as libraryScope from "../src/index";
const locale = "en";
const messages = require(`../src/lang/${locale}.json`);
const localeData = require(`react-intl/locale-data/${locale}`);
addLocaleData(localeData);
const localScope = {IntlProvider, messages, locale};
const components = [
  {
    title: "HouseParty",
    examples: [
      {
        type: "playground",
        code: require("raw!./examples/guest-list.example"),
        noRender: true
      }
    ]
  },
  {
    title: "RenderFriend",
    examples: [
      {
        type: "playground",
        code: require("raw!./examples/render-friend.example"),
        noRender: true
      }
    ]
  },
  {
    title: "BrElecComponent",
    examples: [
      {
        type: "playground",
        code: require("raw!./examples/br-elec-component.example"),
        noRender: true
      }
    ]
  }
];
const demo = () => (
  <Demo scope={localScope} libraryScope={libraryScope} components={components} />
);
export default demo;

이제 예제 코드 입력이 완료 됐다.

참조 URL : add_examples.html