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';
Related
I am using VSCode to create a react app, I have multiple folders as shown in the first image:
This is my App.jsx
import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Note from "./components/Note";
function App() {
return (
<div>
<Header />
<Footer />
<Note />
</div>
);
}
export default App;
This is my Index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />, document.document.getElementById("root"));
reportWebVitals();
This is my Header.jsx
import React from "react";
function Header() {
return (
<header>
<h1>Keeper</h1>
</header>
);
}
export default Header;
This is my Footer.jsx
import React from "react";
function Footer() {
const date = new Date();
const curretYear = date.getFullYear();
return (
<footer>
<p>copyright ⓒ {curretYear}</p>;
</footer>
);
}
export default Footer;
I am trying to learn react on VSCode, the same code works on Codesandbox, but I can't get it to work on my VSCode, and I am not getting any errors in the terminal. I am learning React and I would like the help.
Your import paths in App.jsx appear to be wrong try ./Header etc. Remember that import paths are relative and since the imported modules are on the same level as App.jsx, you don't need to go through the components folder
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';
I keep getting this error message(see 1st image below), when I run my ReactJS app(in the browser, and in the terminal).
Error message in browser:
My problem is that I have exported my App.js file. So I don't understand where the error message is coming from. All of my other files in the app have also been exported correctly.
Code from Code Editor:
Here is my code as text from the App.js file:
import React, { Component } from 'react';
//import 'bootstrap/dist/css/bootstrap.css';
import Navigation from './Components/Navigation';
import SideNavigation from './Components/SideNavigation';
import Backdrop from './Components/Backdrop';
//import DrawerToggleButton from './Components/DrawerToggleButton';
import About from './Components/About';
//import Portfolio from //'./Components/Portfolio';
import Contact from './Components/Contact';
import Footer from './Components/Footer';
import './App.css';
class App extends Component {
render() {
return(
<div>
<Navigation />
<SideNavigation />
<Backdrop />
{/* <DrawerToggleButton /> */}
<About />
{/* <Portfolio /> */}
<Contact />
<Footer />
</div>
)
}
}
export default App;
There are number of reasons you can face this error.
1) If your App Component looks like this export const App = () => ....all your code,
try importing your App component like this import {App} from './App'
2) Try making your App component using a class like export default class App extends React.Component
Hope this helps..
I have just started to learn React.js and material-ui. I was using this to display an icon on screen. However the icon is not displayed on the screen and the screen appears to be blank.
Here is my code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {IconButtonExampleSimple} from './IconButtonExampleSimple.js';
class App extends React.Component{
render()
{
return(
<MuiThemeProvider>
<IconButtonExampleSimple />
</MuiThemeProvider>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
IconButtonExampleSimple.js
import React from 'react';
import IconButton from 'material-ui/IconButton';
export class IconButtonExampleSimple extends React.Component{
render ()
{
return (<div>
<IconButton iconClassName="muidocs-icon-custom-github" />
<IconButton iconClassName="muidocs-icon-custom-github"
disabled={true} />
</div>
);
}
}
Add this line to your index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
You are including the Material-UI part of the icon buttons but those are refering to google's Material-Icons so you must link it in your index file.
I am trying to do a sidebar with Reactjs but I am not getting it.
I want to know how to pass the props from App.js to Middle.js correctly.
I have the structure index.js > routes.js > App.js > Header.js, Middle.js > Sidebar.js, (DashboardPage.js, AccountPage.js - pages to be rendered dinamically)
Header.js -> Has a IndexLink at image
Sidebar.js -> Has a IndexLink and a Link to render AccountPage.js
The route is set for App.js, but the component is supposed to load inside the Middle.js component.
Here are my codes:
index.js
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
render(
<Router history={browserHistory} routes={routes} />, document.getElementById('app')
);
routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import DashboardPage from './components/middle/dashboard/DashboardPage';
import AccountPage from './components/middle/accounts/AccountPage';
export default (
<Route path="/" component={App}>
<IndexRoute component={DashboardPage} />
<Route path="accounts" component={AccountPage} />
</Route>
);
App.js
import 'babel-polyfill';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import Header from './common/Header';
import Middle from './middle/Middle'
import '../../css/style.css';
class App extends React.Component{
var { app } = this.props;
render() {
return (
<div>
<Header />
<Middle />
</div>
);
}
}
export default App;
Header.js // IndexLink at img
'use strict';
import React from 'react';
import User from './User';
import {IndexLink, Link} from 'react-router';
import '../../../css/header.css';
class Header extends React.Component{
render() {
return (
<div className="contactto-header">
<div className="contactto-header-content">
<IndexLink to="/"><img className="contactto-header-content-logo" src="static/img/logo.png" alt="contactto logo" /></IndexLink>
<div className="contactto-header-content-alarm"></div>
<div className="contactto-header-content-user">
<User />
</div>
</div>
</div>
);
}
}
export default Header;
Middle.js
'use strict';
import React, {PropTypes} from 'react';
import '../../../css/middle.css';
import SideBar from './SideBar'
class Middle extends React.Component{
render() {
return (
<div className="contactto-middle">
<div className="contactto-middle-content">
<SideBar />
{app.children} // should render here
</div>
</div>
);
}
}
export default Middle;
Sidebar.js
'use strict';
import React from 'react';
import {IndexLink, Link} from 'react-router';
import '../../../css/sidebar.css';
class SideBar extends React.Component{
render() {
return (
<div className="sidebar-container">
<ul className="sidebar-container-ul">
<li className="sidebar-container-ul-li">
<IndexLink className="sidebar-container-ul-li-a" to="/">Dashboard</IndexLink>
</li>
<li className="sidebar-container-ul-li">
<Link className="sidebar-container-ul-li-a" to="accounts">Contas</Link>
</li>
</ul>
</div>
);
}
}
export default SideBar;
What is wrong?
I am new with React, if another code is not done correctly please tell me :)
Thanks in advance.
First of all, your route components will be available under App through this.props.children. If you want to wrap them with you can try like this:
class App extends React.Component{
render() {
return (
<div>
<Header />
<Middle>
{this.props.children}
</Middle>
</div>
);
}
}
An then in the Middle.js
class Middle extends React.Component{
render() {
return (
<div className="contactto-middle">
<div className="contactto-middle-content">
<SideBar />
{this.props.children}
</div>
</div>
);
}
}
It's a bit unclear what you're asking, but it seems that you want to know how to pass a prop from App.js to Middle.js. Here's how:
class App extends React.Component{
var { app } = this.props;
render() {
return (
<div>
<Header />
<Middle someProp={someValue} />
</div>
);
}
}
Now in Middle.js you can access someProp in this.props.someProp.
Maybe you can use https://www.npmjs.com/package/react-side-bar. There are a complete example in Example and looks fine.
npm install --save react-side-bar