Menu
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. :)
861
Installation: Open a terminal inside your ReactJS project folder and write the following code to install react-script-tag Package. Import 'ScriptTag' component: Import the built-in 'ScriptTag' component from the react-script-tag library at the top of the file where we want to add the script tag.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file.
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');
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!
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With