R E ACT FR ON T E N D CO D IN G CH A L L E N G E

This problem statement is to test the ability of the user to go through the
basics of React frontend framework and build the below UX in the same

CHALLENGE
R E ACT GRI D SYST E M
Create the below wireframe using the concept of react components and state.
The grid should have the as many rows as entered in no. of rows and each row
should have as many number of columns as specified in the column string.

No. of Rows Columns String

Space between rows Space between boxes

100px Height 100px Height 100px Height

Box Box Box

100px Height Box 100px Height Box

Components

The below list is to be created as separate react components

1. Input Boxes (4 in total, Example values correspond to above output for grid)

1.1. HTML5 input for No. of Row in the grid — e.g. “2”

1.2. HTML5 Input for Columns string - E.g. “3,2” Implies first row 3 boxes and
second row 2 boxes

1.3. HTML5 input for space between columns in pixels - E.g “8px”

1.4. HTML5 input for space between rows - E.g. “8px”

2. Box of height 100px HTML5 DIV

3. Row Component -> displays as many boxes as specified in the column string
value

8th Floor Zen3 InfoSolutions, Vaishnavi Cynosure, Hyderabad, Gachibowli www.sayint.ai

 Component Tree for Above Example UX

<App>
<Input name=“no-of-rows” />
<Input name=“columns-string />
<Input name=“gutter-row” />
<Input name=“gutter-col” />
<br />
<Row>
<Box />
<Box />
<Box />
</Row>
<Row>
<Box />
<Box />
</Row>
</App>

Event Handlers

•onChange of any input field value

The grid row/columns/spacing between them should update

accordingly based on the input that is changed

Online documentation for Reference

1. https://reactjs.org/docs/hello-world.html

2. https://reactjs.org/docs/rendering-elements.html

3. https://reactjs.org/docs/state-and-lifecycle.html

4. https://reactjs.org/docs/handling-events.html

Additional Points

1. Use React Motion to animate when no. of rows/columns string is

changed https://github.com/chenglou/react-motion

2. Use create-react-app to bootstrap the application https://

github.com/facebook/create-react-app

8th Floor Zen3 InfoSolutions, Vaishnavi Cynosure, Hyderabad, Gachibowli www.sayint.ai