Als Entwickler verwenden wir eine Vielzahl von Tools und Open Source-Paketen, um unsere Arbeit zu erleichtern. Einige von ihnen werden in der gesamten Community so häufig verwendet, dass sie für JavaScript typisch zu sein scheinen. Dies ist jedoch nicht der Fall, und sie können die Art und Weise , wie Sie täglich Code schreiben, grundlegend ändern .

Eine dieser Technologien, die Sie wahrscheinlich bereits verwenden, ist JSX - eine XML-ähnliche Syntaxerweiterung für JavaScript . Es wurde vom Facebook-Team erstellt und soll die Entwicklererfahrung vereinfachen. Wie in der Spezifikation angegeben, lautete die Begründung für die Erstellung von JSX:

„… Um eine präzise und vertraute Syntax zum Definieren von Baumstrukturen mit Attributen zu definieren.“ ~ JSX Spec

Jetzt sagen Sie sich wahrscheinlich: "Hey, Ryan, das klingt großartig, aber kommen Sie schon zum Code. " Hier ist unser erstes Beispiel.

const helloWorld = 
Hello, World!
;

Und das ist es!

Das obige Code-Snippet kommt Ihnen bekannt vor, aber haben Sie jemals darüber nachgedacht, wie leistungsfähig es ist? JSX macht es so, dass wir Baumstrukturen, die aus HTML- oder React-Elementen bestehen, so weitergeben können, als wären sie Standard-JavaScript-Werte.

Während Sie beim Schreiben von React nicht JSX verwenden müssen (oder React verwenden müssen, um JSX zu testen), ist es unbestreitbar, dass es ein wichtiger Teil des React-Ökosystems ist. Lassen Sie uns also eintauchen und sehen, was unter der Haube vor sich geht.

Erste Schritte mit JSX

Bei der Verwendung der JSX-Syntax ist zunächst zu beachten, dass React im Gültigkeitsbereich sein muss. Dies liegt daran, wie es kompiliert wird. Nehmen Sie diese Komponente zum Beispiel:

function Hello() { return 
Hello, World!
}

Hinter den Kulissen wird jedes von der HelloKomponente gerenderte Element in einen React.createElementAufruf umgewandelt.

In diesem Fall:

function Hello() { return React.createElement("h1", {}, "Hello, World!")}

Gleiches gilt für verschachtelte Elemente. Die beiden folgenden Beispiele würden letztendlich das gleiche Markup wiedergeben.

// Example 1: Using JSX syntaxfunction Nav() { return ( 
Home
About
Portfolio
Contact
 );}

// Example 2: Not using JSX syntaxfunction Nav() { return ( React.createElement( "ul", {}, React.createElement("li", null, "Home"), React.createElement("li", null, "About"), React.createElement("li", null, "Portfolio"), React.createElement("li", null, "Contact") ) );}

React.createElement

Wenn React Elemente erstellt, wird diese Methode aufgerufen, die drei Argumente akzeptiert.

1. Der Elementname
2. Ein Objekt, das die Requisiten des Elements darstellt
3. Ein Array der untergeordneten Elemente des Elements

Hierbei ist zu beachten, dass React Kleinbuchstaben als HTML- und Pascal-Elemente (z. B. ThisIsPascalCase) als benutzerdefinierte Komponenten interpretiert. Aus diesem Grund würden die folgenden Beispiele unterschiedlich interpretiert.

// 1. HTML elementReact.createElement("div", null, "Some content text here")

// 2. React elementReact.createElement(Div, null, "Some content text here")

Das erste Beispiel würde a erzeugen iv> with the string "Some content text here" as its child. However, the second version would throw an error (unless, of course, a custom component <Div /> was in scope) because is undefined.

Props in JSX

When working in React, your components often render children and need to pass them data in order for the children to render properly. These are called props.

I like to think of React components as a group of friends. And what do friends do? They give each other props. Thankfully, JSX offers us a number of ways to do that.

// 1. Props defaulted to true

// 2. String literals

// 3. JavaScript expressions

// 4. Spread attributes

But beware! You cannot pass if statements or for loops as props because they are statements, not expressions.

Children in JSX

As you are building your app, you eventually start having components render children. And then those components sometimes have to render children. And so on and so forth.

Since JSX is meant to make it easy for us to reason about tree-like structures of elements, it makes all of this very easy. Basically, whatever elements a component returns become its children.

There are four ways to render child elements using JSX:

Strings

This is the simplest example of JSX children. In the case below, React creates a <h1> HTML element with one child. The child, however, is not another HTML element, just a simple string.

function AlertBanner() { return ( 
Your bill is due in 2 days
 )}

JSX Elements

This is probably the use case that new React developers would be most familiar with. In the component below, we’re returning an HTML child (the er>), which has two children of its own <Nav /> and <ProfilePic /> both of which are custom defined JSX elements.

function Header(props) { return (     )}

Expressions

Expressions allow us to easily render elements in our UI that are the result of a JavaScript computation. A simple example of this would be basic addition.

Say we have a component called /> that renders information about a bill or receipt. Let’s assume it takes one prop called total that represents the pre-tax cost and another prop taxRate, which represents the applicable tax rate.

Using expressions, we can easily render out some useful information for our users!

function BillFooter(props) { return ( 
Tax: {props.total * props.taxRate}
Total: {props.total + props.total * props.taxRate}
 );}

Functions

With functions, we can programmatically create elements and structures, which React will then render for us. This makes it easy to create multiple instances of a component or render repeated UI elements.

As an example, let’s use JavaScript’s .map() function to create a navigation bar.

// Array of page informationconst pages = [ { id: 1, text: "Home", link: "/" }, { id: 2, text: "Portfolio", link: "/portfolio" }, { id: 3, text: "Contact", link: "/contact" }];// Renders a 
 with programmatically created 
 childrenfunction Nav() { return ( 
 {pages.map(page => { return ( 
 {page.text} 
 ); })} 
 );}

Now, if we want to add a new page to our site, all we need to do is add a new object to the pages array and React will take care of the rest!

Take note of the key prop. Our function returns an array of sibling elements, in this case <li>s, and React needs a way to keep track of which mounts, unmounts or updates. To do that, it relies on this unique identifier for each element.

Use the tools!

Sure, you can write React applications without JSX, but I’m not really sure why you’d want to.

The ability JSX gives us to pass around elements in JavaScript like they were first-class citizen lends itself well to working with the rest of the React ecosystem. So well, in fact, you may have been writing it every day and not even known it.

Bottom line: just use JSX. You’ll be happy you did.