Develop Reference

How to Import Component in React JS

I am trying to import Header Component in App.js
but it's giving error.
import './App.css';
import Headers from './Components/Header';
function App() {
return (
<div>
</Headers>
</div>
);
}
export default App;
Header.js
import React from "react";
export default function Headers(){
return (
<div>
Header Demo
</div>
);
}
Header.js file exist in src/Components
Compiled with problems:X
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/sanad/Documents/newapp/src/App.js: Expected corresponding JSX closing tag for . (8:4)

Your problem has nothing to do with importing the module.
Read the error message carefully:
SyntaxError: /home/sanad/Documents/newapp/src/App.js: Expected corresponding JSX closing tag for <div>.
This is because you have a closing tag (</Headers>) but the next element that needs to be closed in <div>.
Your problem is that you need to open the <Headers> element first.
<div>
<Headers></Headers>
</div>

import React from "react";
add this to App.js

Getting 'React' must be in scope when using JSX

I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element

The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;

You need to import React in every file that exports a component (App in this case).

The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850

Hello, World not printing using Functional Component in React js

I'm trying to print Hello World on the localhost using React js.
But the browser page is always blank whenever I run the code.
***App.js***
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import greet from './components/Greet'
class App extends Component{
render() {
return (
<div className="App">
<Greet></Greet>
</div>
);
}
}
export default App;
***Greet.js***
import React from 'react'
/* Greet(){
return <h1>Hello, Neha</h1>
}*/
const Greet = () =><h1>Hello, Neha</h1>
export default Greet;
I have added the Greet component in src folder i.e., src folder -> components folder -> Greet.js
The error that I'm receiving on the terminal is :-
Failed to compile.
./src/App.js
Line 10:8: 'Greet' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.

Change import greet from './components/Greet' to import Greet from './components/Greet'

Why does my React Component Export not work?

I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.
My main file is app.js, which renders everything:
import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
The Hello component comes from my hello.js in the same folder:
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?
Thanks
Gerd

Because your export is default you don't need braces around your import component name:
import Hello from './hello';
Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.
And here's a slightly less techy post about the same topic.

when you import the default class you use
import ClassName from 'something';
and when you import other classes you use
import {ClassName} from 'something';
an example:
in hello.js file
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
class Other extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
export Other;
in other file
import Hello, {Other} from './hello';
tip: you could also import the default class with other name
import Component, {Other} from './hello';

ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number

Learning ReactJS with ES6. Trying to implement React-Bootstrap components. I am also using the react router. I am trying to implement the Navbar component.
It will just be a nabber with the brand and a search box. I aim to expand and use the search box component a lot more so I have put it in its own separate component below.
LocationSearchBox.js
import React, {PropTypes} from 'react'
import Form, {FormGroup, FormControl} from 'react-bootstrap'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit">Submit</Button>
</FormGroup>
)
}
The navber will be on all pages so I have put it in the topmost route and its component is the Main.js file shown below along with routes.js to manage client side routes.
import React, {Component} from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
export default class Main extends Component{
constructor(props) {
super(props);
this.props = props;
}
render() {
return(
<Navbar>
<NavbarHeader>
<NavbarBrand>
React-Bootstrap
</NavbarBrand>
</NavbarHeader>
<NavbarCollapse>
<Search/>
</NavbarCollapse>
</Navbar>
)
}
}
routes.js
import React from 'react';
import ReactRouter, {Router, Route, IndexRoute, browserHistory} from 'react-router';
import Main from '../components/Main';
export var routes = (
<Router history={browserHistory}>
<Route path='/' component={Main} />
</Router>
);
Index.js is below and is the entry file to use in Webpack/babel
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';
ReactDOM.render(routes, document.getElementById('root'));
So when i run web pack-dev-server, go to localhost:8080 as the default port the main route should be hitting. I believe it does but I get errors, namely 3 of the same kind.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Main`.
I believe it might be due to the way I am importing the Navbar components in Main.js, such as NavbarHeader, NavbarCollapse etc but that is a guess. I would really appreciate any help in solving this issue, thank you.

You are using the Button component without importing it:
<Button bsStyle="success" type="submit">Submit</Button>
Import it correctly and the issue should be resolved.