Introduction to React
For example, we can create multiple instances of a component and store it in an array that can be directly rendered using the embed method.
In the index.js, there is a component called
Grid, which contains the main
<div> element having an id
There's an empty array called
blocks in the function, which is then populated with
Block components using nested for loops. Each
Block component appended to the array has a
color value, either light blue or empty string - indicating the default color(white).
This color is assigned based on the condition
(i + j) % 2 == 0, which ensures that each consecutive block has a different color.
In index.css, we set the display of the
#grid object to
grid, and using the
repeat() function, we create 18 rows and 18 columns, each having a width/height of 27px. This arranges all those
Block components (which are basically
<div> elements) into a neat 18x18 grid structure).