How import object from external JS file in React JS using web pack

I am building on my knowledge of React JS and I would like to import/include some external JS files that hold nothing more than an objects / object arrays. I've done this in jQuery, Vanilla JS and even in Angular JS. Sweet!!!

How can I achieve the same thing in React JS.

I have the following as my 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>

and my main.js (entry file) as the following:

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);

Here, I have Jobs.js as:

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

And just for good measure, my webpack.config.js looks like this:

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'
                    ]
                }
            }
        ]
    }
};

All help will be appreciated. :)

Answers:

Answer

You need to export Jobs from jobs.js in order to import it into another module. And jobs.js doesn't need to be a function if your just exporting static data. So, you can make jobs.js look like this:

export default {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

Then you can import it like so:

import Jobs from './data/jobs.js';

Or:

var Jobs = require('./data/jobs.js').default;

If you want to require with normal commonjs syntax then you can make jobs.js like this:

module.exports = {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

Which allows you to require like so:

var Jobs = require('./data/jobs.js');    
Answer

Let's say the file you're keeping your data in is called "file.js."

var text = "Hello world!"; //In file.js

Below this line, You must export this variable so that it can be imported in the React code:

module.exports = {data: text} //In file.js

The string is stored as an object called "data." You then import the contents of "file.js" in the file you wish to use it, let's say App.jsx".

import file from './file.js'; //In App.jsx

The contents of the object you exported in the other file is being stored as the variable "file" here. You can then convert the contents of "file" to an object:

var str = file.data; //"data" is the object within "file"

Your string, "Hello world!", is now stored within the variable str.

Hope this helps!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.