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.
Related
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 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?
I am learning how to use react alongside node.js and have just completed creating a login form for the front end using react.
I am getting the below error message however, despite following the tutorial.
My code is below.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
serviceWorker.unregister();
A link to the tutorial is below.
Reference link
Thanks for the help.
It could be that your browser does not support service workers. Try this wrapper to only call unregister when service worker is available.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.unregister();
}
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
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import "github-fork-ribbon-css/gh-fork-ribbon.css";
ReactDOM.render(<App />, document.getElementById("root"));
code is this. In last line. I know ReactDom.render means but I cannot figure out what <App /> means. especially "/>"
App refers to the file imported on line 3:
import App from "./App";
Open App.js on the same directory to look at the component. If you used the create-react-app, it is probably the root component of your application.