fix(curriculum): minor improvements to React Basics Review (#57990)

curriculum/challenges/english/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md

@@ -37,15 +37,15 @@ Here is an example of a simple React component that renders a greeting message:
 
 ```jsx
 function Greeting() {
-    const name = 'Anna';
-    return <h1>Welcome, {name}!</h1>;
+  const name = 'Anna';
+  return <h1>Welcome, {name}!</h1>;
 }
 ```
 
 To use the component, you can simply call:
     
 ```jsx
-    <Greeting />
+  <Greeting />
 ```
 
 ## Importing and Exporting React components
@@ -56,7 +56,7 @@ To use the component, you can simply call:
 ```jsx
 // City.js
 function City() {
-    return <h1>New York</h1>;
+  return <p>New York</p>;
 }
 
 export default City;
@@ -69,12 +69,12 @@ export default City;
 import City from './City';
 
 function App() {
-    return (
-        <div>
-            <h1>My favorite city is:</h1>
-            <City />
-        </div>
-    );
+  return (
+    <div>
+      <h1>My favorite city is:</h1>
+      <City />
+    </div>
+  );
 }
 ```
 
@@ -84,7 +84,7 @@ function App() {
 
 ```jsx
 export default function City() {
-    return <h1>New York</h1>;
+  return <p>New York</p>;
 }
 ```
 
@@ -129,13 +129,13 @@ npm run dev
 ```jsx
 // Parent component
 function Parent() {
-    const name = 'Anna';
-    return <Child name={name} />;
+  const name = 'Anna';
+  return <Child name={name} />;
 }
 
 // Child component
 function Child(props) {
-    return <h1>Hello, {props.name}!</h1>;
+  return <h1>Hello, {props.name}!</h1>;
 }
 ```
 
@@ -144,12 +144,12 @@ You can pass multiple props using the spread operator `(...)`, after converting
 ```jsx
 // Parent component
 function Parent() {
-    const person = {
-        name: 'Anna',
-        age: 25,
-        city: 'New York'
-    };
-    return <Child {...person} />;
+  const person = {
+    name: 'Anna',
+    age: 25,
+    city: 'New York'
+  };
+  return <Child {...person} />;
 }
 ```
 
@@ -162,11 +162,11 @@ In this code, the spread operator `{...person}` converts the person object into
 
 ```jsx
 function Greeting({ isLoggedIn }) {
-    return (
-        <div>
-            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
-        </div>
-    );
+  return (
+    <div>
+      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
+    </div>
+  );
 }
 ```
 
@@ -174,11 +174,11 @@ function Greeting({ isLoggedIn }) {
 
 ```jsx
 function Greeting({ user }) {
-    return (
-        <div>
-            {user && <h1>Welcome, {user.name}!</h1>}
-        </div>
-    );
+  return (
+    <div>
+      {user && <h1>Welcome, {user.name}!</h1>}
+    </div>
+  );
 }
 ```
 
@@ -192,13 +192,13 @@ In the code above, the `h1` element is only rendered if the user object is truth
 
 ```jsx
 function NameList({ names }) {
-    return (
-        <ul>
-            {names.map((name, index) => (
-                <li key={index}>{name}</li>
-            ))}
-        </ul>
-    );
+  return (
+    <ul>
+      {names.map((name, index) => (
+        <li key={index}>{name}</li>
+      ))}
+    </ul>
+  );
 }
 ```
 
@@ -211,13 +211,13 @@ function NameList({ names }) {
 
 ```jsx
 function Greeting() {
-    const styles = {
-        color: 'blue',
-        fontSize: '24px',
-        backgroundColor: 'lightgray'
-    };
+  const styles = {
+    color: 'blue',
+    fontSize: '24px',
+    backgroundColor: 'lightgray'
+  };
 
-    return <h1 style={styles}>Hello, world!</h1>;
+  return <h1 style={styles}>Hello, world!</h1>;
 }
 ```
 
@@ -225,12 +225,12 @@ function Greeting() {
 
 ```jsx
 function Greeting({ isImportant }) {
-    const styles = {
-        color: isImportant ? 'red' : 'black',
-        fontSize: isImportant ? '24px' : '16px'
-    };
+  const styles = {
+    color: isImportant ? 'red' : 'black',
+    fontSize: isImportant ? '24px' : '16px'
+  };
 
-    return <h1 style={styles}>Hello, world!</h1>;
+  return <h1 style={styles}>Hello, world!</h1>;
 }
 ```