React - Komponenten (Components) und JSX

Was sind (React) Komponenten?

Jede Webseite kann in kleinere Einheiten eingeteilt werden. Ein Beispiel für eine Einteilung kann wie folgt aussehen:

Der React Code zu dieser Webseite kann wie folgt aussehen:

//App.jsx
import { useState } from 'react';
import { CORE_CONCEPTS } from './data.js';
import Header from './components/Header/Header.jsx';
import CoreConcept from './components/CoreConcept.jsx';
import TabButton from './components/TabButton.jsx';
import { EXAMPLES } from './data.js';

function App() {
  const [selectedTopic, setSelectedTopic] = useState();
  function handleSelect(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>
        <pre>
          <code>{EXAMPLES[selectedTopic].code}</code>
        </pre>
      </div>
    );
  }
  return (
    <div>
      <Header />
      <main>
        <section id="core-concepts">
          <h2>Core Concepts</h2>
          <ul>
            {CORE_CONCEPTS.map((conceptItem) => (
              <CoreConcept key={conceptItem.title} {...conceptItem} />
            ))}
          </ul>
        </section>
        <section id="examples">
          <h2>Examples</h2>
          <menu>
            <TabButton
              isSelected={selectedTopic === 'components'}
              onSelect={() => handleSelect('components')}
            >
              Components
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'jsx'}
              onSelect={() => handleSelect('jsx')}
            >
              JSX
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'props'}
              onSelect={() => handleSelect('props')}
            >
              Props
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'state'}
              onSelect={() => handleSelect('state')}
            >
              State
            </TabButton>
          </menu>
          {tabContent}
        </section>
      </main>
    </div>
  );
}
export default App;

//Header.jsx
import reactImg from '../../assets/react-core-concepts.png';
import './Header.css';

const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
function genRandomInt(max) {
  return Math.floor(Math.random() * (max + 1));
}

export default function Header() {
  const description = reactDescriptions[genRandomInt(2)];
  return (
    <header>
      <img src={reactImg} alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        {description} React concepts you will need for almost any app you are
        going to build!
      </p>
    </header>
  );
}

//CoreConcept.jsx
export default function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

//TabButton.jsx
export default function TabButton({ children, onSelect, isSelected }) {
  return (
    <li>
      <button className={isSelected ? 'active' : undefined} onClick={onSelect}>
        {children}
      </button>
    </li>
  );
}

Wir können sehen, dass die React Dateien mit einem jsx enden. Das ist eine Erweiterung von Javascript. React wandelt den Code (in HTML, CSS und JavaScript) um, denn der Browser unterstützt keinen React Code. Der Rückgabewert einer React Komponente ist der JSX Code.

Was sind die Vorteile eine komponenten basierenden React Anwendung?

Selbst bei dieser überschaubaren Anwendung können wir sehr gut erkennen, dass eine fachliche Aufteilung den Code überschaubarer macht und uns ermöglicht Komponenten auf verschiedenen Seiten wiederzuverwenden. Beispielsweise können wir die Interactive Tabs auf einer anderen Seite (wenn die Anwendung das hergibt) verwenden ohne doppelten Code schreiben zu müssen.

Die mögliche Ordnerstruktur kann daher wie folgt aussehen:

/
├── src/
│   ├── components/
│   │   |  Header.jsx
│   │   |  CoreConcept.jsx
│   │   |  TabButton.jsx
│   │   |  legal
│   ├── App.jsx
│   └── data.js