I'm new to React and as I'm following a tutorial I need to divide different components into their own files. I tried making a separate file for the Header component but all I get is a white screen.
Main React file:
import Header from "./Header"
function Page(){
return(
<div>
<Header />
</div>
)
}
ReactDOM.render(<Page />, document.getElementById('root'))
The file for the Header component is called Header.js and it's in the same directory.
Header.js:
export default function Header(){
return(
<header>
<nav className="nav">
<img className="logo" src="./react-logo.png" />
<ul className="nav-items">
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
This is probably so simple to fix but I don't know how to fix it
Related
This one is my output image for your better understanding what i am trying to ask
This is my file where the link is to be clicked in this i am just trying on link to be clicked. When i click link you can see the output comes at down part of the same page instead of on the other page
<BrowserRouter>
<div className="footer-col">
<h4 className="h"> About Order</h4>
<ul className="u1">
<li>
<Link to={{ pathname: "/aboutus" }}>About us</Link>
</li>
<li><a>Track My Orders</a></li>
<li><a>Checkout</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<Routes>
<Route path="/aboutus" element={<Aboutus />}></Route>
</Routes>
</BrowserRouter>
This one is my About us file.
import React, { Component } from "react";
import Combinecases from "../Cases/combinecases";
import './Aboutus.css'
class Aboutus extends Component{
render() {
return (
<div>
<h1 className="h12">HIIIIIII</h1>
</div>
);
}
}
export default Aboutus;
i'm working on some react projects and i've tried to orginize my code by moving some components to another files then import them but when i do that it just give me a blank page , when i write (import Header from "./Header") it starts to give blank page while it was working when i was putting all of the code in index.js only .
this is my main index code:
import Header from "./Header"
import Footer from "./Footer"
import Maincontent from "./Main"
function Page(){
return(
<div>
<Header />
<Maincontent/>
<Footer />
</div>
)
}
ReactDOM.render(<Page/>, document.getElementById("root"))
and this is my header code
export default function Header(){
return(
<header>
<nav className="nav">
<img src="./react-logo.png" className="img" />
<ul className="nav-items">
<li> Pricing </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</header>
)
}
You need to export Header. Try putting export default Header at the bottom of your Header component file.
trying to import component from components which is in src directory but it is throwing error cant find module new to react any help will be appreciated
src
- app.js
-components/create-todo.component
app.js
import React, { Component } from "react";
import { BrowserRouter as Router,Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import CreateTodo from './components/create-todo.component';
// import EditTodo from './components/edit-todo.component';
// import TodosList from './components/todos-list.component';
// import logo from "./logo.png";
class App extends Component {
render() {
return (
<Router>
<div className="container">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
{/* <a class="navbar-brand" href="https://codingthesmartway.com" target="_blank">
<img src={logo} width="30" height="30" alt="CodingTheSmartWay.com" />
</a> */}
<Link to="/" className="navbar-brand">MERN-Stack Todo App</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/" className="nav-link">Todos</Link>
</li>
<li className="navbar-item">
<Link to="/create" className="nav-link">Create Todo</Link>
</li>
</ul>
</div>
</nav>
<br/>
<Route path="/create" component={CreateTodo} />
</div>
</Router>
);
}
}
export default App;
create-component
import React, { Component } from 'react';
export default class CreateTodo extends Component {
render() {
return (
<div>
<p>Welcome to Create Todo Component!!</p>
</div>
)
}
}
Try switching the file extension from .component.js to .jsx.
So the file would be called create-todo.jsx and your import would look like this:
import CreateTodo from './components/create-todo';
Try adding an s on the directory you're trying to import from:
import CreateTodo from './components/create-todo.component';
Should be:
import CreateTodo from './components/create-todo.components';
If this doesn't work, could you please clarify your directory structure? It goes src/components/create-todo.components?
I'm using React and React Router to build a web app. Currently, the header is is it's own component, and is loaded into the HomePage container with a Page component. I want to render a new component on click of a button in the header inside the page component
This is the mainpage container I have right now
import React from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from "./Page4";
import {Header} from "../components/Header";
export default class MAINHome extends React.Component {
constructor(props) {
super();
}
render() {
return (
<div>
<Header/>
<Page1/>
<Page2/>
<Page3/>
<Page4/>
</div>
);
}
}
<div id="header" className="container-fluid">
<div className="row">
<div className="col-md-4" id="logo-col">
<img src={require("../assets/LOGO.png")} alt=""/>
</div>
<div className="col-md-8 d-flex justify-content-end" id="nav-col">
<ul>
<li>
<Link to="/trees" id="trees-adopted-nav">
300+ TREES ADOPTED
</Link>
</li>
<li>
<a href="#" className="about-us">
ABOUT US
</a>
</li>
<li>
<a href="#" className="about-trees">
ABOUT TREES
</a>
</li>
<li>
<a href="#" className="contact-us">
CONTACT US
</a>
</li>
</ul>
</div>
<Route path="/trees" exact="exact" component={AdoptTrees} />
</div>
</div>
</Router>
This renders a component inside the header itself, but I want it to render instead of the entire main page itself by replacing
<div>
<Header/>
<Page1/>
<Page2/>
<Page3/>
<Page4/>
</div>
Been trying to convert several of our projects using materialize-css v1.0 using npm into react.js and having a heck of time doing so. I was wondering if anyone else has tried to tackle this as well and maybe came up with some solutions?
I am able to use the css portion just fine using the npm module and referencing it in the Index.js.
The problem I have is initializing the minified js with individual components but having no success. Here is the example one being the Index.js for css entry point and the sidebar component I am trying to get working using minified js. I also provided the App.js configuration in case anyone was curious. The plan was to break each part of this project into individual components but first just wanted to get the functionality of initializing the sidebar js first before doing so.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css/dist/css/materialize.min.css';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
// import Header from './header/Header';
// import Footer from './Footer';
import Landing from './landing/Landing';
import About from './About';
import Projects from './Projects';
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<div>
{/*<Header />*/}
<Route exact path="/" component={Landing} />
<Route exact path="/about" component={About} />
<Route exact path="/projects" component={Projects} />
{/*<Footer /> */}
</div>
</BrowserRouter>
</div>
);
}
}
export default App;
Landing.js
import React, { Component } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';
// import { Link } from 'react-router-dom';
import './Landing.css';
class Landing extends Component {
componentDidMount() {
console.log(M);
const sideNav = document.querySelector('.button-collapse');
console.log(M.Sidenav.init(sideNav, {}));
M.Sidenav.init(sideNav, {});
}
render() {
return (
<div className="main-header">
<div className="primary-overlay">
<div className="navbar-fixed">
<nav className="transparent">
<div className="container">
<div className="nav-wrapper">
<a href="#home" className="brand-logo">
TEST
</a>
<a data-activates="side-nav" className="button-collapse">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
Home
</li>
<li>
About
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
<li>
<a className="btn blue">Download</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
{/* Side Nav: fixed navbars must go right underneath main nav bar */}
<ul id="side-nav" className="side-nav">
<h4 className="blue-grey darken-4 center">TEST</h4>
<li>
<a className="divider" />
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
{/*-- Showcase */}
<div className="showcase container">
<div className="row">
<div className="col s12 main-text">
<h5>You found the...</h5>
<h1>Right Place To Start</h1>
<p className="flow-text">
To take your business to the next level with our services that
have taken companies to the fortune 500
</p>
<a href="#about" className="btn btn-large white black-text">
Learn More
</a>
<a href="#contact" className="white-text">
<i className="material-icons medium scroll-icon">
arrow_drop_down_circle
</i>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Landing;
Here are some screen shots I am getting with errors in my console as well regarding the anchor tags (not sure how I work around this if its needed in the side bar). I am getting access to the sidebar as per the console.logs shown below.
​Hope someone else has encountered this problem already and can help...
Cheers!
[![enter image description here][3]][3]
The trigger button markup is incorrect. It has to be data-target and it has to have the class sidenav-trigger. Also the side nav has to have the classname sidenav. side-nav with a hyphen will not work:
<a href="#" data-target="side-nav" className="sidenav-trigger button-collapse">
<i className="material-icons">menu</i>
</a>
Also you should always use refs instead of querying the DOM yourself when working with react. Apply a ref callback to the sidenav element and then use it to initialize:
class Landing extends Component {
onRef = nav => {
this.nav = nav;
M.Sidenav.init(nav);
};
render() {
return (
{/* ... */}
<ul ref={this.onRef} id="side-nav" className="sidenav">
<li><a className="divider" /></li>
{/* ... */}
</ul>
{/* ... */}
);
}
}
Working example with your corrected markup: