1. Overview

This tutorial attempts to lead you through the simple process of creating a reusable component RandomGif (See below) and how to create a new component RandomGifPair by reusing the existing component using fractal-component. You might need some basic understandings of ReactJs, Redux & Redux-Saga. But don't worry if you haven't got a chance to look at those. As fractal-component tries to make things simplier by integrating with everyhting, you actually can pick up those concepts along the tutorial.

1.1 RandomGif Component

The RandomGif Component comes with a main display area that is for a Gif image and a Get Gif button. Once the button is clicked, this component will send a request to https://giphy.com to get a random gif image and display it in the display area. In the tutorial, we will try to create a highly decoupled component that doesn't make any assumptions on outside world. i.e.

• State Structure Independent: It doesn't rely on any particular state structure. The component's state can be moved to anywhere on the application's state tree without impacting its functionality.
• Presentation Structure Independent: It doesn't require to be used within any particular React Component structure. i.e. It can be moved to anywhere within the Component tree without impact its functionality.
• Action Type Independent: Any action types defined by this component will never be coincidentally same with action types defined by any other components.

1.2 RandomGifPair Component

The RandomGifPair Component will be built by reusing two RandomGif components. It comes with two image display areas and a Get Gif Pair button. Once the button is clicked, two gif images will be requested from https://giphy.com and displayed in the image display area.