React-Grundlagen: Von React zu Next.js

Bisher haben wir untersucht, wie Sie mit React beginnen können. So sah der finale Code aus. Wenn Sie hier starten, fügen Sie diesen Code in eine index.html-Datei in Ihrem Code-Editor ein.

index.html

<html>
  <body>
    <div id="app"></div>
 
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <script type="text/jsx">
      const app = document.getElementById("app")
 
      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }
 
      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
 
        const [likes, setLikes] = React.useState(0)
 
        function handleClick() {
          setLikes(likes + 1)
        }
 
        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
 
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }
 
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

In den letzten Kapiteln wurden Ihnen drei wesentliche React-Konzepte vorgestellt: Komponenten, Props und State. Eine solide Grundlage in diesen Bereichen hilft Ihnen beim Einstieg in die Entwicklung von React-Anwendungen.

Wenn es um das Lernen von React geht, ist der beste Weg zu lernen, durch Bauen. Sie können React schrittweise über <script>-Tags und das bisher Gelernte nutzen, um kleine Komponenten zu einer bestehenden Website hinzuzufügen. Viele Entwickler haben jedoch festgestellt, dass die Benutzer- und Entwicklungserfahrung, die React ermöglicht, wertvoll genug ist, um direkt mit der Entwicklung ihrer gesamten Frontend-Anwendung in React zu beginnen.

Von React zu Next.js

Während React hervorragend für den Aufbau von Benutzeroberflächen geeignet ist, erfordert es einige Arbeit, diese eigenständig in eine voll funktionsfähige und skalierbare Anwendung zu integrieren. Es gibt auch neuere React-Funktionen wie Server- und Client-Komponenten, die ein Framework erfordern. Die gute Nachricht ist, dass Next.js einen Großteil der Einrichtung und Konfiguration übernimmt und zusätzliche Funktionen bietet, die Ihnen beim Aufbau von React-Anwendungen helfen.

Als Nächstes werden wir das Beispiel von React zu Next.js migrieren, besprechen, wie Next.js funktioniert, und Sie mit den Unterschieden zwischen Server- und Client-Komponenten vertraut machen.

Von React zu Next.js

Von React zu Next.js

On this page