Ein umfassender Leitfaden zum Erlernen von React.js

React.js, entwickelt und gepflegt von Facebook, hat sich zu einer der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen, insbesondere Single-Page-Anwendungen (SPAs), entwickelt. React ist für seine Flexibilität, Effizienz und Benutzerfreundlichkeit bekannt und verfügt über eine große Community und eine Fülle von Ressourcen für Entwickler auf allen Ebenen. Egal, ob Sie ein Anfänger oder ein erfahrener Entwickler sind, der React zu Ihren Fähigkeiten hinzufügen möchte, dieses Tutorial führt Sie durch die Grundlagen von React.js.

1. Was ist React.js?

React.js ist eine Open-Source-JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird, insbesondere für Einzelseitenanwendungen, bei denen Sie ein schnelles, interaktives Benutzererlebnis wünschen. Mit React können Entwickler große Webanwendungen erstellen, die als Reaktion auf Datenänderungen effizient aktualisiert und gerendert werden können. Es ist komponentenbasiert, was bedeutet, dass die Benutzeroberfläche in kleine, wiederverwendbare Teile, sogenannte Komponenten, unterteilt ist.

2. Einrichten Ihrer Reaktionsumgebung

Bevor Sie mit dem Codieren beginnen, müssen Sie Ihre Entwicklungsumgebung einrichten. Befolgen Sie diese Schritte:

Schritt 1: Node.js und npm installieren

• Node.js: React benötigt Node.js für seine Build-Tools.
• npm: Node Package Manager (npm) wird zum Installieren von Bibliotheken und Paketen verwendet.

Sie können Node.js von der offiziellen Website herunterladen und installieren. npm wird im Paket mit Node.js geliefert.

Schritt 2: Create React App installieren

Facebook hat ein Tool namens „Create React App“ erstellt, mit dem Sie schnell und effizient ein neues React-Projekt einrichten können. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npx create-react-app my-app

Dieser Befehl erstellt ein neues Verzeichnis namens my-app mit allen notwendigen Dateien und Abhängigkeiten, um ein React-Projekt zu starten.

Schritt 3: Starten Sie den Entwicklungsserver

Navigieren Sie in Ihr Projektverzeichnis und starten Sie den Entwicklungsserver:

cd my-app
npm start

Ihre neue React-App sollte jetzt auf http://localhost:3000 ausgeführt werden.

3. Reaktionskomponenten verstehen

Bei React dreht sich alles um Komponenten. Eine Komponente in React ist ein eigenständiges Modul, das eine Ausgabe rendert, normalerweise HTML. Komponenten können entweder als Funktionskomponenten oder Klassenkomponenten definiert werden.

Funktionskomponenten

Eine funktionale Komponente ist eine einfache JavaScript-Funktion, die HTML zurückgibt (unter Verwendung von JSX).

Beispiel:

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

Klassenkomponenten

Eine Klassenkomponente ist eine leistungsfähigere Möglichkeit, Komponenten zu definieren und ermöglicht Ihnen die Verwaltung lokaler Status- und Lebenszyklusmethoden.

Beispiel:

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

4. JSX – JavaScript XML

JSX ist eine Syntaxerweiterung für JavaScript, die HTML ähnelt. Es ermöglicht Ihnen, HTML direkt in JavaScript zu schreiben, das React dann in echte DOM-Elemente umwandelt.

Beispiel:

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

JSX erleichtert das Schreiben und Visualisieren der Struktur Ihrer Benutzeroberfläche. Unter der Haube wird JSX jedoch in React.createElement()-Aufrufe konvertiert.

5. Staat und Requisiten

Requisiten

Props (kurz für „Eigenschaften“) werden verwendet, um Daten von einer Komponente an eine andere weiterzugeben. Sie sind unveränderlich, das heißt, sie können von der empfangenden Komponente nicht geändert werden.

Beispiel:

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

Staat

Der Status ähnelt Requisiten, wird jedoch innerhalb der Komponente verwaltet und kann sich im Laufe der Zeit ändern. Der Status wird häufig für Daten verwendet, die eine Komponente im Auge behalten muss, z. B. Benutzereingaben.

Beispiel:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

6. Umgang mit Ereignissen

Der Umgang mit Ereignissen in React ähnelt dem Umgang mit Ereignissen in DOM-Elementen. Es gibt jedoch einige syntaktische Unterschiede:

• React-Ereignisse werden in CamelCase statt in Kleinbuchstaben benannt.
• Mit JSX übergeben Sie eine Funktion als Ereignishandler und nicht einen String.

Beispiel:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

7. Lebenszyklusmethoden

Klassenkomponenten in React verfügen über spezielle Lebenszyklusmethoden, die es Ihnen ermöglichen, Code zu bestimmten Zeiten während der Lebensdauer der Komponente auszuführen. Dazu gehören:

• componentDidMount: Wird aufgerufen, nachdem die Komponente gemountet wurde.
• componentDidUpdate: Wird nach den Komponentenaktualisierungen aufgerufen.
• componentWillUnmount: Wird aufgerufen, bevor die Komponente ausgehängt wird.

Beispiel:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>{this.state.date.toLocaleTimeString()}</h1>
      </div>
    );
  }
}

8. Conditional Rendering

In React, you can create different views depending on the state of your component.

Example:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

9. Lists and Keys

When you need to display a list of data, React can render each item as a component. It’s important to give each item a unique "key" prop to help React identify which items have changed.

Example:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

10. React Hooks

React Hooks allow you to use state and other React features in functional components. Some of the most commonly used hooks include:

• useState: Allows you to add state to a functional component.
• useEffect: Lets you perform side effects in your function components.
• useContext: Provides a way to pass data through the component tree without having to pass props down manually at every level.

Example of useState:

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

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

11. Building and Deploying React Applications

Once your application is ready, you can build it for production. Use the following command:

npm run build

This will create an optimized production build of your React app in the build folder. You can then deploy it to any web server.

Conclusion

React.js is a powerful tool for building modern web applications. By understanding components, state management, event handling, and hooks, you can create dynamic and interactive user interfaces. This tutorial covers the basics, but React's ecosystem offers much more, including advanced state management with Redux, routing with React Router, and server-side rendering with Next.js.

As you continue your journey with React, remember to leverage the wealth of online resources, including the official React documentation, community forums, and tutorials. Happy coding!

Das obige ist der detaillierte Inhalt vonEin umfassender Leitfaden zum Erlernen von React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!