reagieren Installation

Reagieren Sie können direkt die Download-Paket bietet auch viele Beispiele für das Lernen unter Verwendung heruntergeladen werden.

Dieses Tutorial verwendet Version Reagieren ist 0.14.7, Sie auf der offiziellen Website können http://facebook.github.io/react/ die neueste Version herunterladen.

Sie können auch dieses Tutorial, unter der folgenden Adresse Reagieren CDN Bibliothek direkt verwenden:

<script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.w3big.com/assets/react/browser.min.js"></script>

Beispiel

Die folgenden Beispiele für Ausgabe Hallo, Welt!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.w3big.com/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Versuchen »

Analyse Beispiele:

Beispiel haben wir drei Bibliotheken: react.min.js reagieren-dom.min.js und browser.min.js:

react.min.js - Reagieren Kern - Bibliothek
reagieren-dom.min.js - Bereitstellung von DOM-Funktionen im Zusammenhang mit
browser.min.js - für JSX Syntax in JavaScript - Syntax

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

Der obige Code eine h1 Überschrift, id = "Beispiel" Knoten einzufügen.

Hinweis:
Wenn wir die JSX verwenden müssen, das type-Attribut <script> Tag sollte auf text / babel eingestellt werden.

Reagieren von NPM mit

Wenn Ihr System nicht Node.js und NPM nicht unterstützt , kann auf unsere verweisen Node.js Tutorial .

Wir empfehlen die Verwendung eines modularen Systems in Commonjs Reaktion, so browserify oder webpack, dieses Tutorial verwendet webpack.

Installieren Sie zunächst das globale Paket

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

Als Nächstes erstellen Sie das Root-Verzeichnis

Erstellen Sie ein Stammverzeichnis, das Verzeichnis mit dem Namen: reactApp, dann npm init Initialisierungsdatei erzeugt package.json verwenden:

$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) w3big-react-test
version: (1.0.0) 
description: 本教程 react 测试
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/tianqixin/www/reactApp/package.json:

{
  "name": "w3big-react-test",
  "version": "1.0.0",
  "description": "本教程 react 测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

Der dritte Schritt ist Abhängigkeiten und Plug-Ins hinzufügen

Weil wir Reagieren verwenden wollen, so müssen wir es zu installieren, - Befehl speichern wird verwendet, um Pakete zu ergänzen Datei package.json.

$ npm install react --save
$ npm install react-dom --save

Zugleich müssen wir einigePlug-babel installieren

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

Der vierte Schritt ist es, eine Datei zu erstellen,

Als Nächstes erstellen wir die notwendigen Dateien:

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

Der fünfte Schritt, stellen Sie den Compiler, Server, Lader

Öffnenwebpack.config.js Datei fügen Sie den folgenden Code:

 var config = {
   entry: './main.js',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 7777
   },
	
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
			
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	
}

module.exports = config;

Eintritt: die Eintragung angegebenen Paketdatei main.js.
Ausgang: Konfigurationspaket Ergebnis Pfad definiert Ausgabeordner definiert Dateiname den Namen der Datei , um die Ergebnisse zu verpacken.
devserver: set der Server - Portnummer ist 7777,nach dem Anschluss , den Sie selbst festlegen können.
Modul: definiert die Verarbeitungslogik des Moduls, in dem Sie eine Reihe von Lader mit Lader, sowie einige regelmäßige definieren können.Wenn die Datei Testspiel der regulären Spielzeit zu laden, wird die Ladedatei zurückrufen verarbeitet wird, die webpack gewichtige Gründe ist.

Nun öffnenpackage.json Datei finden Sie die "Skripte"im"Test" "echo \" Fehler: kein Test angegeben \ "&& exit 1" mit dem folgenden Code zu ersetzen:

"start": "webpack-dev-server --hot"

Package.json Dateiinhalt nach dem Austausch wie folgt zusammen :

$ cat package.json 
{
  "name": "w3big-react-test",
  "version": "1.0.0",
  "description": "本教程 react 测试",
  "main": "index.js",
  "scripts": {
	"start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  }
}

Jetzt können wirNPM Startbefehl zu starten Sie den Dienst nutzen.--Heißes Befehl wird nach den Dateiänderungen neu zu laden, damit wir Ihr Browser nicht aktualisieren müssen , nachdem der Code modifizieren Lage sein wird , um die Änderung zu sehen.

Der sechste Schritt, index.html

Einstellendiv id = "app" als Stammelement unserer Anwendungen und die Einführung von index.jsSkriptdatei.

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App - 本教程(w3big.com)</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

Siebter Schritt, App.jsx und main.js

Dies ist die erste Komponente reagieren. Ein späteres Kapitel werden wir ausführlich Komponenten reagieren. Diese Komponente AusgabeHallo Welt !!!.

App.jsx Datei Code

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到本教程学习！！！
         </div>
      );
   }
}

export default App;

Wir brauchen die Komponente und gerendert mit dem WurzelelementApp, einzuführen , so dass wir es Ihrem Browser sehen können.

main.js Datei Code

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

Hinweis:
Wenn Sie die Komponente wollen , können in jeder Anwendung verwendet werden, exportieren sie die Verwendung vonExport erfordert , nachdem es erstellt wird, die Komponentendateien mit ImportImport verwenden.

Schritt acht, laufenden Dienste

Nach der obigen Konfiguration können wir den Service ausführen:

$ npm start

Browser aufhttp: // localhost: 7777 / Ausgangs Ergebnisse sind wie folgt:

Laden Sie die komplette Beispiel

Weitere Testfälle für jede Download - Adresse Datei: http://static.w3big.com/download/reactApp.zip .

Zurück: Reagieren Tutorial

Next: Reagieren JSX

React Kurs