Revert formatting in "importing and exporting components"

Author: jakubdrozdek

beta/src/pages/learn/importing-and-exporting-components.md

@@ -10,23 +10,28 @@ The magic of components lies in their reusability: you can create components tha
 
 <YouWillLearn>
 
-- What a root component file is
-- How to import and export a component
-- When to use default and named imports and exports
-- How to import and export multiple components from one file
-- How to split components into multiple files
+* What a root component file is
+* How to import and export a component
+* When to use default and named imports and exports
+* How to import and export multiple components from one file
+* How to split components into multiple files
 
 </YouWillLearn>
 
-## The root component file {/_the-root-component-file_/}
+## The root component file {/*the-root-component-file*/}
 
 In [Twój pierwszy komponent](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
 
 <Sandpack>
 
 ```js
 function Profile() {
-  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
+  return (
+    <img
+      src="https://i.imgur.com/MK3eW3As.jpg"
+      alt="Katherine Johnson"
+    />
+  );
 }
 
 export default function Gallery() {
@@ -42,17 +47,14 @@ export default function Gallery() {
 ```
 
 ```css
-img {
-  margin: 0 10px 10px 0;
-  height: 90px;
-}
+img { margin: 0 10px 10px 0; height: 90px; }
 ```
 
 </Sandpack>
 
 These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
 
-## Exporting and importing a component {/_exporting-and-importing-a-component_/}
+## Exporting and importing a component {/*exporting-and-importing-a-component*/}
 
 What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
 
@@ -68,13 +70,20 @@ Here both `Profile` and `Gallery` have been moved out of `App.js` into a new fil
 import Gallery from './Gallery.js';
 
 export default function App() {
-  return <Gallery />;
+  return (
+    <Gallery />
+  );
 }
 ```
 
 ```js Gallery.js
 function Profile() {
-  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
 }
 
 export default function Gallery() {
@@ -90,28 +99,26 @@ export default function Gallery() {
 ```
 
 ```css
-img {
-  margin: 0 10px 10px 0;
-  height: 90px;
-}
+img { margin: 0 10px 10px 0; height: 90px; }
 ```
 
 </Sandpack>
 
 Notice how this example is broken down into two component files now:
 
 1. `Gallery.js`:
-   - Defines the `Profile` component which is only used within the same file and is not exported.
-   - Exports the `Gallery` component as a **default export**.
+     - Defines the `Profile` component which is only used within the same file and is not exported.
+     - Exports the `Gallery` component as a **default export**.
 2. `App.js`:
-   - Imports `Gallery` as a **default import** from `Gallery.js`.
-   - Exports the root `App` component as a **default export**.
+     - Imports `Gallery` as a **default import** from `Gallery.js`.
+     - Exports the root `App` component as a **default export**.
+
 
 <Note>
 
 You may encounter files that leave off the `.js` file extension like so:
 
-```js
+```js 
 import Gallery from './Gallery';
 ```
 
@@ -127,20 +134,20 @@ There are two primary ways to export values with JavaScript: default exports and
 
 How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
 
-| Syntax  | Export statement                      | Import statement                        |
-| ------- | ------------------------------------- | --------------------------------------- |
-| Default | `export default function Button() {}` | `import Button from './button.js';`     |
-| Named   | `export function Button() {}`         | `import { Button } from './button.js';` |
+| Syntax           | Export statement                           | Import statement                          |
+| -----------      | -----------                                | -----------                               |
+| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
+| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
 
 When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
 
 **People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/_exporting-and-importing-multiple-components-from-the-same-file_/}
+## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a _default_ export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a _named_ export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
 
 > To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. It's a matter of preference. Do what works best for you!
 
@@ -155,7 +162,7 @@ export function Profile() {
 Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
 
 ```js
-import {Profile} from './Gallery.js';
+import { Profile } from './Gallery.js';
 ```
 
 Finally, **render** `<Profile />` from the `App` component:
@@ -172,16 +179,23 @@ Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `
 
 ```js App.js
 import Gallery from './Gallery.js';
-import {Profile} from './Gallery.js';
+import { Profile } from './Gallery.js';
 
 export default function App() {
-  return <Profile />;
+  return (
+    <Profile />
+  );
 }
 ```
 
 ```js Gallery.js
 export function Profile() {
-  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
 }
 
 export default function Gallery() {
@@ -197,20 +211,17 @@ export default function Gallery() {
 ```
 
 ```css
-img {
-  margin: 0 10px 10px 0;
-  height: 90px;
-}
+img { margin: 0 10px 10px 0; height: 90px; }
 ```
 
 </Sandpack>
 
 Now you're using a mix of default and named exports:
 
-- `Gallery.js`:
+* `Gallery.js`:
   - Exports the `Profile` component as a **named export called `Profile`**.
   - Exports the `Gallery` component as a **default export**.
-- `App.js`:
+* `App.js`:
   - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
   - Imports `Gallery` as a **default import** from `Gallery.js`.
   - Exports the root `App` component as a **default export**.
@@ -219,27 +230,29 @@ Now you're using a mix of default and named exports:
 
 On this page you learned:
 
-- What a root component file is
-- How to import and export a component
-- When and how to use default and named imports and exports
-- How to export multiple components from the same file
+* What a root component file is
+* How to import and export a component
+* When and how to use default and named imports and exports
+* How to export multiple components from the same file
 
 </Recap>
 
+
+
 <Challenges>
 
-### Split the components further {/_split-the-components-further_/}
+### Split the components further {/*split-the-components-further*/}
 
 Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
 
 Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
 
 You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
 
-| Syntax  | Export statement                      | Import statement                        |
-| ------- | ------------------------------------- | --------------------------------------- |
-| Default | `export default function Button() {}` | `import Button from './button.js';`     |
-| Named   | `export function Button() {}`         | `import { Button } from './button.js';` |
+| Syntax           | Export statement                           | Import statement                          |
+| -----------      | -----------                                | -----------                               |
+| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
+| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
 
 <Hint>
 
@@ -251,7 +264,7 @@ Don't forget to import your components where they are called. Doesn't `Gallery`
 
 ```js App.js
 import Gallery from './Gallery.js';
-import {Profile} from './Gallery.js';
+import { Profile } from './Gallery.js';
 
 export default function App() {
   return (
@@ -265,7 +278,12 @@ export default function App() {
 ```js Gallery.js active
 // Move me to Profile.js!
 export function Profile() {
-  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
 }
 
 export default function Gallery() {
@@ -281,14 +299,10 @@ export default function Gallery() {
 ```
 
 ```js Profile.js
-
 ```
 
 ```css
-img {
-  margin: 0 10px 10px 0;
-  height: 90px;
-}
+img { margin: 0 10px 10px 0; height: 90px; }
 ```
 
 </Sandpack>
@@ -303,7 +317,7 @@ This is the solution with named exports:
 
 ```js App.js
 import Gallery from './Gallery.js';
-import {Profile} from './Profile.js';
+import { Profile } from './Profile.js';
 
 export default function App() {
   return (
@@ -316,7 +330,7 @@ export default function App() {
 ```
 
 ```js Gallery.js
-import {Profile} from './Profile.js';
+import { Profile } from './Profile.js';
 
 export default function Gallery() {
   return (
@@ -332,15 +346,17 @@ export default function Gallery() {
 
 ```js Profile.js
 export function Profile() {
-  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
 }
 ```
 
 ```css
-img {
-  margin: 0 10px 10px 0;
-  height: 90px;
-}
+img { margin: 0 10px 10px 0; height: 90px; }
 ```
 
 </Sandpack>
@@ -378,6 +394,65 @@ export default function Gallery() {
 }
 ```
 
+```js Profile.js
+export default function Profile() {
+  return (
+    <img
+      src="https://i.imgur.com/QIrZWGIs.jpg"
+      alt="Alan L. Hart"
+    />
+  );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges> (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
+```js Profile.js
+export default function Profile() {
+  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
+}
+```
+
+```css
+img {
+  margin: 0 10px 10px 0;
+  height: 90px;
+}
+```
+
+</Sandpack>
+
+</Solution>
+
+</Challenges>
+ (
+    <section>
+      <h1>Amazing scientists</h1>
+      <Profile />
+      <Profile />
+      <Profile />
+    </section>
+  );
+}
+```
+
 ```js Profile.js
 export default function Profile() {
   return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;