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.
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 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();
}
Pardon for this elementary issue.
I'm trying to figure out where to place removeHash() using the NPM react-scrollable-anchor. Link to the documentation is here.
Currently, the hash is removed only after I refresh the page. After the refresh, the location stays where the anchor is. What I would like to happen is that everytime I click an anchor link the URL removes the hash without the need to refresh.
I currently have removeHash() in my main index.js file as seen below.
I did try placing removeHash() at the bottom of my components right above the export statements but that didn't work.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { removeHash } from 'react-scrollable-anchor';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
removeHash();