React'in şu anda piyasada olması umulur

Question

Babayla ve webpack ile React (@ 13.3) ile oynuyorum.

böyle tanımladı Bir bileşeni vardır:

import BaseComponent from './BaseComponent'; 

export default class SomeComponent extends BaseComponent { 
    render() { 
     return (
      <div> 
        <img src="http://placekitten.com/g/900/600"/> 
      </div> 
     ); 
    } 
} 

Ama aşağıdaki hatayı alıyorum: Ben hatasını anladıktan

Uncaught ReferenceError: React is not defined

: JSX biraz React.createElement(...) ama React ISN'de derlenir.Bu' Mevcut durumda t ithal edilmediğinden.

Sorularım: Bu soruna geçici olarak bakmanın yolu nedir? Webpay ile dünya çapında React'u bir şekilde göstermem gerekiyor mu? kullanılan

---

Çözüm:

I 'salehen-Rahman öneri izlemiştir. Benim webpack.config.js ise

: Ben de testler düzeltmek için gerekli, bu yüzden dosya helper.js bu katma

module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'react-hot!babel?plugins[]=react-require' 
    }, { 
     test: /\.css$/, 
     loader: 'style!css!autoprefixer?browsers=last 2 versions' 
    }] 
}, 

: My testler sonra başlatılan

require('babel-core/register')({ 
    ignore: /node_modules/, 
    plugins: ['react-require'], 
    extensions: ['.js'] 
}); 

şu komutla: Eğer düğüm modülleri dizinde tepki varsa

mocha --require ./test/helper.js 'test/**/*.js' 

Answer 1

My questions is : What's the clean way to work around this issue ? Do I have to somehow expose React globally with webpack ?

benzer ayarlara sahip üzere WebPack Babel yapılandırma değiştirme sonra projenize babel-plugin-react-require ekleyin ve React'ı manuel olarak içe aktarır. akılda

React.render(
    <div>Yippee! No <code>import React</code>!</div>, 
    document.body // <-- Only for demonstration! Do not use document.body! 
); 

Bear olsa babel-plugin-react-require otomatik belirli bir dosya için, bir belirli dosyada JSX etiketinin varlığında sadece ithalatı Tepki içerir kodunuzu dönüştürür. JSX kullanmayan, ancak her ne sebeple React'a ihtiyaç duyan diğer her dosya için, React değerini manuel olarak içe aktarmanız gerekir.

Answer 2

senekleyebilir Dosyanızın en üstünde. Yapılandırma güncelleştirme kullandıktan sonra olmadan bileşenleri tepki başlatabilir,

loaders: [ 
    { 
    test: /.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: { 
     stage: 0, 
     optional: ['runtime'], 
     plugins: [ 
     'react-require' // <-- THIS IS YOUR AMENDMENT 
     ] 
    }, 
    } 
] 

Şimdi:

Answer 3

Webpack'in ProvidePlugin'u kullanabilirsiniz. Aşağıdaki içerecek şekilde WebPack config eklentileri bölümünü güncelleştirmek, kullanmak için:

plugins: [ 
    new webpack.ProvidePlugin({ 
    'React': 'react' 
    }) 
] 

Ancak bu testler için bunu çözmez ..