Реагировать установки
Реагировать можно загрузить непосредственно с помощью пакета загрузки также предоставляет множество примеров обучения.
В данном руководстве используется Реагировать версия 0.14.7, вы можете на официальном сайте http://facebook.github.io/react/~~HEAD=pobj скачать последнюю версию.
Вы также можете использовать прямой этот учебник Реагировать библиотеку CDN, по следующему адресу:
<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>
пример
Следующие примеры вывода Привет, мир!
<!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>
Примеры анализа:
Пример мы ввели три библиотеки: react.min.js, реагируют-dom.min.js и browser.min.js:
- react.min.js - Реагировать основная библиотека
- реагируют-dom.min.js - предоставление DOM-функций , связанных с
- browser.min.js - для синтаксиса JSX в синтаксисе JavaScript
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Выше кодируют h1 заголовок, вставить ID = "пример" узел.
Примечание:
Если нам нужно использовать JSX, тип атрибута <сценарий> тег должен быть установлен в текст / Бабеля.
Реагируют с помощью НПМ
Если ваша система не поддерживает Node.js и NPM может обратиться к нашему Node.js учебнике .
Мы рекомендуем использование модульной системы в CommonJS Реагировать, такие browserify или Webpack, в данном руководстве используется Webpack.
Во-первых, установить глобальный пакет
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Затем создайте корневой каталог
Создайте корневой каталог, каталог с именем: reactApp, а затем использовать НПМ файл инициализации инициализации сгенерированный 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)
Третий шаг заключается в добавлении зависимостей и плагины
Потому что мы хотим использовать среагировать, поэтому нам нужно установить его, - сохранить команду используется для добавления пакетов в файл package.json.
$ npm install react --save $ npm install react-dom --save
В то же время мы должны установить некоторыеплагин столпотворение
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
Четвертый шаг заключается в создании файла
Далее, мы создаем необходимые файлы:
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
Пятый шаг, установить компилятор, сервер, загрузчик
Открыть файлwebpack.config.js добавить следующий код:
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;
- запись: запись , указанную main.js.пакет файлов
- Выход: результат пакета конфигурации, папка вывода путь определен, имя файла определяет имя файла , к пакету результатов.
- devServer: установить номер порта сервера 7777,после того, как порт , который вы можете установить самостоятельно.
- Модуль: определяет логику обработки модуля, в котором можно определить ряд погрузчиков с погрузчиком, а также некоторые регулярно.Когда файл для загрузки тестового матч основное время, он перезвонит файл загрузчика обрабатывается, который WebPack веские причины.
Теперь откройте файлpackage.json, найти "сценарии"в"тесте" "эхо \" Ошибка: не указано Тест \ "&& выход 1" заменить следующим кодом:
"start": "webpack-dev-server --hot"
Package.json содержание файла после замены следующим образом :
$ 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" } }
Теперь мы можем использоватьНПМ команду пуска, чтобы запустить службу.--hot команда перезагрузит после изменения файла, так что нам не нужно , чтобы обновить свой браузер после изменения кода будет иметь возможность увидеть изменения.
Шестой шаг, index.html
УстановкаDiv ID = "приложение" в качестве корневого элемента наших приложений, а также введение index.jsфайла сценария.
<!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>
Седьмой этап, App.jsx и main.js
Это первый компонент реагирует. В следующей главе мы подробно Реагировать компоненты. Этот компонент будет выводитьHello World !!!.
Код файла App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </div> ); } } export default App;
Нам необходимо ввести компонент и оказаны корневой элементприложения, так что мы можем увидеть его в вашем браузере.
main.js файл кода
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'))
Примечание:
Если вы хотите , компонент может быть использован в любом приложении, экспорт требует использованияэкспорта после того, как он создается, используя файлы компонентов , используя импорт импорта.
Шаг восемь, работающие сервисы
После завершения описанной выше конфигурации, мы можем запустить службу:
$ npm start
Браузер поHTTP: // локальный: 7777 /, выходные результаты являются следующими:
Загрузить полный пример
Больше случаев тест для каждого файла загрузки по адресу: http://static.w3big.com/download/reactApp.zip~~HEAD=pobj .