Add remaining examples from React Review

Author: karlhorky

src/App.js

@@ -1,12 +1,16 @@
 import './App.css';
 import ExampleComponents from './ExampleComponents';
 import ExampleConditionalRendering from './ExampleConditionalRendering';
+import ExampleConvertingClassComponentsToFunctionComponents from './ExampleConvertingClassComponentsToFunctionComponents';
+import ExampleFormsWithControlledComponents from './ExampleFormsWithControlledComponents';
+import ExampleLiftingStateUp from './ExampleLiftingStateUp';
 import ExampleMappingOverArrays from './ExampleMappingOverArrays';
 import ExampleProps from './ExampleProps';
 import ExamplePropDestructuring from './ExamplePropsDestructuring';
 import ExampleStateNotSynchronous from './ExampleSetStateIsNotSynchronous';
 import ExampleStateCounter from './ExampleStateCounter';
 import ExampleStateEmail from './ExampleStateEmail';
+import ExampleStyling from './ExampleStyling';
 
 export default function App() {
   return (
@@ -24,6 +28,10 @@ export default function App() {
       <ExampleConditionalRendering />
       <ExamplePropDestructuring />
       <ExampleStateNotSynchronous />
+      <ExampleFormsWithControlledComponents />
+      <ExampleLiftingStateUp />
+      <ExampleStyling />
+      <ExampleConvertingClassComponentsToFunctionComponents />
       <br />
       <br />
       <br />

src/ExampleConvertingClassComponentsToFunctionComponents.js

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+// // Class components are old and no longer recommended
+// class ExampleClassToFunctionClass extends React.Component {
+//   state = {
+//     detailsShown: false,
+//   };
+
+//   render() {
+//     const { user } = this.props;
+
+//     if (user === undefined) return <div>User not found!</div>;
+
+//     return (
+//       <>
+//         <img src={user.image} alt={user.imageAlt} />
+//         <h1>{user.name}</h1>
+//         <button
+//           onClick={() =>
+//             this.setState({ detailsShown: !this.state.detailsShown })
+//           }
+//         >
+//           {this.state.detailsShown ? 'Hide' : 'Show'} Details
+//         </button>
+//         {this.state.detailsShown && <p>{user.details}</p>}
+//       </>
+//     );
+//   }
+// }
+
+function ExampleClassToFunctionClass(props) {
+  const [detailsShown, setDetailsShown] = useState(false);
+
+  if (props.user === undefined) return <div>User not found!</div>;
+
+  return (
+    <>
+      <img src={props.user.image} alt={props.user.imageAlt} />
+      <h1>{props.user.name}</h1>
+      <button onClick={() => setDetailsShown((prev) => !prev)}>
+        {detailsShown ? 'Hide' : 'Show'} Details
+      </button>
+      {detailsShown && <p>{props.user.details}</p>}
+    </>
+  );
+}
+
+export default function ExampleConvertingClassComponentsToFunctionComponents() {
+  return (
+    <div>
+      <h1>ExampleConvertingClassComponentsToFunctionComponents</h1>
+      <ExampleClassToFunctionClass
+        user={{
+          details: 'I like memes',
+          name: 'Lukas',
+          imageAlt: 'this is an image',
+          image:
+            'https://api.memegen.link/images/buzz/memes/memes_everywhere.png?width=400',
+        }}
+      />
+    </div>
+  );
+}
+
+// If you wanted to learn about class components, you could use a ChatGPT / Gemini / Claude prompt like this:
+
+// I have a React class component that I would like to convert to a function component:
+//
+// ```
+// class ExampleClassToFunctionClass extends React.Component {
+//   state = {
+//     detailsShown: false,
+//   };
+//
+//   render() {
+//     const { user } = this.props;
+//
+//     if (user === undefined) return <div>User not found!</div>;
+//
+//     return (
+//       <>
+//         <img src={user.image} alt={user.imageAlt} />
+//         <h1>{user.name}</h1>
+//         <button
+//           onClick={() =>
+//             this.setState({ detailsShown: !this.state.detailsShown })
+//           }
+//         >
+//           {this.state.detailsShown ? 'Hide' : 'Show'} Details
+//         </button>
+//         {this.state.detailsShown && <p>{user.details}</p>}
+//       </>
+//     );
+//   }
+// }
+// ```
+//
+// I am learning about class components. Can you guide me through (without telling me the answer) and show me how to convert it myself? Work step by step and ask me lots of questions.

src/ExampleFormsWithControlledComponents.js

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+
+export default function ExampleFormsWithControlledComponents() {
+  // 1. Create state variable
+  const [username, setUsername] = useState('');
+
+  const [reversedUsername, setReversedUsername] = useState('');
+
+  return (
+    <div>
+      <h1>ExampleFormsWithControlledComponents</h1>
+
+      <form
+        onSubmit={(event) => {
+          // Stops the form from submitting to a URL
+          // (the behavior which shows the ? in the URL and refreshes the page)
+          event.preventDefault();
+
+          // Do some additional work, based on the form data
+          setReversedUsername(username.split('').reverse().join(''));
+        }}
+      >
+        <label>
+          Username
+          <input
+            // 2. Use state variable
+            value={username}
+            onChange={(event) => {
+              // 3. Update the state variable value
+              setUsername(event.currentTarget.value);
+              // another option (may not always work): event.target.value
+            }}
+            // // This is the name sent via the form, if we do not prevent the default action
+            // name="username"
+          />
+        </label>
+        <button>Show reversed username</button>
+      </form>
+
+      <div>Reversed username: {reversedUsername}</div>
+    </div>
+  );
+}

src/ExampleLiftingStateUp.js

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export default function ExampleLiftingStateUp() {
+  // 2. State was "lifted up" to here
+  const [isOn, setIsOn] = useState(false);
+
+  return (
+    <div>
+      <h1>ExampleLiftingStateUp</h1>
+      {/* 3. We added the `isOn` and `setIsOn` props to both components */}
+      <LightBulb isOn={isOn} />
+      <LightSwitch isOn={isOn} setIsOn={setIsOn} />
+    </div>
+  );
+}
+
+// 4. Add `props` parameter to accept props
+function LightBulb(props) {
+  // 1. Previously, the state was here
+  // const [isOn, setIsOn] = useState(false);
+
+  // 5. Use props within component
+  return <div>Lightbulb is {props.isOn ? '🌞 ON' : '🌑 OFF'}</div>;
+}
+
+function LightSwitch(props) {
+  return <button onClick={() => props.setIsOn(!props.isOn)}>Toggle</button>;
+}

src/ExampleStyling.js

@@ -0,0 +1,21 @@
+import styles from './ExampleStyling.module.scss';
+
+export default function ExampleStyling() {
+  return (
+    <div>
+      <h1>ExampleStyling</h1>
+      <div
+        style={{
+          margin: '4px',
+          padding: '8px',
+          border: '4px solid orange',
+          borderRadius: '8px',
+          fontSize: '24px',
+        }}
+      >
+        Tiger
+      </div>
+      <div className={styles.alligator}>Alligator</div>
+    </div>
+  );
+}

src/ExampleStyling.module.scss

@@ -0,0 +1,7 @@
+.alligator {
+  margin: 10px;
+  padding: 12px;
+  border: 3px solid green;
+  border-radius: 8px;
+  font-size: 24px;
+}