{"id":37,"date":"2025-07-01T14:25:41","date_gmt":"2025-07-01T18:25:41","guid":{"rendered":"https:\/\/www.shawntgray.com\/blog\/?p=37"},"modified":"2025-07-01T14:25:43","modified_gmt":"2025-07-01T18:25:43","slug":"how-to-build-an-art-gallery-with-react-part-2-set-the-stage","status":"publish","type":"post","link":"https:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-2-set-the-stage\/","title":{"rendered":"How to Build an Art Gallery with React \u2013 Part 2: Set the Stage"},"content":{"rendered":"\n<p>What we&#8217;ll create in this part:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JSON file to hold the data necessary to display and filter your images<\/li>\n\n\n\n<li>The base React App.js component and its related CSS file<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Create Your JSON Data File<\/h2>\n\n\n\n<p>For this app, we will use a JSON (<strong>J<\/strong>ava<strong>S<\/strong>cript <strong>O<\/strong>bject <strong>N<\/strong>otation) file to store all the information needed to display and filter our images and artwork. Open your <strong>src<\/strong> folder, create a new file and name it <strong>images.json<\/strong>. Each image will have 3 key\/value pairs: <strong>src <\/strong>for the relative location of the image, a <strong>categories <\/strong>array to list the image&#8217;s filter tags (filtering will be covered in <a href=\"https:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-4-filter-images\/\" title=\"Part 4\">Part 4<\/a>), and a <strong>title <\/strong>that, well, gives the image a title.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  {\n    \"src\": \"\/images\/image1.jpg\",\n    \"categories\": &#91;\n      \"Color\",\n      \"Vector\",\n      \"Warm\"\n    ],\n    \"title\": \"Image One\"\n  },\n  {\n    \"src\": \"\/images\/image2.png\",\n    \"categories\": &#91;\n      \"Color\",\n      \"Raster\",\n      \"Cool\"\n    ],\n    \"title\": \"Image Two\"\n  },\n]<\/code><\/pre>\n\n\n\n<p><em><strong>Important!<\/strong> Be sure to place all your images inside the <strong>public\/images<\/strong> folder. This app will not accept images from outside sources.<\/em><\/p>\n\n\n\n<p>Repeat the pattern for all of your images, adding your own category tags. Everything inside<strong> {<\/strong> and<strong> }<\/strong> defines your image object and each key\/value pair will come into play later in <a href=\"\/blog\/how-to-build-an-art-gallery-with-react-part-3-components\/\" title=\"Part 3\">Part 3<\/a> where we will build the individual components and <a href=\"ttps:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-4-filter-images\/\" title=\"Part 4\">Part 4<\/a> where we will apply filter logic to the app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Clear Out the Defaults<\/h2>\n\n\n\n<p>In your <strong>src<\/strong> folder, open your <strong>index.css<\/strong> file and delete all the CSS code. This style sheet should only contain the general styles of your app &#8211; the base typography, colors, buttons, links, etc. Your components will be styled in separate file that will be covered next. These are the styles I am using (feel free to style your app however you like):<\/p>\n\n\n\n<p><strong>index.css<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #2f2f2f;\n  color: #ddd;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}<\/code><\/pre>\n\n\n\n<p>Next, open your <strong>App.css<\/strong> file and delete all its contents. These styles will affect everything contained in your <strong>App.js<\/strong> component as well as all of its children components (covered in <a href=\"\/blog\/how-to-build-an-art-gallery-with-react-part-3-components\/\" title=\"\">Part 3<\/a>). Since we haven&#8217;t built anything in the <strong>App.js<\/strong> file, simply leave <strong>App.css<\/strong> blank for now.<\/p>\n\n\n\n<p>Finally, open your <strong>App.js<\/strong> file and clear all its contents as well. Now we&#8217;re ready to start building our app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set the Stage<\/h2>\n\n\n\n<p>In your <strong>App.js<\/strong> file, add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function App() {\n  return (\n    &lt;div className='App'>\n      &lt;h1>Art Gallery&lt;\/h1>\n    &lt;\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>Here, we simply added a top-level heading <strong>&lt;h1><\/strong> tag inside a <strong>&lt;div><\/strong> container.<\/p>\n\n\n\n<p>Every component lives in a single HTML container, most commonly a <strong>&lt;div><\/strong> element, as shown here. In React, you must use the <strong>className <\/strong>attribute to list the classes that will be styled within your <strong>App.css<\/strong> file.<\/p>\n\n\n\n<p>Go back to your <strong>App.css<\/strong> file and add the following styles:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.App {\n  text-align: center;\n  padding: 20px;\n  min-height: 100vh;\n}<\/code><\/pre>\n\n\n\n<p>Next, open your <strong>index.js<\/strong> file. This is the entry point for your app and the top-most component. Update the contents to the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App.js';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  &lt;React.StrictMode>\n    &lt;App \/>\n  &lt;\/React.StrictMode>\n);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The first 4 lines import all the necessary packages and files that will be used in <strong>index.js<\/strong> and your app as a whole.<\/li>\n\n\n\n<li>Next, set the <strong>const root <\/strong>to the<em> &#8220;root&#8221; element<\/em> found in your<strong> index.html<\/strong> file.<\/li>\n\n\n\n<li>Finally, render your app (shown here as the <strong>&lt;App \/><\/strong> tag) and append it to the root element.<\/li>\n<\/ul>\n\n\n\n<p>In the next part, we&#8217;ll explore React components further and build our own components that will quickly and dynamically create the contents of your Art Gallery app using the <strong>images.json<\/strong> file you created.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this lesson, you will learn how to build a JSON data file and begin building your app&#8217;s base React components.<\/p>\n","protected":false},"author":1,"featured_media":34,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-37","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art-gallery"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":3,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions\/54"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/media\/34"}],"wp:attachment":[{"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shawntgray.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}