I am fairly new to React and am having trouble rendering a component in App.js. After much googling I still don't know why I am just getting a blank white page in the browser instead of a printed piece of text as shown in component1.js. Here's my code:
component1.js
import React from 'react';
class component1 extends React.Component {
render() {
return (
<div>
<h1>It's a bit chilly out there</h1>
</div>
);
}
}
export default component1;
App.js
import React, { Component } from 'react';
import {component1} from './component1.js';
class App extends React.component{
render() {
return (
<div>
<component1 />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Could anyone please steer me towards the right path and tell me what I am doing wrong here?
Thanks in advance.
Wrong case :
class App extends React.Component
------------------------↑
Also, component1 must be imported as a default import (not a named import) with a capital letter :
import Component1 from './component1.js';
Related
Im new to react and in the application im working im using a class component Summary
class SummaryList extends React.Component {
//code for the summarylist component here
}
class Summary extends React.Component {
render() {
return (
<Switch>
<Route path="/apply" component={Advance} />
<Route path="/summary/edit/:id" component={EAdvance} />
<Route path="/summary" component={SummaryList} />
</Switch>
);
}
}
export default Summary;
Im using this Summary in other page by importing it and using the component as Summary...
Now the isssue here is i need to use the SummaryList present in Summary in other place....when im trying to import Summay again....its stopped displaying the first place tried with exporting SummaryList seperately below export default Summary...by putting as export {SummaryList} and tried importing it in the second place and in the first place used Summary only....but its not working
If i need to reuse the component what shoud i do...cant i import the same component two times in my application
Yes you can export and import different components and render it multiple times.
Eg:-
App.js
import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';
class App extends Component {
render() {
return (
<div>
<Header />
<Main />
</div>
);
}
}
export default App;
Header.js
import React, { Component } from 'react';
import Main from './Main';
class Header extends Component {
render() {
return (
<header>
<h1>Header Component</h1>
<Main/>
</header>
);
}
}
export default Header;
Main.js
import React, { Component } from 'react';
class Main extends Component {
render() {
return (
<main>
<p>Main Component</p>
</main>
);
}
}
export default Main;
Here Main in rendered in App.js and Header.js
Hi guys I am new to React .Just want to render my component into app component but unable to do so here is my code :
conditionalView.js:
import React, { Component } from 'react'
export class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
export default conditionalView
App.js
import logo from './logo.svg';
import './App.css';
import Bike from './bike';
import Car from './car';
import FnEvent from './FnEvent';
import ClsEvent from './ClsEvent';
import ClsEventBind from './ClsEventBind';
import conditionalView from './conditionalView';
function App() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" />
<Bike name="Caliber 125" />
<Car name="Maruti 800" /> */}
{/* <FnEvent />
<ClsEvent /> */}
{/* <ClsEventBind /> */}
<conditionalView />
</header>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reactDom from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Basically i want to render content of conditionView.js component into App.js but it is not picking up the content.
In react custom components are supposted to start with capital letters. For standard HTML elements, like div, span use lower case.
Also, no need to export twice from ConditionalView.
You can export at the same time of declaration along with the default keyword.
import React, { Component } from 'react'
export default class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
Your component should be PascalCase: ConditionalView, not conditionalView.
This might be happening because you are exporting component more than once
export class conditionalView extends Component {
remove the export keyword from here
React components should always start with a capital letter, so rename <conditionalView /> to <ConditionalView />,
and update the import statement too;
import ConditionalView from './conditionalView';
App.js
import React from 'react';
import './App.css';
import UserInput from './USerInput/UserInput';
import UserOutput from './UserOutput/UserOutput';
userinput succesfully imported but userOutput in not exporting and showing an error
UserOutput.js
import React from 'react';
import './App.css';
I think this is an issue with the React app.
Make sure this is the current structure of your App.js file.
import React, { Component } from "react";
import "./App.css";
import UserInput from './USerInput/UserInput';
import UserOutput from './UserOutput/UserOutput';
class App extends Component {
render() {
return (
<div className="App">
<UserInput />
<UserOutput />
</div>
);
}
}
export default App;
Your imports will work then.
I think you forgot to export from component.
UserOutput.js
export default UserOutput;
or
export default class UserOutput extends React.Component{}
import anywhere
import UserOutput from './...'
And import your Component like this or use direct React.Component
Ways
import React, {Component} from 'react';
and use like this
class UserOutput extends Component{}
or
class UserOutput extends React.Component{} // if you don't import Component
I'm just trying to load the react-bootstrap component , and it doesn't seem to be loading. I feel like I'm missing something obvious. I have installed react-bootstrap and bootstrap. I'm trying to wrap the and export it to App.js
Here is my Navbar component and App.js respectively:
import { Navbar } from 'react-bootstrap';
import { Component } from 'react';
class NavigationBar extends Component{
render(){
return(
<Navbar>
hello
</Navbar>
)
}
}
export default NavigationBar;
import React from 'react';
import NavigationBar from './components/NavigationBar.js'
import { Navbar } from 'react-bootstrap'
function App() {
return (
<div className="App">
<header className="App-header">
<NavigationBar></NavigationBar>
</header>
</div>
);
}
export default App;
Change this line => import React, { Component } from 'react';
import React, { Component } from 'react';
import { Navbar } from 'react-bootstrap';
class NavigationBar extends Component{
render(){
return(
<Navbar>
home
</Navbar>
)
}
}
export default NavigationBar;
New to react.js and trying to following tutorial. Unfortunately the code given in the page didn't work. webpack complained
ERROR in ./App.jsx
Module build failed: SyntaxError: Only one default export allowed per module.
Wonder how to fix it. Thanks.
=== App.jsx====
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li><Link to = "/home">Home</Link></li>
<li><Link to = "/about">About</Link></li>
<li><Link to = "/contact">Contact</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
=== main.js ===
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
UPDATE1
I commented out all the export default and added the following at the end
module.exports = {
App: App,
Home: Home,
About: About,
Contact: Contact
}
Now there is no compile error but the web page is a blank. I am not sure what is wrong here.
You can have only one default export which you declare like:
export default App;
or
export default class App extends React.Component {...
and later do import App from './App'
If you want to export something more you can use named exports which you declare without default keyword like:
export {
About,
Contact,
}
or:
export About;
export Contact;
or:
export const About = class About extends React.Component {....
export const Contact = () => (<div> ... </div>);
and later you import them like:
import App, { About, Contact } from './App';
EDIT:
There is a mistake in the tutorial as it is not possible to make 3 default exports in the same main.js file. Other than that why export anything if it is no used outside the file?. Correct main.js :
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
...
}
class Home extends React.Component {
...
}
class About extends React.Component {
...
}
class Contact extends React.Component {
...
}
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
EDIT2:
another thing is that this tutorial is based on react-router-V3 which has different api than v4.
When you
import App from './App.jsx';
That means it will import whatever you export default. You can rename App class inside App.jsx to whatever you want as long as you export default it will work but you can only have one export default.
So you only need to export default App and you don't need to export the rest.
If you still want to export the rest of the components, you will need named export.
https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
The main issue is that you have used more than one export default keyword.
You could use:
export default App
export {home}
etc etc