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;
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';
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 have a mini project in which the first page having title homepage but the next page contacts is click through link it retains the homepage as title. I've explicitly declared title as Contact Us but then also it shows Homepage.
Here's my code:
For App.js:
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import ContactUs from '/Users/yashchoksi/Documents/linking/src/ContactUs';
class App extends Component {
render() {
return (
<Router>
<div>
<title>HomePage</title>
<Link to="/src/ContactUs">Contact Us</Link>
<Switch>
<Route exact path="/src/ContactUs" component={ContactUs}/>
</Switch>
</div>
</Router>
);
}
}
export default App;
And for Contact Us page:
import React, { Component } from 'react';
class ContactUs extends Component {
render(){
return(
<div>
<title>ContactUs</title>
Hello From COntactUs.
</div>
);
}
}
export default ContactUs;
Please see and tell me how to declare title for dynamic naming!
You can set it in your component:
import React, { Component } from 'react';
class ContactUs extends Component {
componentDidMount() {
document.title = 'Contact Us'
}
render(){
return(
<div>
<title>ContactUs</title>
Hello From COntactUs.
</div>
);
}
}
export default ContactUs;
Just use the following code:
componentWillMount(){
document.title="Title name";
}
Edit:
componentWillMount will be deprecated in React 17, so you can use componentDidMount instead.
For better api and server rendering, use react-helmet. It is also a one-liner at its simplest.
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