I'm trying to render two modules to the DOM.
When I do an 'npm start', it runs, but it's only showing the CharacterApp part. The main app(App) doesn't show up.
Here is my index.js file code:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import CharacterApp from "./Characters/App";
import './CharacterApp/index.css';
ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<CharacterApp />, document.getElementById("root"));
CharacterApp is structured like this:
function App() {
....
}
export default App
And App looks like this:
const App = () => (
....
);
export default App;
Since it's not showing errors, I'm kinda lost as to why it's not showing both on the DOM.
Is there anything I'm missing?
Thanks!
React will replace the entire content of the specified element with the render output when it is called - which is also why you should not render into document.body.
You will want to use two separate containers (perhaps create another div element and give it a unique id). Alternatively, if you don't need to have the separation of two react apps, you could instead combine the two into a single app:
ReactDOM.render(
<React.Fragment>
<App />
<CharacterApp />
</React.Fragment>,
document.getElementById('root')
)
How can it render two modules ? you are rendering the App module in a div with id='root' and then you are overwriting it with another module. Its the correct behaviour you can not render two modules like that.
If you want to render both modules in the same page, create a separate component and import your App and CharacterApp in that module and then render that new component in the dom i.e
ReactDOM.render( <YourNewComponent /> ,
document.getElementById('root')
)
And if you do not want to create a seperate component, you can just simple do this.
ReactDOM.render(
<React.Fragment>
<App />
<CharacterApp />
</React.Fragment>,
document.getElementById('root')
)
`ReactDOM.render(
<React.Fragment>
<App />
<CharacterApp />
</React.Fragment>, document.getElementById('root'))`
> this will work. you can not use same 'root' for rendering 2
> components. instead you can group them in one or use different div
> Ids.
This code is the culprit:
ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<CharacterApp />, document.getElementById("root"));
You're using the same div for showing your apps, so the second statement is replacing the App component with CharacterApp.
You can create two divs in index.html, say, div#root-app and div#root-character-app, and then render the two components to the two containers respectively.
Related
ReactDOM.render(
<App />,
document.getElementById('root')
So what should I understand when i see something like this at the end of the app? What does 'root' or 'demo' stand for?
It's the element that exists in the original HTML that all of the React contents go into. For example, if your HTML contains:
<body>
<div>Maybe some other content here</div>
<div id="root"></div>
</body>
React rendering into the #root means that everything App renders will be put into that element:
<div id="root">
<!-- App populates this element -->
</div>
The element selected to be populated can be any element you want - it doesn't have to be root or demo in particular.
I'm assuming you're using Create React App. Have a look at public/index.html. There you'll see <div id="root"></div> which is what document.getElementById('root') is referring to.
Inside the HTML main file index.html of a React App, normally, you might see a <div> tag with id=root.
This code:
ReactDOM.render(
<App />,
document.getElementById('root')
MEANS: Render the whole React App into the element with id=root.
Many React beginners are curious about this thing, so was I. Therefore I will try explaining this in simple words.
When Browser gets response from server and starts rendering, it goes to the root file which in most cases is public/index.html, and render the same file most first.
Inside this html a <div> element is written whose id is "root"
<div id="root"> <div>
Then control goes to another file that is index.js.
Inside this .js file, a component is used (in most React apps this component is called <App/>.
ReactDOM.render(
<App />
document.getElementById("root"),
);
This <App/> component is the most first component that is rendered on the screen. Every Component is defined inside this component or it's children.
And document.getElementById("root") renders the index.html file that is the root file.
This is how all the components are rendered and your React App starts working.
I'm a newbie here so apologies for what might be a very elemental question.
I am trying to fiddle with different ways to import components in React by following a tutorial but I can't seem to make it work. There must be a simple tweak that I am sorely missing.
I am trying to create export a component (Person2) to another JS (App)
Person2.js
import React from 'react'
import ReactDOM from 'react-dom'
function Person2(){
return (
<div>
<h1>Millie</h1>
<p>PERSON 2</p>
</div>
);
}
/*
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('#p2')
);
*/
//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));
App.js
import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render
function App() {
return (
<div className="App">
<header className="App-header">
<p>this is the header</p>
</header>
<body>
<div class="w3-row">
<Person name="Max" age="28"/>
<Person name="Ann" age="18"/>
<div id = "p2"></div>
</div>
</body>
</div>
);
}
export default App;
Any idea where I went wrong?
I'm getting an error "Error: Target container is not a DOM element."
ReactDOM.render is usually used only for rendering your root component, I don't think you should use it in that case. With that said, the problem is the order the code is executed. You try to render your Person2 component in a node that hasn't been yet rendered, thus you get that error
Unless you have a very strange use case, you should be using export not ReactDOM.render for this example.
In Person2, change to this:
//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;
Then to use it, in App change to this:
import Person2 from './Person2'; // for default export
...
<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this
If for whatever reason your app requires the use of ReactDOM.render here, I'd add a check for safety to make sure the element exists first.
if (!!document.getElementById('p2')) {
ReactDOM.render(<Person2/>, document.getElementById('p2'));
}
I am trying Reactjs for the first time, but when want to render something, it only renders it when I restart my project. If I hit save, nothing happens. Have someone met with this problem yet?
import React from 'react';
function App(){
return (
<div>
<h1>Hello React</h1>
<button>Button</button>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
If you want the app to render the latest changes you made to the source files, you have to implement hot-reloading.
Check this site for more info : https://gaearon.github.io/react-hot-loader/getstarted/
It will scan changes you do to the source files and automatically apply the changes to the running app. It will also make sure that the state of the app is not lost during this change.
I am using React with semantic-ui-react library. The problem is when i use semantic-ui Dimmer and try to connect a component inside it to redux i get the error: Uncaught Invariant Violation: Could not find "store" in the context of "Connect(myComp)".
I managed to get over this error by wrapping the inner component in Provider like this:
import { Dimmer } from 'semantic-ui-react'
import { Provider } from 'react-redux'
import store from '../storelocation/store'
import SubComp from './subComp'
class App extends React.Component{
render(){
return(
<div>
<Dimmer>
<Provider store={store}>
<SubComp/>
</Provider>
</Dimmer>
</div>
)
}
}
Doing this, my SubComp is now able to connect(mstp,mdtp).
Such problem is not showing up in any other part of the app. I have wrapped my root component in Provider in my index.js like this:
ReactDom.render(
<Provider store={store}>
<App/>
</Provider>, document.getElementById('root')
);
Now since wrapping my SubComp in provider each time i use it, fades the smile from my face, i am looking for a better option and maybe a correction if i am doing something terribly wrong here. tnx.
The problem here occurs because Semantic-UI-React uses React Portals for components like Modal, Confirm, Dimmer, Popup etc.
For more information about Portals and why this problem occurs, you may refer to this comment.
Unfortunately there seems to be no better way than wrapping your own components under Portal with a Provider via extracting store (as you have done) as of now.
I started learning React and now I'm trying to understand what is the purpose of the index.js and App.js which are created by by running create-react-app.
Why can't we just use, for example. App.js?
I've read that App.js usually used as a main entry point to the application, but auto-generated code of index.js seems like a part of main entry point:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I saw a similar questions for react native but I want to know about this in react in general.
index.js is the traditional and actual entry point for all node apps. Here in React it just has code of what to render and where to render.
App.js on the other hand has the root component of the react app because every view and component are handled with hierarchy in React, where <App /> is the top most component in the hierarchy. This gives you the feel that you maintain hierarchy in your code starting from App.js.
Other than that, you can have the App logic in the index.js file itself. But it's something related to conventions followed by the community using the library or framework. It always feels good to go along the community.
Great question. The answer is that App.js is not necessary and I personally delete it and just use Index.js as the root.
People "say" it makes it look nicer / easier but it is just adding an extra step that is not necessary. I hope that they will eventually delete App.js out of npx create-react-app and just use index.js.
Edit: I'm not going to alter my original comment, however, I gave up deleting App.js. I now just funnel everything through App.js and use Index.js. The nice thing about index.js is you can do all your imports there and funnel them through App.js
Yes, App.js is not necessary. You can have just the index.js as follows.
// Import React and ReactDOM Libraries.
import React from 'react';
import ReactDOM from 'react-dom';
import CommmentDetail from './CommentDetail';
function getLabelText() {
return 'Enter Name: ';
}
// Create React Components
const App = () => {
const buttonText = {text: 'Submit'};
const buttonStyle = {backgroundColor: 'blue', color: 'white'};
return (
<div>
<label className="label" htmlFor="name">{getLabelText()}</label>
<input id="name" type="text" />
<button style={buttonStyle} >{buttonText.text}</button>
// You can have other components here as follows.
// CommmentDetail is someOther component defined in another file.
// See the import statement for the same, 4th line from top
<CommmentDetail author='Nivesh' timeAgo='3 months ago at 4.45 PM' commentText='Good Point' } />
</div>
)
}
// Take the react component and show it on the screen
// ReactDOM.render(<App />, document.getElementById('root'));
// You can use the following as well.
ReactDOM.render(<App />, document.querySelector('#root'));
import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div className="App">
<h1>Hello</h1>
<h2>How are you!</h2>
</div>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
This is a sample where we can directly implement without using App.js.
App.js is the "top component" that contains the logic of your Application whereas index.js is the "entry point" for your server and contains the logic of the server.
This can also help to have multiple Applications if needed to switch from one to the other without changing anything in the server.
create-react-app use a plugin for webpack that name is html-webpack-plugin and this plugin use index.js for entrypoint like below :
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
this plugin use for generating html file.