Alternative Props Syntaxes

Author: ThomasCode92

src/App.jsx

@@ -1,5 +1,5 @@
+import { CORE_CONCEPTS } from './data/core-concepts';
 import reactImg from './assets/react-core-concepts.png';
-import componentsImg from './assets/components.png';
 
 const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
 
@@ -22,12 +22,12 @@ function Header() {
   );
 }
 
-function CoreConcept(props) {
+function CoreConcept({ title, description, image }) {
   return (
     <li>
-      <img src={props.img} alt={props.title} />
-      <h3>{props.title}</h3>
-      <p>{props.description}</p>
+      <img src={image} alt={title} />
+      <h3>{title}</h3>
+      <p>{description}</p>
     </li>
   );
 }
@@ -41,13 +41,13 @@ function App() {
           <h2>Time to get started!</h2>
           <ul>
             <CoreConcept
-              title="Components"
-              description="The core UI building block"
-              img={componentsImg}
+              title={CORE_CONCEPTS[0].title}
+              description={CORE_CONCEPTS[0].description}
+              image={CORE_CONCEPTS[0].image}
             />
-            <CoreConcept title="Props" />
-            <CoreConcept />
-            <CoreConcept />
+            <CoreConcept {...CORE_CONCEPTS[1]} />
+            <CoreConcept {...CORE_CONCEPTS[2]} />
+            <CoreConcept {...CORE_CONCEPTS[3]} />
           </ul>
         </section>
       </main>

src/data/core-concepts.js

@@ -0,0 +1,31 @@
+import componentsImg from '../assets/components.png';
+import propsImg from '../assets/config.png';
+import jsxImg from '../assets/jsx-ui.png';
+import stateImg from '../assets/state-mgmt.png';
+
+export const CORE_CONCEPTS = [
+  {
+    image: componentsImg,
+    title: 'Components',
+    description:
+      'The core UI building block - compose the user interface by combining multiple components.',
+  },
+  {
+    image: jsxImg,
+    title: 'JSX',
+    description:
+      'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.',
+  },
+  {
+    image: propsImg,
+    title: 'Props',
+    description:
+      'Make components configurable (and therefore reusable) by passing input data to them.',
+  },
+  {
+    image: stateImg,
+    title: 'State',
+    description:
+      'React-managed data which, when changed, causes the component to re-render & the UI to update.',
+  },
+];