2015-10-20 3 views
3

Я вижу множество примеров для реакции, структурированных с использованием синтаксиса var React = require('react'). Когда я пытаюсь использовать это, я получаю «require not defined». Как использовать и настроить мой статический проект для использования требуемого синтаксиса?как использовать реакцию требуют синтаксиса?

Update

В действительности я ищу WebPack/browserify конфигурационный файл, так что я могу начать работу с React и CommonJS быстро. Я написал только приложения для написания приложений без указанных инструментов сборки.

+3

если вы используете «require», который не реагирует на шаблон модели commonjs.вам нужно использовать webpack или какой-нибудь другой загрузчик модуля commonjs, который переведет ваши модули в код, дружественный браузеру. –

+0

. Browserify - это еще один вариант (perhpas more beginner friendly), альтернативный http://browserify.org/ – hampusohlsson

+0

, пожалуйста, просмотрите изменения. На самом деле у меня есть статические файлы и вы хотите знать, как настроить webpack/browserify для проекта с помощью 'index.html' –

ответ

7

требуется не React api, а также не является родным браузером api (пока).

Требование приходит от commonjs и наиболее знаменито реализовано в node.js, если вы использовали node.js, вы увидите, что везде требуется.

Из-за популярности требуемого в узле люди создали инструменты, которые преобразуют код, написанный в стиле nodejs, который можно использовать в браузере.

есть несколько преимуществ для использования требуется, это поможет вам сохранить ваш код модульный и для некоторых проектов это позволяет писать изоморфный код (код, который работает как на клиенте и сервере с минимальными изменениями)

Для того, чтобы используйте require, вам нужно будет использовать такой инструмент, как webpack или браузер, я буду использовать пример браузера.

первым создать '' index.js

require('./app.js'); 
alert('index works'); 

затем создать app.js

alert('app works'); 

Затем установите browserify консоли

npm install -g browserify 

И называют эту команду в вашем оболочка

browserify index.js > bundle.js 

Теперь вы будете иметь bundle.js в вашей HTML странице создать

<script src="bundle.js"></script> 

И вы должны увидеть оба предупреждения запустить

Теперь вы можете продолжать код, вы можете добавить реагировать на ваши код посредством производства

npm install react --save 

, а затем требуют в app.js, например

var React = require('react'); 

React.createClass({ 
    render: function(){/*Blah Blah Blah*/} 
}) 
+0

. Благодарим вас за это объяснение. У вас есть пример файла конфигурации браузера, который вы используете в проектах? –

+0

Browserify обычно работает с gulp https://viget.com/extend/gulp-browserify-starter-faq и webpack работает с файлом конфигурации https://robots.thoughtbot.com/setting-up-webpack-for-react- и-hot-module-replacement –

+0

ОК спасибо. Я установил шаблон стартера, используя webpack здесь: https://github.com/cleechtech/react-static-starter –

3

BTW, Если вы используете Webpack вы можете добавить в файл конфигурации webpack.config.js следующие строки, устраняя необходимость использования требуют утверждения в файлах:

plugins: [ 
      new webpack.ProvidePlugin({ 
       'React':  'react', 
       '$':   'jquery', 
       '_':   'lodash', 
       'ReactDOM': 'react-dom', 
       'cssModule': 'react-css-modules', 
       'Promise': 'bluebird' 
      }) 

     ], 

Это, конечно, менее подробные и не все разработчики, как это, но это хорошо знать :)

Смежные вопросы