Finished React Essentials page.

carla-ng · May 30, 2024 · 80d99d7 · 80d99d7
1 parent 4b049dc
commit 80d99d7
Show file tree

Hide file tree

Showing 13 changed files with 286 additions and 206 deletions.
diff --git a/react-practice/main-project/dist/assets/components-DIer5AT9.png b/react-practice/main-project/dist/assets/components-DIer5AT9.png
diff --git a/react-practice/main-project/dist/assets/config-35WB2uQB.png b/react-practice/main-project/dist/assets/config-35WB2uQB.png
diff --git a/react-practice/main-project/dist/assets/index-CzZrerdo.js b/react-practice/main-project/dist/assets/index-CzZrerdo.js
diff --git a/react-practice/main-project/dist/assets/index-DMJ6CBjR.css b/react-practice/main-project/dist/assets/index-DMJ6CBjR.css
diff --git a/react-practice/main-project/dist/assets/index-MSsnV_1a.css b/react-practice/main-project/dist/assets/index-MSsnV_1a.css
diff --git a/react-practice/main-project/dist/assets/index-twLWV84w.js b/react-practice/main-project/dist/assets/index-twLWV84w.js
diff --git a/react-practice/main-project/dist/assets/jsx-ui-C1zGwFa-.png b/react-practice/main-project/dist/assets/jsx-ui-C1zGwFa-.png
diff --git a/react-practice/main-project/dist/assets/react-core-concepts-BolkmIvL.png b/react-practice/main-project/dist/assets/react-core-concepts-BolkmIvL.png
diff --git a/react-practice/main-project/dist/assets/state-mgmt-Dg3AZWgZ.png b/react-practice/main-project/dist/assets/state-mgmt-Dg3AZWgZ.png
diff --git a/react-practice/main-project/dist/index.html b/react-practice/main-project/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Practice</title>
-    <script type="module" crossorigin src="/assets/index-twLWV84w.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-MSsnV_1a.css">
+    <script type="module" crossorigin src="/assets/index-CzZrerdo.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DMJ6CBjR.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsTabButton.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsTabButton.jsx
@@ -1,9 +1,9 @@
 
-const ReactEssentialsTabButton = ({ children, onSelect }) => {
+const ReactEssentialsTabButton = ({ children, onSelect, isSelected }) => {
 
     return (
         <li>
-            <button onClick={onSelect}>{children}</button>
+            <button className={ isSelected ? 'active' : undefined } onClick={onSelect}>{children}</button>
         </li>
     )
 }

diff --git a/react-practice/main-project/src/ReactEssentials/data/data.js b/react-practice/main-project/src/ReactEssentials/data/data.js
@@ -4,28 +4,79 @@ 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.',
-  },
-];
+    {
+      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.',
+    },
+];
+
+export const EXAMPLES = {
+    components: {
+      title: 'Components',
+      description:
+        'Components are the building blocks of React applications. A component is a self-contained module (HTML + optional CSS + JS) that renders some output.',
+      code: `
+        function Welcome() {
+            return <h1>Hello, World!</h1>;
+        }`,
+            },
+            jsx: {
+            title: 'JSX',
+            description:
+                'JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript (e.g., it may output dynamic content).',
+            code: `
+        <div>
+            <h1>Welcome {userName}</h1>
+            <p>Time to learn React!</p>
+        </div>`,
+            },
+            props: {
+            title: 'Props',
+            description:
+                'Components accept arbitrary inputs called props. They are like function arguments.',
+            code: `
+        function Welcome(props) {
+            return <h1>Hello, {props.name}</h1>;
+        }`,
+            },
+            state: {
+            title: 'State',
+            description:
+                'State allows React components to change their output over time in response to user actions, network responses, and anything else.',
+            code: `
+        function Counter() {
+            const [isVisible, setIsVisible] = useState(false);
+        
+            function handleClick() {
+            setIsVisible(true);
+            }
+        
+            return (
+            <div>
+                <button onClick={handleClick}>Show Details</button>
+                {isVisible && <p>Amazing details!</p>}
+            </div>
+            );
+        }`,
+    },
+};
diff --git a/react-practice/main-project/src/ReactEssentials/pages/ReactEssentialsPage.jsx b/react-practice/main-project/src/ReactEssentials/pages/ReactEssentialsPage.jsx
@@ -1,18 +1,29 @@
 import '../css/ReactEssentials.css'
-import { CORE_CONCEPTS } from '../data/data.js'
+import { CORE_CONCEPTS, EXAMPLES } from '../data/data.js'
 
-/*import { useState } from 'react' */
+import { useState } from 'react'
 
 import ReactEssentialsHeader from '../components/ReactEssentialsHeader.jsx'
 import ReactEssentialsCoreConcept from '../components/ReactEssentialsCoreConcept.jsx'
 import ReactEssentialsTabButton from '../components/ReactEssentialsTabButton.jsx'
 
 function ReactEssentialsPage() {
-    let currentTabContent = ''
+    const [selectedTopic, setSelectedTopic] = useState()
 
     const handleSelect = ( selectedButton ) => {
-        console.log(selectedButton)
-        currentTabContent = selectedButton
+        setSelectedTopic(selectedButton)
+    }
+
+    let tabContent = <p> Please, select a topic.</p>
+
+    if ( selectedTopic ) {
+        tabContent = (
+            <div id="tab-content">
+                <h3>{ EXAMPLES[selectedTopic].title }</h3>
+                <p>{ EXAMPLES[selectedTopic].description }</p>
+                <code>{ EXAMPLES[selectedTopic].code }</code>
+            </div>
+        )
     }
 
     return (
@@ -22,26 +33,20 @@ function ReactEssentialsPage() {
                 <section id="core-concepts">
                     <h2>Core Concepts</h2>
                     <ul>
-                        <ReactEssentialsCoreConcept
-                            title={CORE_CONCEPTS[0].title}
-                            description={CORE_CONCEPTS[0].description}
-                            image={CORE_CONCEPTS[0].image}
-                        />
-                        <ReactEssentialsCoreConcept { ...CORE_CONCEPTS[1] } />
-                        <ReactEssentialsCoreConcept { ...CORE_CONCEPTS[2] } />
-                        <ReactEssentialsCoreConcept { ...CORE_CONCEPTS[3] } />
+                        {CORE_CONCEPTS.map(concept => <ReactEssentialsCoreConcept key={concept.title} { ...concept } />)}
                     </ul>
                 </section>
 
                 <section id="examples">
                     <h2>Examples</h2>
                     <menu>
-                        <ReactEssentialsTabButton onSelect={() => handleSelect('components')}>Components</ReactEssentialsTabButton>
-                        <ReactEssentialsTabButton onSelect={() => handleSelect('jsx')}>JSX</ReactEssentialsTabButton>
-                        <ReactEssentialsTabButton onSelect={() => handleSelect('props')}>Props</ReactEssentialsTabButton>
-                        <ReactEssentialsTabButton onSelect={() => handleSelect('state')}>State</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'components'} onSelect={() => handleSelect('components')}>Components</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'jsx'} onSelect={() => handleSelect('jsx')}>JSX</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'props'} onSelect={() => handleSelect('props')}>Props</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'state'} onSelect={() => handleSelect('state')}>State</ReactEssentialsTabButton>
                     </menu>
-                    { currentTabContent }
+
+                    { tabContent }
                 </section>
             </main>
         </div>