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