i have a issue with my projec, i am doing everything just like the man of tutorial, but when i run the server, my http://localhost:3000/ show me nothing, there is not error, but neither do nothing.
All this hapenned when i imported the react-roter-dom and changed the App.js
from This
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
to this
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}> </RouterProvider>
</div>
);
}
export default App;
and it should at least show the message "this is home world"
Please help me, Because i dont know what is hapening, no show error but it doesn't do anything either
this is what i got
after the router dom
before put the router dom show me " hello world" with this
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
index.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
dev console
App.js
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}/>
</div>
);
}
export default App;
the consolo show me these errors
I think you just didn't save the initial code. You might want to turn on autosave on your vs code. And use the normal react render method for your index and app files.
Index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root'));
App.js:
import React from 'react'
const App = () => {
return (
<div>
<h1>GPT-3</h1>
</div>
)
}
export default App
Try to run this but save the code or turn on auto-save
Building a test web3 website and can't figure out why to react is showing blank. Hoping you guys can help!
App.js
import { useState } from 'react';
import './App.css';
import MainMint from "./MainMint";
import NavBar from "./NavBar";
function App() {
const [accounts, setAccounts] = useState([]);
return (
<div className="App">
<NavBar accounts={accounts} setAccounts={setAccounts} />
<MainMint accounts={accounts} setAccounts={setAccounts} />
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
I get this error every time I create a new React app:
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
How can I fix it?
I created my React app using:
npx create-react-app my-app
In your file index.js, change to:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
For Typescript
Credit from comment section below answer: Kibonge Murphy
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
React 18 shipped March 29th, 2022. ReactDOM.render has been deprecated in React 18 and currently issues a warning and runs in a compatible mode.
Deprecations
Deprecations
react-dom: ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.
react-dom: ReactDOM.hydrate has been deprecated. Using it will warn and run your app in React 17 mode.
react-dom: ReactDOM.unmountComponentAtNode has been deprecated.
react-dom: ReactDOM.renderSubtreeIntoContainer has been deprecated.
react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated.
To resolve it, you can either revert to a previous version of React or update your index.js file to align with the React 18 syntax.
Example:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Instead of:
import ReactDOM from 'react-dom'
ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))
Use:
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)
More details here
Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);
After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);
Before in your index.js file:
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')
);
reportWebVitals();
Change it like below into your index.js file:
import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<React.StrictMode>
<App />
</React.StrictMode>);
reportWebVitals();
To provide more or less an equivalent to prior versions of React, I use this slightly condensed version of the above, still surrounding the <App> with the <React.StrictMode>.
Another reason I condense this is that - in my specific pipeline - I never need to access the root variable, consequently, chaining statements together makes more sense to me, and the whole file is just five lines of code:
import React from 'react';
import ReactDOM from "react-dom/client";
import './index.css';
import App from './App';
ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode><App /></React.StrictMode>);
(P.S.: Don't forget if you need the webvitals functionality to also add to the above code)
Finally, I save this starter code as a Live Template using the WebStorm IDE. Depending on your IDE your snippets may be called differently, but the idea should be similar.
As you said, you created your React app using: npx create-react-app my-app.
Your index.js must look like this after the command executes.
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')
);
reportWebVitals();
Your code after edits mentioned in the console
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
reportWebVitals();
As your error states, ReactDOM.render is no longer supported. So use the new createRoot.
As you can see from the code below, (which was pulled from the documentation) all you have to do is replace ReactDOM.render with createRoot.
// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);
// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);
In your index.js file:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
Use this before React version 18
// ReactDOM.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
// document.getElementById("root")
// );
Use this in React version 18
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
This should do it:
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById("root"))
root.render
(
<App />
)
If your application is using React-Router, then the following code will work fine:
import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
It will work perfectly (with react-router).
In React 18. For those that are using custom Webpack configurations, follow React Refresh Webpack Plugin. They have some HMR built in.
We are supposed to use fast refresh that has been developed by the React team.
It resolved that error message for me.
import React, {createRoot} from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render( <App />);
Use:
import ReactDOM from "react-dom/client";
const element = document.getElementById("root");
// Tell React to take control of that element
// In TypeScript, since there is a bug, you need to add the "!" element!
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43848
const root = ReactDOM.createRoot(element!);
const App = () => {
return (
<React.StrictMode>
<div>
<h1>Hello world!</h1>
</div>
</React.StrictMode>
);
};
root.render(<App />);
Use:
import React, { useEffect } from "react";
import { createRoot } from "react-dom/client";
const App: React.FC<{}> = () => {
useEffect(() => {
fetchOpenWeatherData("Toronto")
.then((data) => console.log(data))
.catch((err) => console.log(err));
}, []);
return (
<div>
<img src="icon.png" />
</div>
);
};
const rootEl = document.createElement("div");
document.body.appendChild(rootEl);
const root = createRoot(rootEl);
root.render(<App />);
I am working with react. when I make changes in a file, after saving the file, my component gets rendered but I am not able to click/interact with the webpage. I need to refresh it again then only I can interact with the webpage. index.js file.
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import store from "./helpers/store";
import * as serviceWorker from "./serviceWorker";
import { App } from "./app";
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
if (module.hot) {
module.hot.accept();
}
serviceWorker.unregister();
Try this:
module.hot.accept('./App.js', () => {
const NextApp = require('./App.js').default;
ReactDOM.render(<NextApp />);
});
Tried to transfer data from 2 components to one using the same method, but it is working only for 50%. There are 3 documents: App.js, Hort.js, Hord.js. Transfering from app.js to hort.js is working, but from hord.js to hort.js isn't. What could be the reason?
App.js:
import React from 'react'
import Hort from './Hort'
function App(props) {
const text1 = 'check1'
return (
<Hort test1={text1} />
);
}
export default App;
Hord.js:
import React from 'react'
import Hort from './Hort'
function Hord(props) {
const text2 = 'check2'
return (
<Hort test2={text2} />
);
}
export default Hord;
Hort.js:
import React from 'react'
import App from './App'
import Hord from './Hord'
function Hort(props) {
return (
<div>
<h1>Just {props.test1}</h1>
<h2>Just {props.test2}</h2>
</div>
)
}
export default Hort;
You are never rendering <Hord>, if a component is never rendered, it won't render what's inside it.
In your index.js, you probably have code that looks like this:
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
This code indicates that the <App> component will get rendered in the root element from your index.html.
So starting from the <App> component, you can build your component tree, because you never call <Hord>, it will never render, nor will the components rendered inside <Hord>.
Render <Hord> inside your <App> component.
import React from 'react'
import Hort from './Hort'
import Hord from './Hord'
function App(props) {
const text1 = 'check1'
return (
<Hort test1={text1} />
<Hord />
);
}
export default App;
As mentioned in the comments, you shouldn't import components that could cause infinite loops.
import React from 'react'
// * removed imports
function Hort(props) {
return (
<div>
<h1>Just {props.test1}</h1>
<h2>Just {props.test2}</h2>
</div>
)
}
export default Hort;