{"id":43,"date":"2025-07-01T14:25:37","date_gmt":"2025-07-01T18:25:37","guid":{"rendered":"https:\/\/www.shawntgray.com\/blog\/?p=43"},"modified":"2025-07-01T14:26:08","modified_gmt":"2025-07-01T18:26:08","slug":"how-to-build-an-art-gallery-with-react-part-3-components","status":"publish","type":"post","link":"https:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-3-components\/","title":{"rendered":"How to Build an Art Gallery with React \u2013 Part 3: Components"},"content":{"rendered":"\n
In this part, we’ll:<\/p>\n\n\n\n
\n
Discover the relationship between parent and child components and how styles, properties, and actions flow through the components<\/li>\n\n\n\n
Build the ImageCard and ImageGallery components and update the App component to properly use those components<\/li>\n<\/ul>\n\n\n\n
The Parent-Child Relationship<\/h2>\n\n\n\n
For our React app, we will have this basic component tree:<\/p>\n\n\n\n
great-grandparent --- index.js\n V V\ngrandparent --------- App.js \n V V\nparent -------------- ImageGallery.js\n V V\nchild --------------- ImageCard.js<\/code><\/pre>\n\n\n\n
Styles and properties flow from the topmost component<\/strong> and apply to each level underneath it. Each individual component can have its own batch of styles and properties that could add to or override its parent’s styles or properties.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
\n
index.js<\/strong> has the styles background-color: red<\/em> and color: green<\/em><\/li>\n\n\n\n
App.js<\/strong> inherits the background-color<\/em> and color <\/em>from index.js<\/strong>, but overrides the color <\/em>style to blue. The index.js<\/strong> color <\/em>remains green.<\/li>\n\n\n\n
ImageGallery.js<\/strong> inherits the unchanged background-color<\/em> from App.js<\/strong> (flowing through from index.js<\/strong>) and the overwritten color <\/em>styles. Here, the background-color<\/em> is overwritten to purple.<\/li>\n\n\n\n
ImageCard.js<\/strong> now inherits the styles background-color: purple<\/em> and color: blue<\/em>.<\/li>\n<\/ol>\n\n\n\n
Styles and properties flow in a top-down direction. Actions and reactions, however “bubble”<\/strong> from the bottom up. Say the ImageCard.js<\/strong> component includes a button with an onClick<\/strong> action that would change some a headline in App.js<\/strong>.<\/p>\n\n\n\n
The user clicks the button in ImageCard.js<\/strong>. The action is captured as an event bubble<\/strong> in this component.<\/li>\n\n\n\n
The event bubble rises to ImageGallery.js<\/strong>. No functions in this file are activated by this event.<\/li>\n\n\n\n
The bubble continues to rise from ImageGallery.js<\/strong> to App.js<\/strong>. Here, the changeTitle<\/em> <\/strong>function is activated by the arrival of the event bubble. Once the function finishes, the bubble continues to rise through the component tree.<\/li>\n\n\n\n
The event rises to index.js<\/strong>. No functions exist in this file to react to the event bubble. The bubble rises out of index.js<\/strong> and is released into the ether.<\/li>\n<\/ol>\n\n\n\n
Build the Components<\/h2>\n\n\n\n
The basic container layout of the components will be something like this:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Start Small & Build Up<\/h2>\n\n\n\n
With the basic roadmap laid out, we’ll start with the bottom-most component.<\/p>\n\n\n\n
In your src <\/strong>folder, create a new file named ImageCard.js<\/strong>, and add the following code:<\/p>\n\n\n\n
This component inherits the image<\/em><\/strong> property from its parent component (which we will write next).<\/li>\n\n\n\n
Each attribute for the image tag is defined by variables, which must be contained within {<\/strong> and }<\/strong>.<\/li>\n\n\n\n
If an attribute is defined by multiple variables, enclose its definition within `<\/strong> tick marks. Each enclosed variable must be written as ${ … }<\/strong>, like ${process.env.PUBLIC_URL}<\/em><\/strong> included in the img’s src attribute.<\/li>\n\n\n\n
process.env.PUBLIC_URL<\/em><\/strong> is a safe, convenient way to point to the app’s root <\/strong>folder without exposing the actual directory.<\/li>\n\n\n\n
export default ImageCard<\/em><\/strong> allows other components to utilize it as its own <ImageCard \/><\/strong> tag.<\/li>\n<\/ul>\n\n\n\n
Next, build the ImageGallery component<\/strong> by creating a new file in your src <\/strong>folder named ImageGallery.js<\/strong>. Add the following code:<\/p>\n\n\n\n
First, we import the ImageCard <\/strong>component from the ImageCard.js<\/strong> file (the extension is not necessary for JavaScript files).<\/li>\n\n\n\n
The ImageGallery <\/strong>inherits the images <\/em><\/strong>property from its parent.<\/li>\n\n\n\n
Inside the gallery <\/strong>container, we create an ImageCard <\/strong>for each image included in the images<\/em><\/strong> property using the map <\/em><\/strong>loop function (more efficient than for <\/em><\/strong>or foreach <\/em><\/strong>loops).<\/li>\n\n\n\n
When using the map <\/em><\/strong>loop, each element it creates requires a unique key, which is why the i<\/em><\/strong> variable is included. The i<\/em><\/strong> variable is increased by 1 each time the map <\/em><\/strong>loop iterates.<\/li>\n\n\n\n
The ImageCard<\/strong>‘s image <\/em><\/strong>attribute is set to the inherited image <\/em><\/strong>property, which contains the key\/value<\/em> pairs you created in your images.json<\/strong> file back in Part 2<\/a> (i.e. title, src, and categories).<\/li>\n<\/ul>\n\n\n\n
![\"Basic](\"https:\/\/www.shawntgray.com\/blog\/wp-content\/uploads\/2025\/06\/components.jpg\")
<\/figure>\n\n\n\n