Ein Leitfaden für Anfänger zum Reagieren: Erste Schritte mit den Grundlagen

React ist zu einem Eckpfeiler der modernen Webentwicklung geworden und wird für seine Effizienz, Flexibilität und sein robustes Ökosystem gefeiert. React wurde von Facebook entwickelt und vereinfacht den Prozess der Erstellung interaktiver Benutzeroberflächen, indem es Entwicklern ermöglicht, wiederverwendbare UI-Komponenten zu erstellen.

Egal, ob Sie komplexe Single-Page-Anwendungen erstellen oder einfach nur Ihre Webentwicklungsfähigkeiten verbessern möchten, die Beherrschung von React ist von großem Nutzen.

In diesem Leitfaden führen wir Sie durch die wesentlichen Konzepte und Schritte für den Einstieg in React, einschließlich der Einrichtung Ihrer Entwicklungsumgebung, dem Verständnis der React-Grundlagen und der Erstellung Ihrer ersten Komponente.

Was ist Reagieren?

React ist eine JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird, insbesondere für Einzelseitenanwendungen, bei denen Sie ein dynamisches und interaktives Benutzererlebnis benötigen. Im Kern ermöglicht React Entwicklern, gekapselte Komponenten zu erstellen, die ihren eigenen Zustand verwalten, und diese zu komplexen Benutzeroberflächen zusammenzusetzen. Der deklarative Charakter von React erleichtert das Nachdenken über Ihre Anwendung, während die komponentenbasierte Architektur die Wiederverwendbarkeit und Wartbarkeit fördert.

Kurze Geschichte und Entwicklung der Reaktion

React wurde erstmals 2013 von Facebook veröffentlicht und erlangte aufgrund seines innovativen Ansatzes zur Erstellung von Benutzeroberflächen schnell Anklang. Im Gegensatz zu herkömmlichen Bibliotheken und Frameworks, die das DOM direkt manipulieren, führte React das Konzept des virtuellen DOM ein. Diese Abstraktion ermöglicht es React, das Rendering zu optimieren, indem nur Teile der Benutzeroberfläche aktualisiert werden, die sich geändert haben, was zu einer effizienteren Leistung führt.

Seit seiner Einführung hat sich React erheblich weiterentwickelt und Funktionen wie Hooks, Kontext-API und gleichzeitiges Rendering eingeführt. Die Bibliothek verfügt über ein lebendiges Ökosystem mit zahlreichen Tools, Bibliotheken und Frameworks, die ihre Fähigkeiten weiter verbessern.

Hauptmerkmale von React

1. Komponentenbasierte Architektur: Der komponentenbasierte Ansatz von React ermöglicht es Entwicklern, komplexe Benutzeroberflächen in kleinere, wiederverwendbare Teile zu zerlegen, jedes mit seiner eigenen Logik und seinem eigenen Rendering.

2. Virtuelles DOM: Das virtuelle DOM ist eine speicherinterne Darstellung des realen DOM. React nutzt dieses virtuelle DOM, um die Benutzeroberfläche effizient zu aktualisieren, indem es sie mit dem vorherigen Zustand vergleicht und nur die notwendigen Änderungen anwendet.

3. Deklarative Syntax: Die deklarative Syntax von React erleichtert das Entwerfen von Benutzeroberflächen, indem sie beschreibt, wie die Benutzeroberfläche für einen bestimmten Status aussehen soll, anstatt anzugeben, wie die Benutzeroberfläche geändert werden soll.

4. Unidirektionaler Datenfluss: React erzwingt einen unidirektionalen Datenfluss, was bedeutet, dass Daten von übergeordneten Komponenten zu untergeordneten Komponenten fließen, was die Verfolgung und Verwaltung von Zustandsänderungen erleichtert.

Einrichten der Entwicklungsumgebung

Bevor Sie sich mit React befassen, sollten Sie über grundlegende Kenntnisse in HTML, CSS und JavaScript verfügen. Wenn Sie mit diesen Technologien vertraut sind, können Sie React-Konzepte besser verstehen, da React auf diesen grundlegenden Webtechnologien aufbaut.

Node.js und npm installieren

React-Entwicklung erfordert Node.js und npm (Node Package Manager), die zum Verwalten von Projektabhängigkeiten und zum Ausführen von Entwicklungstools verwendet werden.

So installieren Sie Node.js und npm:

1. Node.js herunterladen und installieren: Gehen Sie zur offiziellen Website von Node.js und laden Sie die neueste LTS-Version (Long Term Support) für Ihr Betriebssystem herunter. Dieses Installationspaket enthält npm.

2. Installation überprüfen: Öffnen Sie nach der Installation ein Terminal (oder eine Eingabeaufforderung) und führen Sie die folgenden Befehle aus, um zu überprüfen, ob Node.js und npm korrekt installiert sind:
   

   node -v
   npm -v

Sie sollten Versionsnummern sowohl für Node.js als auch für npm sehen, was bestätigt, dass die Installation erfolgreich war.

Erstellen einer Reaktionsanwendung

Der einfachste Weg, mit React zu beginnen, ist die Verwendung des Create-React-App-Tools, das ein neues React-Projekt mit einer sinnvollen Standardkonfiguration einrichtet.

Schritt-für-Schritt-Anleitung zum Initialisieren eines neuen React-Projekts:

1. create-react-app global installieren: Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

   npx create-react-app my-app

Ersetzen Sie my-app durch den gewünschten Projektnamen. Dieser Befehl erstellt ein neues Verzeichnis mit dem angegebenen Namen und richtet darin ein React-Projekt ein.

1. Navigate to Your Project Directory:

   cd my-app

1. Start the Development Server:

   npm start

This command runs the development server and opens your new React application in your default web browser. You should see a default React welcome page, indicating that everything is set up correctly.

Understanding React Basics

Components are the building blocks of a React application. They encapsulate UI elements and logic, making it easier to manage and reuse code. Components can be classified into two types:

1. Functional Components: These are JavaScript functions that return React elements. They are often used for simple, stateless components.

Example:

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }

1. Class Components: These are ES6 classes that extend React.Component and include a render method. They are used for more complex components with local state and lifecycle methods.

Example:

   class Welcome extends React.Component {
     render() {
       return <h1>Hello, {this.props.name}</h1>;
     }
   }

JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes it easier to create React elements and components.

How JSX is Transformed into JavaScript:

JSX is not valid JavaScript by itself. During the build process, a tool like Babel transforms JSX into regular JavaScript. For example:

JSX:

const element = <h1>Hello, world!</h1>;

Transformed JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

Props (Properties)

Props are used to pass data from a parent component to a child component. They are read-only and help make components reusable.

Example of Passing Props to a Component:

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

function App() {
  return <Greeting username="Alice" />;
}

In this example, the Greeting component receives a username prop from the App component and displays it.

State

State allows components to manage their own data and react to user interactions. In functional components, the useState hook is used to manage state.

Introduction to the useState Hook:

The useState hook is a function that returns an array with two elements: the current state value and a function to update it.

Example of State Management Using useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, the Counter component maintains a count state. Clicking the button updates the state, and the UI reflects the new count value.

Building Your First React Component

Let’s create a simple functional component to display a greeting message.

Step-by-Step Example:

1. Create a New File: In the src directory of your project, create a file named Greeting.js.

2. Define the Component:
   

   import React from 'react';

   function Greeting() {
     return <h1>Hello, React!</h1>;
   }

   export default Greeting;

1. Render the Component: Open src/App.js and render the Greeting component.

   import React from 'react';
   import Greeting from './Greeting';

   function App() {
     return (
       <div className="App">
         <Greeting />
       </div>
     );
   }

   export default App;

Adding Basic Styles

You can style your components using inline styles or external CSS files. Here’s how to add basic styles:

1. Inline Styles:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return <h1 style={style}>Hello, styled React!</h1>;
   }

1. External CSS: Create a CSS file (Greeting.css) in the src directory.

   .greeting {
     color: green;
     text-align: center;
   }

Import the CSS file in Greeting.js and apply the class:

   import React from 'react';
   import './Greeting.css';

   function Greeting() {
     return <h1 className="greeting">Hello, styled React!</h1>;
   }

   export default Greeting;

Conclusion

React is a powerful library that enables developers to build dynamic and interactive user interfaces efficiently. In this guide, we covered the basics of React, including its core concepts, setting up the development environment, understanding components, JSX, props, and state, and building your first component. We also explored styling options to enhance your components.

Das obige ist der detaillierte Inhalt vonEin Leitfaden für Anfänger zum Reagieren: Erste Schritte mit den Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!