initial demo commit

Susie-D · Nov 16, 2023 · 0e67198 · 0e67198
1 parent 45a0119
commit 0e67198
Show file tree

Hide file tree

Showing 16 changed files with 348 additions and 86 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,7 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Essentials</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <!-- <script type="module" src="/src/index.jsx"></script> -->
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import reactAtom from './assets/react-core-concepts.png';
+import './index.css';
+import { CORE_CONCEPTS, EXAMPLES } from './data';
+
+const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
+
+function genRandomInt(max) {
+  return Math.floor(Math.random() * (max + 1));
+}
+
+function Header() {
+  return (
+    <header>
+      <img src={reactAtom} alt='Stylized atom' />
+      <h1>React Essentials</h1>
+      <p>
+        {reactDescriptions[genRandomInt(2)]} React concepts you will need for
+        almost any app you are going to build!
+      </p>
+    </header>
+  );
+}
+
+let CoreConcepts = ({image, title, description}) => {
+  return (
+    <li key={title}>
+      <img src={image} alt={title}/>
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </li>
+  )
+}
+
+let tabContent = <p>Please select a topic.</p>
+
+let TabButton = ({children, onSelect, isSelected}) => {
+  return <li key={children.title}>
+    <button className={isSelected ? 'active' : ''} onClick={onSelect}>{children}</button>
+    </li>
+}
+
+function App() {
+const [selectedTopic, setSelectedTopic] = useState();
+
+let handleButtonClick = (selectedButton) => {
+  setSelectedTopic(selectedButton);
+  console.log(selectedTopic)
+}
+
+  return (
+    <div>
+      <Header />
+      <main>
+      <div style={{display: "flex"}}>
+      {CORE_CONCEPTS.map((c) => 
+        <section id="core-concepts">
+          <ul key={c.title}>
+            <CoreConcepts {...c}/>
+            </ul>
+        </section>)}
+        </div>
+        <section id="examples">
+          <h2>Examples</h2>
+          <menu>
+           <TabButton isSelected={selectedTopic === 'components'} onSelect={() => handleButtonClick('components')} children="Components"/>
+           <TabButton isSelected={selectedTopic === 'jsx'}  onSelect={() => handleButtonClick('jsx')} children="JSX"/>
+           <TabButton isSelected={selectedTopic === 'props'}  onSelect={() => handleButtonClick('props')}  children="Props"/>
+           <TabButton isSelected={selectedTopic === 'state'}  onSelect={() => handleButtonClick('state')} children="State"/>
+          </menu>
+          {!selectedTopic ? <div>{tabContent}</div> :     
+         <div className="tab">
+          <h3>{EXAMPLES[selectedTopic].title}</h3>
+          <p>{EXAMPLES[selectedTopic].description}</p>
+          <pre>
+            <code>{EXAMPLES[selectedTopic].code}</code>
+          </pre>      
+         </div>}
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import App from '../App';
 
 test('renders learn react link', () => {
   render(<App />);

diff --git a/src/assets/components.png b/src/assets/components.png
diff --git a/src/assets/config.png b/src/assets/config.png
diff --git a/src/assets/jsx-ui.png b/src/assets/jsx-ui.png
diff --git a/src/assets/react-core-concepts.png b/src/assets/react-core-concepts.png
diff --git a/src/assets/state-mgmt.png b/src/assets/state-mgmt.png
diff --git a/src/data.js b/src/data.js
@@ -0,0 +1,82 @@
+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.',
+  },
+];
+
+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>
+  );
+}`,
+  },
+};