I'm relatively new to React and I'm about to mount my first react component, but when I go to render the code it doesn't mount. Can anyone help me here?
import React, { Component } from 'react';
class Hello extends Component{
render() {
return (
<div>
<h1>Hello California</h1>
</div>
);
}
}
React.render(<Hello />, document.getElementById("root"));
You need to do two things to render this component
1) ReactDOM is the library that will render the component to the bind html Element, so first import ReactDom from the 'react-dom' package
2) Then Call render method of ReactDOM
You only need to call reatDOM.render once method outside the class component
Here's the complete code.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Hello extends Component{
render() {
return (
<div>
<h1>Hello California</h1>
</div>
);
}
}
ReactDOM.render(<Hello />, document.getElementById("root"));
Hope this will work.
You need to use ReactDOM.render() to render a React element into the DOM in the supplied container (Hello).
import ReactDOM from 'react-dom';
// all codes you have
ReactDOM.render(<Hello />, document.getElementById("root"));
Related
I'm building a React-Django application, and on my App component, I'm getting an issue on the final line with my render(<App />, appDiv).
Please can someone tell me what I'm doing wrong? I have the necessary modules imported, and this worked on my previous project. I am aware that Function-based components are better, but I'm more experienced with Class-based.
Error:
Code:
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="center">
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Thanks,
DillonB07
TypeError expanded:
Try to replace:
import { render } from "react-dom";
with
import ReactDOM from "react-dom";
And use ReactDOM.render instead of just render
I am calling two components Welcome and Datecomp. But when I run, Welcome component is not displaying but Datecomp component alone is displaying.
I am calling two components Welcome and Datecomp. But when I run, Welcome component is not displaying but Datecomp component alone is displaying.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome,{DateComp} from './Welcome';
ReactDOM.render(<Welcome/>,document.getElementById('root'));
ReactDOM.render(<DateComp/>,document.getElementById('root'));
Welcome.js
import React, { Component } from 'react';
class Welcome extends Component {
render(){
return(
<div>
<h1>Welcome User</h1>
<p>What is React? React is a declarative,efficient, and flexible
JavaScript library for <br />
building user interfaces. It lets you compose complex UIs
from small and <br />isolated pieces of code called "components".
</p>
</div>
);
}
}
class DateComp extends Component {
constructor(){
super()
var today = new Date(),
date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
this.state={
currentDate:date
}
}
render(){
return(
<div style={{float: "right"}}>
Dated:
{this.state.currentDate}
</div>
);
}
}
export default Welcome;
export {DateComp};
Issue
ReactDOM.render(<DateComp/>,document.getElementById('root')); stomps on what was rendered into #root div by ReactDOM.render(<Welcome/>,document.getElementById('root'));. You can only render one React app per DOM node.
Solution
Render each into different DOMNodes, two React apps. (Probably not what you want).
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';
ReactDOM.render(<Welcome/>, document.getElementById('root1'));
ReactDOM.render(<DateComp/>, document.getElementById('root2'));
Render each into a single node, single React app.
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';
ReactDOM.render(
<>
<Welcome/>
<DateComp/>
</>,
document.getElementById('root'),
);
You can't do that, you are replacing what's inside of root element, so only the last component will display which is <DateComp/>. Use component composition. sth like this.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome,{DateComp} from './Welcome';
ReactDOM.render(<App/>,document.getElementById('root'));
app.js
const App = () => {
return (<div>
<Welcome/>
<Datacomp/>
</div>)
}
I am adding some React scripts to my HTML templates and I am trying to separate React code in separate files. I have not started a full-blown React app. I am therefore trying to import smaller components from other files into a "main" React script.
Here is my directory structure:
react
----components
--------Tag.js
--------Definition.js
----Definitions.js
Here is my code for Definitions.js (the "main" React script):
import Definition from './components/Definition';
class Definitions extends React.Component {
...
render() {
return <Definition definition={definition} />;
}
}
ReactDOM.render(<Definitions />, document.querySelector("#definitions"));
Here is my code for Definition.js:
import Tag from './Tag';
class Definition extends React.Component {
...
render() {
return <Tag tag={tag} />;
}
}
export default Definition;
This code is not rendering any component. What am I doing wrong?
Beforehand you need to render the React application to the actual DOM using ReactDOM.render, so you need to import it and target a valid element:
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <>React App Example</>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
// target a valid element in index.html
<div id="root"></div>
Thats the reason why you not getting any errors, you don't even initial the application.
Then its just a normal import-export.
Please refer to React docs how to initial a React app.
Button.js
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Don’t forget to use export default!
DangerButton.js
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
From: https://create-react-app.dev/docs/importing-a-component/
I'm trying to loop through the child elements so that multiple of them will appear under Div tag.
import React from 'react';
import StatusActivity from './App.js';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return (
<div > {
for(i=0;i<4;i++){
<h1 > asdf </h1> //looping here for h1 tag
}
}</div >
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
move your for loop inside render and outside return
You can push jsx elements into an array and render them inside div like below
Also never forget to add unique key to h1 element inside loop
Try this
import React from 'react';
import StatusActivity from './App.js';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
const items = [];
for(var i=0;i<4;i++){
items.push(<h1key={`Key_${i}`}> asdf </h1>)
}
return (
<div >{items}</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
React project can't detect any change in app.js file
This is my app.js file:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a react app!</h1>
</div>
);
}
}
export default App;
This is the result
Try putting the text I'm a react app! inside a div.
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
} export default App;
You probably need to use ReactDOM to help tell app where to render your component. For instance, if you create a div in your HTML like <div id="root"></div>, then you could use the following code:
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also note that when you return your render, the result should be wrapped in a single tag.