JGKmGE

index.html

<div id="root">Loading Comic...</div>
<script src="https://fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="http://sonnylazuardi.github.io/react-komik/dist/komik.js"></script>

JGKmGE.markdown

JGKmGE

A Pen by Sonny Lazuardi on CodePen.

License.

script.js

let { Panel, Character, Balloon, Strip } = Komik;
let imageURL = 'http://sonnylazuardi.github.io/react-komik/dist/';

let Comic = (props) => (
    <Strip title="React Komik!" column="2">
        <Panel fill="#c8eafb">
            <Character
                image={`${imageURL}char1.png`}
                scale="0.5">
                <Balloon 
                    left="-80" 
                    height="120" 
                    image={`${imageURL}chat_left.svg`}
                    text="Have you heard  about ReactJS? You can write HTML in JS..."/>
            </Character>
        </Panel>
        <Panel fill="#c8eafb">
            <Character
                image={`${imageURL}char2.png`}
                scale="0.48">
                <Balloon
                    height="153"
                    left="40"
                    bottom="-40"
                    image={`${imageURL}chat_right.svg`}
                    text="Yeah it's pretty cool. You can use JSX to write web, mobile, TV app, and presentations"
                    />
            </Character>
        </Panel>
        <Panel fill="#c8eafb">
            <Character
                image={`${imageURL}char1_hype.png`}
                scale="0.45">
                <Balloon
                    height="130"
                    left="-70"
                    image={`${imageURL}chat_left.svg`}
                    text="Hey look! It's React Komik! We can create this comic strip with ReactJS!"
                    />
            </Character>
            <Character
                image={`${imageURL}logo_small.png`}
                top="20"
                left="130"
                scale="1"
                />
        </Panel>
        <Panel background={`${imageURL}magic.jpg`} />
    </Strip>
);


ReactDOM.render(<Comic />, document.getElementById('root'));