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.
Related
this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
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 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 keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
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"));