I am trying to learn Redux (with React).
I don't want to use Node to install dependencies, just doing it manually with script tags.
I am getting the error reactRedux is not defined. I thought by adding the react-redux.js file I would solve the issue.
Would appreciate any pointers on what I'm doing or understanding wrongly.
(I'm attempting to work through this tutorial https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/)
Here is the code snippet in question:
<head>
<meta charset="UTF-8">
<script src="public/js/lib/react.js"></script>
<script src="public/js/lib/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
</head>
<body>
<script type="text/babel">
const { Map, List } = Immutable;
const { createStore } = Redux;
const { Provider, connect } = reactRedux;
Line 7 from react-redux.js indicates that it should be ReactRedux not reactRedux.
exports["ReactRedux"] = factory(require("react"), require("redux"))
So it's just a typo in the tutorial - probably an older version of the library being used when it was written.
You need to capitalize the first r in reactRedux. Change:
const { Provider, connect } = reactRedux;
To
const { Provider, connect } = ReactRedux;
Related
Hi I am working with IOTA distributed ledger. I have iota client library for node.js.
I want to read data from node.js file where I access IOTA distributed ledgers and pass it to Html where user can see.
My client.js file:
const Iota = require('#iota/core');
const Extract = require('#iota/extract-json');
const iota = Iota.composeAPI({
provider: 'https://nodes.devnet.iota.org:443'
});
let x = [];
iota.getBundlesFromAddresses(['PXMPEGYZCOVEOSRAUXY9VYRBHJBSDWORWQNBDJRVEFTMXZWLTQZSPHEUDMXT9YKGPMMSVDSNHSJNWQUOX'])
.then(bundle => {
for (let i = 0; i < bundle.length; i++) {
console.log(JSON.parse(Extract.extractJson(bundle[i])).message);
x[i]=JSON.parse(Extract.extractJson(bundle[i])).message;
}
})
.catch(err => {
console.error(err);
});
I want to pass x[i] variable to html.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="client">
{{ x[0]}}
{{ x[1]}}
{{ x[2]}}
</div>
<script src="myApp.js"></script>
<script src="client.js"></script>
</body>
</html>
I know how to read data from controller but how am I gonna read data if client.js has imported libraries.
I tried in Angular to convert libraries to typescript but couldnt figure out.
This is typically done in package.json, such as server or build
I'm trying to import this Widget designed for JQuery in my React projet :
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>
This widget needs JQuery to work, so i also load JQuery using Google CDN:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The documentation is written for JQuery, and shows this example to use the widget :
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>
JAVASCRIPT :
```
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#Retour_Widget",
Brand: "BDTEST ",
Country: "FR",
EnableGmap: true
});
});
```
I really don't know how to do it. I've tried for 3 days but i'm still blocked.
Thank you a lot for your help and i'm very sorry for my bad english.
Thanks again.
(UPDATE)
My code is :
import React, { useEffect } from 'react';
const MondialRelay = () => {
useEffect(() => {
const jQuery = document.createElement('script');
jQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
jQuery.async = "true";
document.body.appendChild(jQuery);
return () => {
document.body.removeChild(jQuery);
}
})
useEffect(() => {
const scriptMr = document.createElement('script');
scriptMr.src = "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
scriptMr.async = "true";
document.body.appendChild(scriptMr);
return () => {
document.body.removeChild(scriptMr);
}
});
!function(){
// Parameterized the widget
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#ParcelShopCode",
Brand: "BDTEST ",
Country: "FR"
});
});
}();
return(
<div>
<div id="Zone_Widget"></div>
</div>
)
};
export default MondialRelay;
And the error i encounter is "$ is not defined" but this is because i try to use JQuery syntax in React and $ is never defined in my code.
I dont know how to create this div with #Zone_Widget id.
There's a typo in your script tag, you missed https:
change the URL to https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js and it should work.
As a suggestion, since you're using nodejs/npm already, you can install jquery using npm as well.
npm install jquery
I'm working on the front end for a project to display a graph of data collected from sensors. I'm following Net Ninja's youtube series on connecting to firebase, as well as trying many other approaches found online, but nothing I try works. I cannot get data from my firebase test database to display, and also can't display example data from others. I was hoping for a bit of help in what I could have missed.
const dataList = document.querySelector('#data-list');
// create element & render data
function renderData(doc) {
let li = document.createElement('li');
let time = document.createElement('span');
let data = document.createElement('span');
li.setAttribute('data-id', doc.id);
time.textContent = doc.data().time;
data.textContent = doc.data().data;
li.appendChild(time);
li.appendChild(data);
dataList.appendChild(li);
}
// getting data
db.collection('sensorData').get().then(snapshot => {
snapshot.docs.forEach(doc => {
renderData(doc);
});
});
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-database.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>test</h1>
<div class="content">
<form id="add-data-form"></form>
<ul id="data-list"></ul>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = { **
FIREBASE DATA **
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
firebase.analytics();
</script>
<script src="app.js"></script>
</body>
</html>
When I launch the index, I only see the "test" heading, no data from the firebase. I have used powershell to initialise the database, that didn't make a difference though. Any help would be greatly appreciated, thank you
I use react.
for add stimulsoft reports.js, first add necessary link to css and javascript files in my Index.html file :
<link href="Css/stimulsoft.viewer.office2013.whiteblue.css" rel="stylesheet" />
<script src="Scripts/stimulsoft.reports.js"></script>
<script src="Scripts/stimulsoft.reports.maps.js"></script>
<script src="Scripts/stimulsoft.viewer.js"></script>
After that i create a Component with this code :
import React from 'react';
class Viewer extends React.Component {
render() {
return <div id="viewerContent"></div>;
}
componentWillMount() {
var report = new window.Stimulsoft.Report.StiReport();
//create error
report.loadFile("MyReportFile.mrt");
var options = new window.Stimulsoft.Viewer.StiViewerOptions();
this.viewer = new window.Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
this.viewer.report = report;
}
componentDidMount() {
this.viewer.renderHtml("viewerContent");
}
}
export default Viewer;
and loadFile method caused below error in console :
stimulsoft.reports.js:73 [Deprecation] Synchronous XMLHttpRequest on the main thread is
deprecated because of its detrimental effects to the end user's experience. For more help, check
https://xhr.spec.whatwg.org/.
Unexpected token < in JSON at position 0
Uncaught TypeError: Cannot read property 'isDashboard' of undefined
at stimulsoft.viewer.js:11
How to fix this error?
I reached the Stimulsoft report in reactjs by this two steps :
First step - Add Stimulsoft report Js files in HTML file in the public folder :
Index.html
<!DOCTYPE HTML>
<html lang="fa" dir="rtl">
<head>
<!-- Title -->
<!-- Favicon & Manifest -->
<link href="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.viewer.office2013.whiteblue.css"
rel="stylesheet"
/>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.engine.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.export.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.import.xlsx.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.chart.js" type="text/javascript"></script>
<!-- <script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.dashboards.js" type="text/javascript"></script> -->
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.blockly.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.viewer.js" type="text/javascript"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Second step - create jsx component and copy this code to the component :
Viewer.jsx:
import React, { useEffect } from "react";
export default (props) => {
useEffect(() => {
if (props.show == true) {
var options = new window.Stimulsoft.Viewer.StiViewerOptions();
// options.appearance.fullScreenMode = true;
// options.height = "100%";
// options.appearance.scrollbarsMode = true;
// options.toolbar.showDesignButton = true;
var viewer = new window.Stimulsoft.Viewer.StiViewer(
options,
"StiViewer",
false
);
var report = new window.Stimulsoft.Report.StiReport();
report.licenseKey = "licenseKey ";
report.loadFile(props.templateFile);
var dataSet = new window.Stimulsoft.System.Data.DataSet("Demo");
dataSet.readJson(props.dataSet);
report.dictionary.databases.clear();
report.regData("Demo", "Demo", dataSet);
viewer.report = report;
viewer.renderHtml("viewer");
}
}),
[];
return (
<>
<div id="viewer"></div>
</>
);
};
the html code - which call the required libraries
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script type="text/javascript" src="JS/app.js"></script>
</head>
<body ng-app="seworko">
<div ng-controller="users">
{{ 4+4 }}
</div>
</body>
</html>
the Javascript code
var app = angular.module("seworko", ["firebase"]);
var config = {
apiKey:"myKey",
authDomain:"myDomain.firebaseio.com",
databaseURL:"https://myUrl.firebaseio.com",
storageBucket:"myBucket.com"};
firebase.initializeApp(config);
app.controller("users", function($scope, $firebaseObject) {
try
{
const rootRef = firebase.database().ref().child('system');
const ref = rootRef.child('global');
this.global = $firebaseObject(ref);
}
catch(e)
{
alert(e);//type error a.ref is not a function
}
});
I am getting this error ->
type error a.ref is not a function !!
I don't know the reason for the error
I followed too many tutorials , and can't connect firebase with angularJS using angularfire