Just starting learning ReactJS. I'm trying to redirect using the Redirect component <Redirect to="/dashboard" />. However, ReactJS is not familiar with this component by default (getting Redirect is not defined on console log).
After some reading, I saw that the Redirect component needs to be imported (import React from 'react'). However, since it's a web project, I do not use a webpack but rather import the entire library with:
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
So my question(s) is how do I use Redirect for a web project, or rather how to import components for a web project for ReactJS.
Redirect component is not part of react. import React from 'react' is importing the react object which contains things like React.Component.
I'm assuming you mean Redirect from react-router in which case you should also add a script for react-router-dom and reference via ReactRouterDOM.Redirect.
P.S. If you're creating something you intend to release you're better off generating a project with create-react-app. Nobody uses scripts directly anymore and you are using development versions of babel and react which are slow and large.
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.
Is there any way to use React Router on pure HTML like React on the browser?
Example:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
React Router is beneficial for React Single Page Apps. Using it in pure HTML files isn't necessary. Here's a nice summary of React Router's purpose.
React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.
The code example you shared hints at interest in using React from CDN rather than installing the library in your project. If that's the case, it may help to review the post Using React Router with CDN and without webpack or browserify.
Is it mandatory to run create-react-app command to create app every time?
I don't want to fire create-react-app command which provides some react module files that help to run react application.
So can you guys help me to understand, is it mandatory to every time run this command.
import React from 'react';
const App = {
return (
<div id="root">
<p>Hello this is first react application</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
create-react-app (cra) is used to bootstrap a new react app fast.
You can use react without using it, you can run react with only react+react-dom CDN as you already wrote in your code example.
Or you can also bootstrap it yourself if you know a little webpack, you just need the react-jsx babel preset to convert JSX syntax to React.createElement calls.
You can run it once and make a local copy to just copy over every time.
You also can build an app from scratch although that will take longer.
The majority of the 5+ minutes is downloading required dependencies for the app.
NOTE: This is not good practice as it results in never getting newer updated dependencies in your app, and you literally just keep using the old one.
If you are just making a bunch of apps to test, then that’s fine. If you are instead making a bunch of apps for production purposes, remember that part of maintenance is updating dependencies regularly as security updates are released.