React-portal-popout DOM Error version ^1.9.3 - reactjs

I'm currently using "react-portal-popout": "^1.9.3", and when i popout it, following error message comes out.
"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."
Moreover, in my own 'index.js' file, I've already changed my 'index.js' file's DOM version to 18, and just those error comes out only when i used the popup library.
Will there be any way to solve this error?

From React18, react has a bit different structure for creating root element.
You'd need to change your index.js file like below;
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Related

How can I fix error React Routr 6.6 +TypeScript?

I have a problem with using React router 6.6 and Typescript.
I installed React router and added it to Index.js like:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { RouterProvider } from 'react-router-dom';
import { router } from './router';
const root = ReactDOM.createRoot(
....
);
root.render(
<RouterProvider router={router}>
<App />
</RouterProvider>
);
enter image description here
And I'm getting this error:
Type '{ children: Element; router: Router; }` is not assignable to
type 'IintrinsicAttributes & RouterProviderProps'. Property
'children' does not exist on type 'IntrinsicAttributes &
RouterProviderProps'. ts(2322)
enter image description here
How can I fix this issue?
I was expecting to work react router with standard way, but it didn't work.
The new Data routers work a little differently from the older conventional routers. See Picking a Router for more details on the new Data APIs and syntax. Also check the RouterProvider component docs.
The RouterProvider component takes no children, so remove App as a child component.
root.render(<RouterProvider router={router} />);
If you still need to render App somewhere it'll need to be moved into the router object you created with createBrowserRouter (or similar).

Update from reacts-scripts-ts to react--scripts problem

I tried to update from the deprecated library react-scripts-ts to the "new" library react-scripts. I used this link from Vincent Tunru to do that.
But i run then into the Error:
ERROR in ./src/index.tsx 7:0-30
Module not found: Error: Can't resolve './pages/App' in 'C:\develop\remote\src\frontend\src'
I import the App as follow into my start file:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './pages/App';
import { Provider } from 'react-redux';
import { store } from 'src/store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root') as HTMLElement);
I have to do a little change to this file as follow './pages/App.tsx' and this error would go away. But then all the files in App also has to be imported as 'file.tsx' and then inside those imported files too. I would have to change over 200 lines. I don't think that this is the correct way to do it. But how should I solve this Error?

Render another root path with own routes

I am trying to figure render a complete seperate admin path with its own routes.
Is it possible to render say admin page that is with and existing project.
At the moment I have the following code it is working very well.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './client/App.js';
import Admin from './admin/admin.js';
var pathname = window.location.pathname;
if (pathname.substring(0, 6) == '/admin') {
ReactDOM.render(<Admin />, document.getElementById('root'));
} else {
ReactDOM.render(<App />, document.getElementById('root'));
}
I'm struggling to understand what you want to do exactly. You already have everything you need, Admin and App are components and therefore small projects I would say. However, you shouldn't do it that way and instead use react-router it avoids you to check the window location pathname by yourself and will save you a lof of time and headache.

Providing React Context to an imported node module

Is it possible to ES6 import a React component from node_modules that depends on a Context Provider (like react-redux 6.0) without the Provider Context being exported by that module?
For example, the implementation of the import would wrap the imported component with its own Provider.
import App from 'app-package'
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('example'),
);
this works in react-redux 5.1.1 but not in 6.0.0, I assume because 6.0.0 is now using the React Context API. The problem may also be webpack related.
Found this https://github.com/facebook/react/issues/13336.
It seems that <App/> must have its own Provider Context since it is outside of the imperative boundary.
To share store with <App/>, one can use ReactReduxContext.Consumer and pass store as a prop to it (via a component wrapper)

import App from './App';

I am trying react based on create-react-app. I'm new to react.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
./App in import App from './App'; is not clear to me when and where is this created, is this done by babel?
file strucutre
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>myComponent</div>
)
}
}
export default App;
tl;dr
No, it is not done by Babel, instead it is done by create-react-app package.
All the files and folders in that folder are created automatically when you run,
create-react-app your-new-app-name
import App from './App'
The above line is used for importing the class you have written in the file App.js under the same directory.
Next, the difference between,
import App from './App'
and
import App from 'App'
Use the first if you want to import any user defined files and second for importing packages. As Shubham Khatri mentioned, for importing files, it is technically same if you did or did not use .js extension.
The longer version
create-react-app is a starter kit for people who are new to React or for who are lazy enough to build an app from scratch. What create-react-app does is, it will give you a minimal running React app with a solid folder structure. As given in their documentation, you can install that globally by giving,
npm install -g create-react-app
After this whenever you want to create a new app, what you want to do is,
create-react-app your-new-app-name
This will automatically generate a folder with all the files you mentioned.
Within the folder when you open the file public/index.html, you can see a line
<div id="root"> </div>
And on the src/index.js, you can find,
ReactDOM.render(
<App />,{}
document.getElementById('root')
);
If you are familiar with javascript, you may know that document.getElementById('root') is used to match any tag in HTML with ID as root. So the above snippet means that, they are rendering the <App> component of react to div with ID root. This is how React communicates with HTML page.
Rather that writing all the component codes in a single file, it is a good standard to write each components in different files. Here, App.js is a component that basically renders the text myComponent. For using this component in other files, you have to do two things.
Export the component from the file where it is defined. (export default App;)
Import the component to the file where it is used. (import App from './App')
General syntax for import is,
import className, { functionName } from 'packageName'
or
import className, { functionName } from './path-to-file/fileName'
Note: It is that ./ which tells the compiler whether to look on to node_modules folder or the path you mentioned. Use that strictly when you need to import user defined files.
Hope this helps!
When you import your Component like
import App from './App';
It will import your file App.js that is present in the same direcotry as index.js
In webpack configuration we specify which types of files babel needs to build and there if we specify .js or .jsx, it takes by default the extension of the file when we import it. we do not explicitly mention it. You can change your immport to be like
import App from './App.js';
which is technically the same.
The create-react-app npm package makes use of webpack to build your code which you can see from the package/react-scripts/package.json in the github directory

Resources