I have a Django project and I want to use React on it. I have already created my own components and this works, but I dont know how to import third-party components from CDN.
To do this, I did:
Import React (develop or production version) in the base template:
<!-- baseTemplate.html -->
{# ReactJs#}
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Also import the file where I create my components
<!-- baseTemplate.html -->
<script src="/one_directory/my_react.jsx" type="text/babel"></script>
and create the tag where it will be rendered.
<!-- template.html -->
<div id="container"></div>
And finally render my React components:
<!-- my_react.jsx -->
ReactDOM.render(
<App />,
document.getElementById('container')
);
This works correctly :)
Now, I want to import a third-party component (specifically, it's React Bootstrap Slider) from CDN, but I dont know how.
Maybe this is not possible, I dont know. How could I do it?
Thank you very much :]
I think you want a CDN from this npm package https://www.npmjs.com/package/react-bootstrap-slider (version 2.1.3)
There is a CDN at https://unpkg.com/react-bootstrap-slider
You can explore files for that at https://unpkg.com/react-bootstrap-slider/
However I could not get it to work as I get Component not found error.
In the github project https://github.com/brownieboy/react-bootstrap-slider it says
The control is implemented in UMD format, so should also work for
AMD/RequireJS, but I've not tested that. You can also add it as a
script tag.
If you want a CDN I you suggest to inform the owner to fix it or you can fork the project and generate a CDN-friendly file and host it yourself.
Related
I am developing teams application using react js. Package.Json file showing version as 16.14.0.
But when I am getting the react version from terminal window its showing 17.0.2. Is that shows my application has 2 versions of react?
Here below is the screenshot of package.json file
As per my understanding, you have installed React JS globally as well on your OS. This way you have two versions of React JS, One for your project and another one for your global environment.
Although there is a way to know the runtime version of React in the browser.
const REACT_VERSION = React.version;
ReactDOM.render(
<div>React version: {REACT_VERSION}</div>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
In case, if you want to check React imported as a module, then go with the following code snippet.
import React from 'react';
console.log(React.version);
i built a Homepage using the Django templating engine and on one page is a js application i wrote. Now i moved to a Frontend <-> Backend architecture with React and Django-rest-framework.
The Application i had in Django was served as a .html file with <script> tags for the js part.
Now i moved to React and i'm serving the html elements through a React component and through React-helmet i'm adding the <script> tags for this specific page. The actual .js files reside in the /public folder of react.
I thought i can replicate this way the old structure. But now i get Errors that the .js files can't import classes from the first external script.
What could be the difference in this setup ?
Django:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src="{% static 'path/to/file.js' %}"></script>
...
React:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src={process.env.PUBLIC_URL + 'path/to/file.js' }></script>
...
The Error Message at React is that my file.js can't find the import from the first <script>. But in Django there is no problem.
the import statement in file.js is:
import { QuantumCircuit } from "quantum-circuit";
Thank you in advance for every answer :)
It seems that the first external script is not ready when my custom scripts are trying to call it.
I fixed the issue using the useEffect hook. It calls the external script and if it's ready i'm calling my custom scripts.
Despite i was able to resolve this issue, i'm wondering why this hasn't happend in Django before.
I'm using react with their CDN scripts (as well as react-dom and babel-standalone) that I've saved out to some files due to security practices with network connectivity, and am trying to figure out code organization.
Disclaimer: I'm aware that I need webpack or something to compile to get access to require or normal imports. I'm wondering if there's a way to organize my components without having to add a script tag in my main html for every single file.
The error that I'm getting is Uncaught ReferenceError: require is not defined. The research that I've done is saying that I need to add each file used by my other javascript with a tag in the html. This is cumbersome especially if I have a large(ish) project. It's not scalable. How can I organize the various components that I have without having to have a massive head section with all of the wonderful script tags?
I've seen some hacks, but they're older and with the advent of new react versions and browser capabilities, so I thought I'd try and see what is being used out there to solve this problem now.
p.s. this is the first experience I have with React CDN, but I've written apps in RN before.
My code is:
<html>
<head>
<script src="react.js" />
<script src="react-dom.js" />
<script src="babel.js" />
<script type="text/jsx" src="app.js" />
</head>
<body>
<div id="root" />
</body>
</html>
app.js
import Greeting from './greeting';
const App = () => {
return (
<Greeting text='Hello World' />
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
greeting.js
const Greeting = ({ text }) => {
return (
<h1>{text}</h1>
);
}
export default Greeting;
You cannot use React or JSX in the browser without some sort of build step. React only distributes CJS, no ESM, so it needs build tooling. Babel is used to transpile, though I'm not entirely sure it makes sense to use in this context. It's a lot of overhead.
Take a look at https://blog.jim-nielsen.com/2020/react-without-build-tools/ if you want to go the no-build tools route.
You'll have to use alternative versions of React as well as alternative syntax to JSX.
Try this
NOTE: Only when you proper setup of webpack and babel. require is required of cjs modules.
if you have done your setup try following.
1. const module = require('modulename') only when module is exports as modules.export = modulename
2. Try adding this plugin babel-plugin-import in your babel config
Importing greatings.js in app.js won't work. Instead, you import all the javascript files that you are using in the HTML file only then it would work.
<script type="text/babel" src="greatings.js"></script>
in the HTML file.
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 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