2015-11-18 2 views
-1

В принципе, я только что прошел через this simple tutorial, и теперь я хочу, чтобы он использовал React, чтобы я мог видеть этот дисплей.Как получить ReactJs для интеграции с Webpack?

Когда я имел этот код:

module.exports = "It works from.js."; 

Он работал отлично. Но теперь у меня есть это:

var React = require('react'); 
    var ReactDOM = require('react-dom'); 

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
      Hello, world! I am a CommentBox. 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 
); 

и жалуется на линии 9 точки на unexpected token < и мне нужен соответствующий загрузчик. кто-нибудь знает, что может быть этим загрузчиком?

благодаря

+0

Вы также должны указать свою текущую конфигурацию webpack. – zerkms

+0

@zerkms это то же самое, что и в учебнике –

+0

@ TheHurricane вы ** ДОЛЖНЫ ** предоставить свою конфигурацию здесь, если вы хотите получить ответ. Stackoverflow - это сообщество, которое помогает разработчикам с их проблемами, а не проверяет некоторые произвольные статьи через Интернет. – zerkms

ответ

3

Yeap, вы правы, вам нужно Бабель-погрузчик для кода JSX. Также, если вы используете синтаксис ES6 с React, вам также понадобится babel-core & babel-preset-es2015 & babel-preset-react Модули npm. После этого incude все из них в свой webpack.config.js файла, как показано ниже:

module.exports = { 
    //.. some stuff before 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ["babel"], 
     query: { presets: ['es2015','react'] } 
    }] 
    } 
    //.. another stuff 

} 

Также я оставить link для вас, с учебником, как использовать ISE.

Я надеюсь, что это вам поможет.

Спасибо

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