I am trying to integrate react in an existing project usreing CDN and following https://reactjs.org/docs/create-a-new-react-app.html
when I use import App from "./App"; it doesn't work but whne I add .js : import App from "./App.js"; it works. Do you know how to make it work without adding .js extension ?
Related
react beginner question...
I am learning react on my Mac and I installed NPM and node js and created a basic react app for testing.
In VS code app - when I type in terminal 'npm start' it opens a browser and shows the app running. - all good
Next I tried to upload the app to a live Web server (it has cpanel).
Seems like it is not connected to react - or somehow I need to start the app?
What can I do to start / connect it?
the URL is something like:
https://example.com/reactlearn/
or
https://example.com/reactlearn/public/
empty
or
https://example.com/reactlearn/src/
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
Try deploying it to Vercel, Netlify or Heroku.
These should all provide free options with a url where you can see the app.
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!
Trying to convert an existing Single Page App into React web app, incrementally, start by utilizing material-ui Snackbar i.e. http://www.material-ui.com/#/components/snackbar
Assuming existing App resides in single-app.js
And trying to add Snackbar react app , and transpiled it successfully using Babel in server side as react.app.js
Below is a inside react.app.js (before transpiled)
import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Snackbar from 'material-ui/Snackbar';
render(<Snackbar />, document.getElementById('react_container'));
I included both single-app.js and react-app.js within index.html
How can I open Snackbar coded within react-app.js i.e. from single-app.js or from script tag (either javascript / babel) within index.html -- in order to display message?
Many thanks.
I have a .css file that is hosted online. How can I import it in to my react component?
import mystyles from 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css';
this results in an error
Module not found: Error: Can't resolve 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css' in '/Users/busda001/code/electrode-app/src/client/components'
You have 2 choices to include CSS in your react project,
First, you can put the link in the main HTML project page which has all react project.
Second importing in your file.jsx as you do now, but you nee in this way CSS loader in your server, if you use webpack.config.js
use this link to learn what should you do,
How to include a CSS from bower_components using webpack dev server?
I have an application where I have to build code using babel and react. The application will be built using gulp and webpack for automated build creation and deployment. When using gulp and webpack to convert babel+react code to browser interpretable code, we need to install react using npm and has to be imported in all files, following is the sample code:
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './helloWorld.jsx';
import HelloMe from './hello-me.jsx';
ReactDOM.render(
<HelloWorld />,
document.getElementById('app-test')
);
ReactDOM.render(
<HelloMe />,
document.getElementById('app-container')
);
Now, the problem is this code when bundled with webpack, bundles react and react-dom library code to the bundled file. So, I would not be able to cache these library files to be loaded in different views. Due to this, the same library code will load again and again in different bundled files. Is there a way to load these files separately and not in the bundled file?
Edit your Wabpack configuration file and specify React & ReactDOM as externals.
externals: {
"react": "React",
"react-dom": "ReactDOM",
},
Then, include React & ReactDOM from CDN or your prefered source.
Whenever you call import React from 'react' or require('react') (or react-dom), Webpack gives you external copy of library