react Create components to prompt errors
This is the code.
import {React,PureComponent} from 'react';
export default class chainRefeshTool extends React.PureComponent {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
我想输出hello word! 但是页面报错
I want to output Hello word! But the page is wrong.
报错信息如下The error information is as follows:
./src/pages/BackStage/ChainRefeshTool/index.js
Line 4: Your render method should have return statement react/require-render-return
Line 5: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 5: Missing semicolon semi
Search for the keywords to learn more about each error.
There's nothing wrong with your code, but your import statement is incorrect; it should be:
import React, { PureComponent } from 'react';
Then you can simply extend PureComponent instead of React.PureComponent:
import React, { PureComponent } from 'react';
export default class chainRefeshTool extends PureComponent {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
There's also nothing wrong with just using the default React export:
import React from 'react';
export default class chainRefeshTool extends React.PureComponent {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
The problem here is with you import statement. It should be as follows
import React, { PureComponent } from 'react';
Moreover, when you are extending PureComponent it should be like this:
export default class chainRefeshTool extends PureComponent {
This is because you already imported PureComponent as named export from react.
That's why no need to use React.PureComponent while extending.
Related
I'm really new in react and I'm having problems with this:
I create a class and imported it into the App.js file, like this:
The class:
import React,{component} from "react"
class Begin extends component{
render(){
return(
<div>General Kenobi</div>
)
}
}
export default Begin;
then the App with the class imported:
import './App.css';
import Begin from './example'
function App() {
return (
<div className="App">
Hello there
<Begin />
</div>
);
}
export default App;
If I remove the I see on the browser the strip "Hello there", but when I put it, nothing is shown, not even the "Hello there"
I'm not quite sure what I'm doing wrong
Thanks in advance
React class component need to extend from Component class with capital letter C
import React, {Component} from "react"
class Begin extends Component{
render(){
return(
<div>General Kenobi</div>
)
}
}
export default Begin;
I'm new in React Js don't judge me bad for it. I was writing some class to learn but unfortunately I can't export and import one of my class.
import React from "react";
class Yozuvla extends React.Component{
render(){
return(
<div>
<p>Ismingiz</p>
<p>Familyagiz</p>
</div>
);
}
}
export default Yozuvla;
Here is the second class which can't be imported
import React from "react";
import yozuv from "./components/Form";
class App extends React.Component{
render(){
return (
<div>
<yozuv/>
</div>
);
}
}
export default App;
yozuv class don't show up why.browser is white like snow
Classname should be in PascalCase,
import yozuv from "./components/Form";
this should be
import Yozuv from "./components/Form";
Usage
<Yozuv/>
When you add any element like <yozuv/> (starts with small letter), react takes it as a normal HTML tag and NOT a React Component.
import React, { Component } from 'react'
// make sure the location of file is the same for Yozuvla
import Yozuvla from'./components/Form'
class App extends Component {
render() {
return (
<div>
<Yozuvla/>
</div>
)
}
}
export default App;
tell me in commit it work or not
i've a component that i import, but its not displayed on the page.
this is my app.js file. i imported the <player/>component but it is not getting displayed properly on the browser.
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { player } from "./player";
class App extends Component {
render() {
return (
<div className="App">
<div>
<player />
</div>
</div>
);
}
}
export default App;
this is the contents of the player.js
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot() {
this.setState.shoot = Math.floor(Math.random() * Math.floor(3));
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot}>Shoot another
value</Button>
</div>
);
}
}
In your code, you've exported your player component as a default export
export default class player extemds React.Component
But in your import of it in the other file, you're importing it as a named export
import { player } from "./player";
Try importing it without the curly braces as you would with a default export
import player from "./player";
You are doing two mistakes:
1. Importing the component in the wrong way
2. Rendering the component in the wrong way
Solution
The component should be imported without the curly braces
The react component "player" is supposed to start with capital letters i.e. it should be renamed as Player
Below is the working code I have tried in my local machine. It only modifies App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player"; // imported without curly braces and with capital first letter
class App extends Component {
render() {
return (
<div className="App">
<div>
<Player /> {/* Rendering the correct way */}
</div>
</div>
);
}
}
export default App;
Sidenote
In player.js, you are setting the state in the wrong fashion, it won't work because:
setState is a method and not a object
this is not binded with method shoot. It will throw error something like "cannot read this of undefined" or something
Modify your player.js as following:
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot = ()=>{
this.setState({
shoot: Math.floor(Math.random() * Math.floor(3)),
});
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot()}>Shoot another
value</Button>
</div>
);
}
}
You have two main issues:
1) You export as default and then your import is wrong.
If you export as:
export default class player extemds React.Component
Then you need to import as:
import player from "./player";
2) Components must start uppercase, otherwise React thinks that they are simple HTML tags and not components.
So you must change player to Player everywhere
I am trying to set up a basic example of react, this is my code to show the page
import React from "react";
import { render } from "react-dom";
class App extends React.Component {
render() {
return (
<div>
<h1>Hello!</h1>
</div>
)
}
}
render(<App/>, Window.document.getElementById('app'));
and am getting the error:
SyntaxError: Unterminated JSX contents (22:13)
render(< App/>, window.document.getElementById('app'));
No need to use window
Simply write
render(<App/>, document.getElementById('app'));
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)