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
Related
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 want to use react-awesome-reveal in my typescript project but the animations doesnt seem to work. However, it works when I use react-reveal. Please advice on what I am missing.
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { Fade } from "react-awesome-reveal";
import ReactRevealFade from "react-reveal/Fade";
import "./style.css";
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<Fade>
<Hello name={this.state.name} />
</Fade>
<ReactRevealFade left>
<Hello name={this.state.name} />
</ReactRevealFade>
<p>Start editing to see some magic happen :)</p>
</div>
);
}
}
render(<App />, document.getElementById("root"));
Stackblitz Code: Link
Any help is appreciated.
Can be fixed by wrapping the component inside a div.
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.
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"));
I am trying to incorporate mobx with react. Since I spawned my application using create-react-app, I can't use decorators given by mobx.
Given that we can use mobx without decorators as per this documentation: https://mobxjs.github.io/mobx/best/decorators.html
Here's a component that I created:
import React, { Component } from 'react';
import observer from 'mobx-react';
export const TestComponent = observer(class TestComponent extends Component {
render() {
return <div>Just a test component!</div>
}
});
Here's a simple calling of the above component:
import React, { Component } from 'react';
import './App.css';
import Auth from './Auth'
import { TestComponent } from './Test'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import authStore from './stores/Store'
class App extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div className="app">
<MuiThemeProvider>
<div>
<TestComponent store={authStore} />
</div>
</MuiThemeProvider>
</div>
);
}
}
export default App;
Now when I run the above component, I get error: Uncaught TypeError: (0 , _mobxReact2.default) is not a function(…) nothing get displays in console.
What am I doing wrong here?
Please use import {observer} from 'mobx-react';
N.B. note that decorators can be used with create-react-app by using custom-react-scripts, as explained here)