Mobx is a state management tool often used with React. I'm trying to understand how the MobX tool works, using their 'Ten minute introduction to MobX and React' tutorial. I'm playing with the Task List JSFiddle example link provided at the bottom of the introduction page.
The JSfiddle works fine when first loaded. Change one byte of code, hit the JSfiddle run button and it crashes. I'm trying to understand the JSFiddle crash and how to fix it.
When first loaded, I do see a console warning
VM48 babel.js:60934 You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
After pressing the run icon in JSfiddle, I see the following error message
Uncaught ReferenceError: mobxReact is not defined
at <anonymous>:47:22
at run (VM48 babel.js:60802)
at check (VM48 babel.js:60868)
at loadScripts (VM48 babel.js:60909)
at runScripts (VM48 babel.js:60936)
at transformScriptTags (VM48 babel.js:324)
(anonymous) # Inline Babel script:4
This makes no sense to me. How can the JSFiddle run correctly when the site is first opened, but fails after the run icon? I can see MobX-react as an external reference. Anybody understand what is going on here, and how to make corrections to JSFiddle (to enable me to really modify & play with MobX to understand what is really going on?)
The error states that you are trying to use the mobx library which is not present as a package.
Uncaught ReferenceError: mobxReact is not defined
To resolve this issue add a script tag in your HTML file to import the mobx library.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Mobx Sample">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<script src="https://npmcdn.com/mobx#2.3.3/lib/mobx.umd.js"></script>
</body>
</html>
then in your JS file, you can import the mobx modules.
const { observable, autorun, computed } = mobx;
Related
I am new to TypeScript and thought I would tray the product List demo from ReactJS website with it. I have got so far, but currently getting
external "React":1 Uncaught ReferenceError: React is not defined
at Object.react (external "React":1)
at __webpack_require__ (bootstrap:19)
at Object../src/client/app/index.tsx (index.tsx:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
and I am not too sure why, if I include it as an external in my webpack.config.js it works fine, but I am wanting to bundle it with the rest of the src ready for intranet applications that dont have access to the big bad world.
Any help would be appreciated.
I am importing thus import * as React from 'react';
webpack throws no errors
INDEX.TSX
import * as React from 'react';
var ReactDOM = require('react-dom');
import FilterableProductTable from './components/FilterableProductTable';
import Basket from './components/Basket';
ReactDOM.render(
<div>
<FilterableProductTable />
<Basket />
</div>,
document.getElementById('app')
);
I've been having this issue too. After googling the error for a day or so, I stumbled across this page.
Following the link provided by octavioccl in the comments - (http://www.typescriptlang.org/docs/handbook/react-&-webpack.html).
I swear I've read this page a dozen or so times, and roughly tried following it while I've been converting my project across to TypeScript. Anyways, what helped me what this section here:
"We’ll also need a page to display our Hello component. Create a file at the root of proj named index.html with the following contents:"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
"Notice that we’re including files from within node_modules. React and React-DOM’s npm packages include standalone .js files that you can include in a web page, and we’re referencing them directly to get things moving faster. Feel free to copy these files to another directory, or alternatively, host them on a content delivery network (CDN). Facebook makes CDN-hosted versions of React available..."
I added the Dependancies to my index.html file and it sorted this issue.
Hopefully that helps someone else who stumbles across this.
I am working on a project under CMS, I do not have any access to server.
so I downloaded below 4 files
browser.min.js jquery.min.js react.js react-dom.js
remarkable.min.js
and loaded on the html page. Everything works fine before I use import.
import { sample } from './sample';
Makes Uncaught ReferenceError: require is not defined on React
I am not able to install weback or Browserify on the server, so have to load from somewhere.
Anyone has got a solution for this?
This might be what you're looking for.
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-
dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
</head>
I downloaded React version 15 and created the following html document:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// React Code Goes Here
var MyComponent = React.createClass({
render: function(){
return (<h1>Hello, {this.props.name}!</h1>);
}
});
ReactDOM.render(
<MyComponent name="world" />,
document.getElementById('container')
);
</script>
</body>
</html>
The same works fine in jsfiddle but not on my machine. I want to avoid installing React dev tools or anything extra. Is that possible to get it to work with what I have or do I absolutely need to install something else?
There are tons of tutorials out there but they all seem to be missing something to get me started
If you're sure you have the react.js and react-dom.js files in a folder called build at the same level as that html page, the only thing missing would be:
a script include for babeljs in order for you to be able to use the JSX code you have in the body's script tag, add this to the <head> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
As a precursory statement, I just want to make sure to mention that you probably won't want to do in-browser transpilation from JSX->JS for anything other than playing around with the technology. In a production environment you would want to precompile your JSX server-side or during a build step.
That being said, therein lies your problem: you're attempting to include JSX directly in the browser code, without including anything to do browser-side compilation for you.
Based on what I can see, it looks like the latest and greatest approach is to use <script type="text/babel"> now, instead of <script type="text/jsx">, and the compilation is accomplished via babel's browser.js.
This guide here appears to be mostly up to date: https://www.sitepoint.com/getting-started-react-jsx/
I'd say that if you are just starting react, a really good project to look at would be create-react-app. It does all the magic for you with one simple set up
I am working on improving the UI of a website, and needed to use Semantic JS with it. The website was written in Angular, and the one piece of Semantic functionality that was not working was Dropdowns. The styling worked fine, but as soon as I tried to initialize the dropdown with a
$('...').dropdown({options});
I encountered a "$('...').dropdown is not a function" error. Looked around and nowhere mentioned the answer to my problem.
Since SemanticJS modifies the $ operator from Jquery, Jquery needs to be included before SemanticJS.
//Index.html//
<html>
<head>
</head>
<div ng-view></div>
<script src="jquery.blah.min.js"></script>
<script src="semantic.min.js"></script>
</html>
So I am wanting to learn more about how to use AngularJS $route as it seems to be the way to go for my single page application. Naturally, the best place to start is the documentation. They have a nice little Plunker for me to visually and hands-on see how it works. Next up, playing with it and making it my own. Before I can start messing with it to make it my own though, I need it working outside the Plunker: so I made copies of each file and put them all in the same directory.
However, I am getting the following errors:
TypeError: angular is undefined script.js:3:0
ReferenceError: angular is not defined index.html:14:4
The line for the first error is:
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
and the line for the second error is:
angular.module('ngRouteExample', ['ngRoute'])
So to me it is obvious that it is not registering that AngularJS is referenced or something. Nothing about the code is breaking, it just doesn't recognize AngularJS. Why is this? How do I fix this?
Plunker
Original documentation
Have a look at the Angular documentation here. Make sure you have included the Angular library in your index.html (or index.jsp/index.aspx).
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
</body>
</html>
Not sure why but the Plunker uses
//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js
instead of
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js
Easily grazed over it. My bad. Thought Plunker, JSFIDDLE and all that use direct URLS.
Found error by starting to paste everything back in Plunker.