Eine kurze Einführung in React.js

React ermöglicht die Erstellung dynamischer Websites, die vollständig im Browser gerendert werden. Sein Kernelement ist JSX, eine Syntax, die HTML und XML ähnelt.

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

Anschauliche Beispiele

HTML

<code class="language-html"><div>
  <h1>This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div></code>

XML

<code class="language-xml"><example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example></code>

JSX

<code class="language-javascript">function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}</code>

Die Ähnlichkeit zwischen HTML, XML und JSX ist offensichtlich. JSX integriert HTML auf einzigartige Weise in JavaScript, daher der Name: JavaScript XML.

Diese Fusion von HTML und JavaScript ermöglicht eine dynamische HTML-Manipulation. Beispielsweise könnte durch Klicken auf eine Schaltfläche ein Klassenname umgeschaltet werden.

Komponenten reagieren

React erleichtert die Definition benutzerdefinierter Komponenten, die JSX zurückgeben. Im Wesentlichen ist eine React-Komponente eine JavaScript-Funktion, die JSX generiert.

Beim Rendern einer Root-React-Komponente wird JSX automatisch in HTML konvertiert und in die Webseite integriert. React ermöglicht das Erstellen benutzerdefinierter Komponenten (ähnlich benutzerdefinierten Tags) zur Einbindung in andere Komponenten.

Hier ist eine Komponente, die ExampleReactComponent verwendet:

<code class="language-javascript">function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}</code>

Requisiten

Ähnlich wie HTML-Attribute verwenden React-Komponenten Requisiten.

<code class="language-javascript">function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}</code>

Das Rendern von MainComponent ruft PropsExample mit { exampleValue: "example-value" } als props-Argument auf. Beachten Sie, dass JavaScript-Variablen mithilfe von {}.

in JSX eingebettet werden

Staat

Daten werden normalerweise zur Anzeige in Variablen gespeichert. React nutzt „State“ für die Datenverwaltung und fungiert als Getter/Setter-Mechanismus. Wenn der Status geändert wird, aktualisiert React automatisch den HTML-Code der Komponente.

Dieses Beispiel zeigt automatische HTML-Updates bei Statusänderungen:

<code class="language-javascript">import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}</code>

React-Apps mit Vite erstellen

Tools wie Vite optimieren die Bündelung von React-Komponenten und JSX in browserausführbares JavaScript.

So starten Sie ein React-Projekt:

<code class="language-bash">npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev</code>

Fazit

Diese Einführung in React.js vermittelt ein grundlegendes Verständnis. Experimentieren Sie nach dem Einrichten eines Vite-Projekts mit der Erstellung von React-Komponenten, um Ihr Verständnis zu vertiefen. Weitere Lernressourcen finden Sie unter https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!