Im trying to implement the library Shufflejs together with ReactJS. Im trying to implement the samplecode for react but when I after installed Shufflejs with npm install shufflejs and paisted the code into index.js in my React application my page renders blank.
I'm a bit lost why that is. Any help would be appreciated!
the code is here on shufflejs: https://vestride.github.io/Shuffle/js/demos/react.js
The way you load Shuffle is not correct here. Replace the import statements with
import React, { Component } from 'react'
import ReactDOM from "react-dom";
import Shuffle from 'shufflejs'
Related
Can someone explain to me how to export/import one component from one to another pen in Codepen - in ReactJS.
Actually, I know how to write syntax...but something doesn't work.
Is it necessary to put something in the head tag in exporting and importing a file?
In importing file I add address of exporting file.js, but it doesn't work.
Of course, I select Babel also and import React and ReactDOM (that's ok).
import React from "https://cdn.skypack.dev/React"
import ReactDOM from "https://cdn.skypack.dev/ReactDOM"
Where is the problem?
I've found out that components without import React from 'react'; lines works well.
I've added import React from 'react'; to the first line of .jsx files conventionally. And I saw many open source with this line.
Then why do we add this line unnecessarily?
You no longer need to import React from "react". Starting from the release 17 of React, JSX is automatically transformed without using React.createElement.However, other exports like hooks must be imported.
if you use a builder like esbuild, unfortunately you will need to import react in every file because it would be an error: Uncaught ReferenceError: React is not defined
but if you use the default builder you don't have to import react in each file
I have a Next.js app with several pages in it. All of the pages look similar.
import React, { Component } from "react";
import from "components/Wrapper";
export default class About extends Component {
render() {
return <Wrapper />;
}
}
I would like to refactor it using functional component.
I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.
Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?
Well, actually it is still a complicated issue for all of us to realise when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:
Next.js automatically adds the React import when JSX is used indeed. However, keep in mind that we still need to import React from 'react' when the React variable is used.
So this will show us, that whenever we want to use the JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case, we have to do that.
Update
Since the release of react v17.*.*, there is no need to import React from 'react' to use only JSX in the React and CRA apps, but you still need to import it for the usage of the hooks and other compartments that React offers with destructured named imports.
NPM libraries/packages
Though you will still need it if you want to create an npm package with react because under the hood it is the react-scripts job to do the automatic imports and babel or rollup won't do this on their own and they've just transpile the provided code. Keep in mind even in this case the usage of import React from 'react' is discouraged because the support will be dropped in the upcoming versions, so it is highly recommended to use import * as React from 'react' in these cases.
I have created a new reactjs project using create-react-app and am finding it's not working on IE10 & IE9. I have done a lot of research and it led me to using polyfills, which I have done with many of my other Rails on React app, but I'm finding it not working with this project created via create-react-app.
Here's the error:
SCRIPT5009: 'Map' is undefined
I notice this error is related to ES6's new Map() function.
So, here's what I've done in my code in an attempt to make it work:
import './polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
const app = (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
);
ReactDOM.render(app, document.getElementById('root'));
Polyfill.js:
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/object/assign';
This isn't working. I'm not sure what else to try. I've tried a lot of other polyfill imports as well and continue to get the same error.
Any help would be appreciated!
So, seeing as though create-react-app is what's restricting me from controlling the webpack config, I decided to take a different approach and build a fresh react app using webpack 4. I followed this article, https://dev.to/saigowthamr/how-to-create-a-react-app-from-scratch-using-webpack-4-1909.
This allowed me more control over the webpack config and now the polyfill loaders are working.
Nevertheless, if anyone has an explanation as to why it wasn't working with create-react-app, I think it'd be helpful for the community to know.
Thanks!
I have referred this documentation to add google-signin in my react native app, followed all the steps mentioned but could not get the result as specified in the documentation. I have imported the following statement
import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';
But Whenever I add this statement in my login file it gives me following error.
i think you need make some changed in your file path shown in error message
F:\ReactProjects\SearchApp\node_modules\react-native-google-signin\src\GoogleSignin.android.js
make sure you import following two lines correctly
import React, { Component } from 'react';
import PropTypes from 'prop-types';
install this and your problem goes away "npm install --save prop-types"