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);
Related
Following are things that I have tried for solving the problem mentioned:
Created React build using "npm run build" command for existing React application using Redux and Typescript
After build got generated I tried accessing "../../../../build/static/js/main.f8fbcfa1.js" file in script tag on html page. Please find below snapshot of the code for doing this:
<div id="root"></div>
<script defer="defer" src="../../../../build/static/js/main.f8fbcfa1.js">
</script>
When I try to access page in browser the React Application does not get rendered in the div having ID as root.
Blank page is displayed
Note - Normal React App works in above scenario but React app with typescript is causing issue
Please let me know any pointers for resolving this issue.
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 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.
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.
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.