Latest web development tutorials

reagieren JSX

Reagieren die herkömmliche Verwendung von JSX JavaScript zu ersetzen.

JSX sieht aus wie XML eine Erweiterung der JavaScript-Syntax ist.

Wir geben nicht unbedingt die JSX verwenden, aber es hat die folgenden Vorteile:

  • JSX schneller ausgeführt, weil es in den JavaScript-Code nach der Optimierung kompiliert wird.
  • Es ist typsicher, kann es während der Kompilierung Fehler gefunden werden.
  • Verwenden Sie JSX Authoring-Schablone einfacher und schneller.

Verwenden Sie JSX

JSX sieht HTML sehr ähnlich, wir Beispiele sehen können: 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

Wir können über mehrere HTML - Tags im Code verschachtelt werden, müssen SieDaten-MyAttribute Attribut hinzufügen Attribute benutzerdefinierte benutzerdefinierte Instanzen p - Element ein div Element zu verwenden,verwenden müssenFalldatenPräfix umgibt, ergänzt. 

ReactDOM.render(
	<div>
	<h1>本教程</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

Versuchen »

Unabhängige Datei

Ihre Reaktion JSX Code kann auf einem separaten Dokument, beispielsweise platziert werden, erstellen wir eine helloworld_react.js Datei wie folgt: 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Dann stellte in die JS-Datei in der HTML-Datei: 

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

Versuchen »

JavaScript-Ausdruck

Wir können JavaScript Ausdrücke in der JSX nutzen. Schreiben Sie einen Ausdruck in geschweiften Klammern{}.Beispiele sind wie folgt: 

ReactDOM.render(
	<div>
	  <h1>{1+1}</h1>
	</div>
	,
	document.getElementById('example')
);

Versuchen »

Sie können nicht verwendet werden,wenn sonst Aussagen in JSX, eine einzige Stelle die bedingte (ternäre Operator)Ausdruck verwenden können. Das folgende Beispiel, wenn die Variablei gleich 1- Browser ausgeben wirdwahr,wenn Sie den Wert von i ändern, gibt erfalsch.

ReactDOM.render(
	<div>
	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

Versuchen »

Stil

Reagieren empfehlen Inline-Styles verwenden. Wir könnenCamelcase - Syntax verwenden Inline - Stile festlegen. React fügt pxautomatisch nach einer bestimmten Elementnummer. Das folgende Beispiel zeigt das HinzufügenmyStyle Inline - Stil für h1Elemente: 

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>本教程</h1>,
	document.getElementById('example')
);

Versuchen »

Note

Hinweis müssen in Klammern zu schreiben, Beispiele sind wie folgt: 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

Versuchen »

Feld

JSX ermöglicht das Einfügen in das Template-Array, wird das Array automatisch an alle Mitglieder zu erweitern: 

var arr = [
  <h1>本教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

Versuchen »

HTML-Tags vs. Montage Reagieren

Reagieren Sie können HTML-Tags (Strings) oder Reagieren Komponenten (Klassen) zu machen.

Um machen HTML-Tags, verwenden Sie einfach den Tag-Namen in Kleinbuchstaben in der JSX. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

Reagieren Komponente zu machen, erstellen Sie einfach eine lokale Variable zu Beginn mit einem Großbuchstaben. 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

Reagieren die JSX verwenden Groß- und Kleinschreibung Konventionen Klassen von lokalen Komponenten und HTML-Tags zu unterscheiden.

Hinweis:

Da JSX ist JavaScript, um eine Anzahl von Kennungen wie class und for nicht als XML - Attributnamen empfohlen. Als Alternative Reagieren DOM verwenden className und htmlFor die entsprechende Eigenschaft zu tun.