Comment l'objet d'importation de fichier JS externe à Réagir JS web à l'aide de pack

Je suis appuyant sur ma connaissance de Réagir JS et je voudrais importer/externes fichiers JS qui détiennent rien de plus que des objets /tableaux d'objets. Je l'ai fait en jQuery, la Vanille JS et même en Angular JS. Sweet!!!

Comment puis-je obtenir la même chose à Réagir JS.

J'ai le texte suivant comme mon index.html:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
    </head>
    <body>
        <div id="hello"></div>
        <div id="world"></div>

        <div id="caseListing"></div>

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

et mon main.js (entrée de fichier) comme suit:

import Hello from './jsx/hello.jsx';
import World from './jsx/world.jsx';

var $ = require('./lib/jquery.js');
window.jQuery = $;
window.$ = $;

var Jobs = require('./data/jobs.js');
console.log('Jobs:', Jobs);

Ici, j'ai Jobs.js comme:

var Jobs = (function () {
    "use strict";
    return {
        "jobs": [
            {
                "jobType": "Web developer",
                "desc": "Creates website"
            },
            {
                "jobType": "Bin Man",
                "desc": "Collects bins"
            }
        ]
    };
}());

Et, pour faire bonne mesure, mon webpack.config.js ressemble à ceci:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        './js/main.js'
    ],
    output: {
        path: __dirname,
        filename: 'js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015',
                        'react'
                    ]
                }
            }
        ]
    }
};

Toute aide sera appréciée. 🙂

OriginalL'auteur Mr. Benedict | 2016-08-27