We Keep Coding

App file in React does'nt recognize jsx syntax

This is really quite weird. My (App.js) file recognizes jsx syntax fine when App is a function,
however when I convert it into a class it doesn't recognize jsx at all.
Here's the code:
recognizes jsx when App is a function
import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
function App() {
return ( <h1></h1>
);
}
export default App;
but when I convert it to a class it doesn't recognize jsx:
import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';
class App extends Component {
return ( <h1></h1>
);
}
export default App;
I was following a tutorial, and in the tutorial (App) was a class and it worked just fine.
Any help would be much appreciated.

When using a class component, the return statement needs to be inside a render method, like this:
import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';
class App extends Component {
render() {
return (<h1></h1>);
}
}
export default App;

React.js TypeError: Object(...) is not a function

I'm developing an app fetching api and displaiy it using ReactJS, My index.js file is:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render( < App /> , document.getElementById('root'));
registerServiceWorker();
the error is
TypeError:
Object(...) is not a function
in Module../src/index.js
how do I solve this? Thanks!
My App.js code is here
import React, {
Component
} from 'react';
import PokeList from './PokeList';
import './styles/App.css';
class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return ( <div className = "App" >
<PokeList />
</div>
);
}
}
export default App;
PokeList.js
import React from 'react';
import './styles/PokeList.css';
const PokeList = () => {
return ( <section className = "poke-list" >
</section>
)
}
export default PokeList;

I think You just need to upgrade to react > 16.8. There are no breaking changes in regards to react, so you should be fine.

Reactjs TypeError: Class extends value undefined is not a constructor or null

Actually I have just started learning react. I'm taking tutorials from websites. but when I compiled my this code in command line it says "Compiled Successfully" but when I open the browser it says
"TypeError: Class extends value undefined is not a constructor or null"
Actually I don't know how to fix this issue. But due to this error I'm unable to continue my course.
import React, {component} from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';
class App extends component {
constructor(){
super()
this.state = {
robots: robots,
searchfield: ''
}
}
onSearchChange(event) {
console.log(event.target.value);
}
render () {
return (
<div className='tc'>
<h1> RoboFriends </h1>
<SearchBox searchChange={this.onSearchChange}/>
<CardList robots ={this.state.robots}/>
</div>
);
}
}
export default App;

React uses PascalCase naming for components (class),
import React, {component} from 'react';
here component should be Component
import React, {Component} from 'react';
class App extends Component {
Or you have another way,
import React from 'react';
class App extends React.Component {

Capitalize the word "component"
import React, {Component} from 'react';
class App extends Component

0
when you import React then try React.Component and never use React.Component**()** remove these parenthesis. then this error has been Gone.
import React from 'react'; ...... class App extends React.Component { }
or You can try this.
import React, {Component} from 'react'; ...... class App extends Component {

Error on compiling in React application

Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of App.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
//App.js
import React, { Component } from 'react'; //import logo from
'./logo.svg'; import './App.css';
import HeaderComponent from
'./Components/HeaderComponent/HeaderComponent';
import FooterComponent from './Components/FooterComponent/FooterComponent';
import Main from './Components/Main/Main';
const App = () => {
return(
<div>
<HeaderComponent />
<Main />
<FooterComponent />
</div> ) }
export default App;

I think the error is very clear, one of your imports is not importing a valid react component.
To fix this, make sure all your imports are exporting a react component, either a class or a function for stateless components.
you might have something like the following for each component.
export default HeaderComponent extends Component { ... }
export default Main extends Component { ... }
export default FooterComponent extends Component { ... }

Enzyme/Jest Testing Error - Invariant Violation: Target container is not a DOM element

I'm new to doing unit testing and I keep getting the error: Invariant Violation: Target container is not a DOM element. I think it has to do with the way my app.js is structured because it keeps referencing this line ReactDOM.render(, document.getElementById('app'));. Here's how it's structured now:
import React from 'react';
import ReactDOM from 'react-dom';
import HomePage from './HomePage';
class App extends React.Component {
render() {
return (
<div>
<HomePage />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Does this need to be restructured for testing purposes?

You should separate between the two parts of the file, the Component declaration & mounting into the Dom via ReactDom.
The ReactDom has nothing todo with tests.
import React from 'react';
import ReactDOM from 'react-dom';
import HomePage from './HomePage';
// App.jsx
import React from 'react';
import HomePage from './HomePage';
export class App extends React.Component {
render() {
return (
<div>
<HomePage />
</div>
)
}
}
// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
ReactDOM.render(<App />, document.getElementById('app'));