Latest web development tutorials

React instalację

React można pobrać bezpośrednio za pomocą pakietu do pobrania dostarcza również wiele przykładów uczenia się.

Ten poradnik wykorzystuje React wersja jest 0.14.7, można na oficjalnej stronie http://facebook.github.io/react/~~HEAD=pobj pobrać najnowszą wersję.

Można również skorzystać z bezpośredniego ten poradnik React bibliotekę CDN, pod następującym adresem: 

<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>

przykład

Poniższe przykłady wyjściowego Hello, World! 

<!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>

Spróbuj »

Przykłady analizy:

Przykład wprowadziliśmy trzy biblioteki: react.min.js reagują-dom.min.js i browser.min.js:

  • react.min.js - React rdzenia biblioteki
  • reagują-dom.min.js - zapewniając funkcje związane DOM
  • browser.min.js - dla JSX składni w składni JavaScript 
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

Powyższy kod nagłówek h1, włóż id = "przykład" węzła.

Uwaga:

Jeśli musimy użyć JSX, atrybut type <script> tag powinien być ustawiony na tekst / babel.

React za pomocą NPM

Jeśli system nie obsługuje node.js i NPM może odnosić się do naszego poradnika node.js .

Zalecamy korzystanie z systemu modułowego w CommonJS React, takich browserify lub WebPACK, ten poradnik wykorzystuje WebPACK.

Po pierwsze, należy zainstalować pakiet globalny 

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

Następnie należy utworzyć katalog główny

Tworzenie katalogu głównym katalog o nazwie: reactApp, a następnie użyć npm plik inicjujący startowych wygenerowany package.json: 

$ 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)

Trzecim krokiem jest dodanie zależności i wtyczek

Ponieważ chcemy wykorzystać zareagować, więc musimy go zainstalować - zachowaj polecenie służy do dodawania pakietów package.json pliku. 

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

Jednocześnie musimy zainstalować jakiśplug-babel

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

Czwartym krokiem jest utworzenie pliku

Następnie tworzymy potrzebne pliki: 

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

Piąty krok, ustaw kompilatora, serwer, ładowacz

Otwórz plikwebpack.config.js dodać następujący kod:

 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;
  • Wpis: Wpis określony main.js.plików pakietów
  • Wyjście: Konfiguracja wynikiem pakietu, folder ścieżki wyjścia zdefiniowane nazwa_pliku określa nazwę pliku, do spakowania wyników.
  • devServer: ustawić numer portu serwera to 7777,po porcie można ustawić samodzielnie.
  • Moduł: definiuje logikę przetwarzania modułu, w którym można zdefiniować serię ładowarek z ładowaczem, jak również niektóre zwykłe.Gdy plik do załadowania testowy mecz regulaminowym czasie gry, to oddzwoni plik ładowarka ma zostać przetworzony, który jest WebPack mocne powody.

Teraz otwórz plikpackage.json, znaleźć "skrypty"na"test" echo "\" Błąd: brak badanie określone \ "&& exit 1" zastąpić za pomocą następującego kodu: 

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

Zawartość plikuPackage.json po wymianie w następujący sposób:

$ 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"
  }
}

Teraz możemy użyćnpm polecenie Start,aby uruchomić usługę. Komenda--hot będzie przeładować po zmianach plików, dzięki czemu nie musimy odświeżyć swoją przeglądarkę po zmodyfikowaniu kodu będą mogli zobaczyć zmiany.

Szósty krok, index.html

Ustawianiediv id = "aplikacji" jako elementu głównego naszych aplikacji, oraz wprowadzenia index.jspliku skryptu. 

<!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>

Siódmy krok App.jsx i main.js

Jest to pierwszy element reakcję. Następnym rozdziale będziemy szczegółowo React komponentów. Ten komponent wyjście wolaHello World !!!.

App.jsx kod pliku 

import React from 'react';

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

export default App;

Musimy wprowadzić element i renderowane do elementu głównegoaplikacji, dzięki czemu możemy zobaczyć go w przeglądarce.

main.js kod pliku 

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

import App from './App.jsx';

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

Uwaga:

Jeśli chcesz składnik może być stosowany w dowolnej aplikacji, eksport wymaga użyciaeksportu po jej utworzeniu, z wykorzystaniem plików składowych za pomocą importu importu.

Krok ósmy, uruchamianie usługi

Po ukończeniu powyższej konfiguracji, możemy uruchomić usługę: 

$ npm start

Przeglądarka dohttp: // localhost: 7777 / wyniki wyjściowe są następujące:

Pobierz kompletny przykład

Inne przypadki testowe dla każdego pliku adresu do pobrania: http://static.w3big.com/download/reactApp.zip~~HEAD=pobj .