I create a small React application using npx create-react-app my-app. I would like to add this React application to my existing website in a specific <div>.
My website:
<div id="reactApp"></div>
In React, I have index.js as
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
//document.getElementById('root')
document.getElementById('reactApp')
);
reportWebVitals();
Then, I build the application npm run build. It generates the following files (image below) in static folder. Do I need to add all these .css and .js files to my main website to make it work?
Convert your project my-app to a web component and then add it to the other react application (you can add it to any other web application).
More details on how to create web components can be found here
https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1
Related
I just created a new ReactJS app using npx create-react-app I believe this uses React version 18 (correct me if wrong).
I'm trying to set up a router for this app but I'm not sure which one to use: react-router-dom or react-router ..or another one?
I went ahead and installed npm -i react-router-dom
Here is my app so far:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {} from 'react-router-dom'; //adding this line is giving me errors
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
..however adding import {} from 'react-router-dom'; is giving me compile errors like:
Compiled with problems:X
ERROR in ../node_modules/react-router-dom/dist/index.js 13:0-836
export 'AbortedDeferredError' (reexported as 'AbortedDeferredError')
was not found in 'react-router' (possible exports: Await, MemoryRouter
are there other modules I need to install? Or should I be using another router?
You cannot leave the import statement empty. You need to actually import something.
Generally, it works like this -
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
You can read the react-router-dom documentation to learn more about it.
I'm not able to write the code inside the index.js file. I wrote the code as per the code sandbox section of cube docs. It sends a console warning that my app may work as React 17. When I followed 18.1.0 conventions the page was shown loading and never stopped. Any solution to this?
It's written like this currently and I've added CubeProvider to access cubejsapi at app.js file while setting up routes, which is working fine.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './context/AuthProvider';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>,
document.getElementById('root')
);
Does AuthProvider a default export or named export?
For good practice, move the AuthProvider to the app component .
Index.js need to be codeless as you can.
More of context here : https://reactjs.org/docs/context.html
I created a new React JS app using the Visual Studio 2022 Project Template "Standalone JavaScript React Template"
When I run the project I see the react logo just like when you use "create-react-app" (I'm assuming that Visual Studio 2022 creates the project in the same way)
I want to use Bootstrap in my project so I installed the module by going to the root directory of the project and typing "npm install bootstrap" I can see that the module is installed in the package.json
When I try and import bootstrap in my index.js using this line:
import "/bootstrap/dist/css/bootstrap.min.css";
Then run the app I get this error:
Module not found: Error: You attempted to import /bootstrap/dist/css/bootstrap.min.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/
My question is what is the correct way to import and use bootstrap in my project, did I install it in the right way or is there a diffrent method?
This is my full index.js file for clarity:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "/bootstrap/dist/css/bootstrap.min.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
UPDATE: See sctructure of project
I am using ReactJS and i am facing an issue where as soon as i add react-boostrap CDN in the public/index.html react file or add this link import 'bootstrap/dist/css/bootstrap.min.css'; to index.js, Boostrap automatically disable the use of all the css i have built for the web application.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// REACT-BOOTSTRAP
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint...
reportWebVitals();
I tried to fix it in index.js or any page i want to use import 'bootstrap/dist/css/bootstrap.min.css' by importing that after import './index.css'; or any custom css but it does not seem to solve the conflict, is there a solution out there that i am not aware of?
This is the first time I tried react.
I create a project using create-react-app, then for routing, I use React Router V4 for web react-router-dom.
This is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
There's no problem when I start the server with npm start. But when I build the app with npm run build, putting it in my www folder in my Apache server and access it, I only get empty page with <!-- react-empty: 1 --> inside my root div.
<div id="root">
<!-- react-empty: 1 -->
</div>
I have tried looking for similar cases, but the answer always about adding historyApiFallback in webpack.config.js or gulp, which I can't find anywhere in the create-react-app template.
I have tried HashRouter, it's working fine, but there's /#/ in the url which is undesirable.
How can I get the BrowserRouter to work after I build the app?
Well, there was no problem at all. It worked, even if it was built using npm run build. My best guess is: you placed the files in the wrong folder.
When you build your code using npm run build, the static folder should be placed inside the MallApp folder. So your folder structure should be like this:
/var/www/mywebfolder/index.html
/var/www/mywebfolder/MallApp/static
Check your browser's console, I believe it contains errors. Failed to get the js and css files.