I am starting a React Project. I am trying to construct the message board page and I have Components for the Left, Center, and Right Portion of the page. The Center is where the user posts will go. Left and Right are News, Events.. etc.
My file structure is as follows:
--client
----Public
------|index.html
--------src
----------components
-----------Center
------------|CenterForm.js
------------|Post.js
-----------Left
-------------|LatestNews.js
-------------|LeftForm.js
-------------|Trending.js
-------------|WatchList.js
-----------Whole
-------------|WholeComponent.js
Ultimately, I wanted to construct each piece then combine them in the whole component so that row and columns would be smooth.
I get this error: ./src/components/Whole/WholeComponent.js
Module not found: Can't resolve './components/Center/CenterForm' in '/Users/edwarddeleon/Desktop/ct-app/client/src/components/Whole'
and for the Left when I remove the center section.
CenterForm Component:
import React from 'react';
import Post from './Post';
const CenterForm = () =>
<div className="col 4">
<Post />
</div>
export default CenterForm;
Post Component(will be changed when I go to implement user comment function):
import React from 'react';
const Post = () =>
<div className="posthere">
<span>post will be here</span>
</div>
export default Post;
Whole Component:
import React from 'react';
import LeftForm from './components/Left/LeftForm';
import CenterForm from './components/Center/CenterForm';
const WholeComponent = () =>
<div className="container">
<div className="row">
<LeftForm />
<CenterForm />
</div>
</div>
export default WholeComponent;
App.js:
import React, { Component } from 'react';
import Nav from "./components/Nav";
import WholeComponent from './components/Whole/WholeComponent';
class App extends Component {
render() {
return (
<div className="App">
<Nav />
<WholeComponent />
</div>
);
}
}
export default App;
Thank you Community!
You have false path for the component.
Your import in the WholeComponent should be like this
import LeftForm from '../Left/LeftForm';
import CenterForm from '../Center/CenterForm';
Because, you need to backward the directory where Center and Left component are placed.
Related
I am creating new project using create-react-library but when I tried to import image using import logo from './logo.png', the image does not show up in the example, but if I use import logo from 'logo.png' the image show up.
My question is this normally happen?
here is the folder structure of my project
not working version
result
code:
import React from 'react'
import styles from './styles.module.css'
import logo from './logo.png'
export const ExampleComponent = ({ text }) => {
return (
<div className={styles.test}>
{/* Example Component: {text} */}
<img src={logo} />
</div>
)
}
working version
result
code:
import React from 'react'
import styles from './styles.module.css'
import logo from 'logo.png'
export const ExampleComponent = ({ text }) => {
return (
<div className={styles.test}>
{/* Example Component: {text} */}
<img src={logo} />
</div>
)
}
Hi I am also new with react-create-library and was having the same problem. My image was in the folder src/assets/img and when I was trying to add the path relatively it was failing.
What i found is path should be after the ./src/ folder.
following is the code that worked for me for the icon in src/assets/img folder.
import * as React from 'react';
import styles from './styles.module.css';
import warnicon from 'assets/img/warning.png';
.
.
.
<div className={styles.modalBody}>
<img src={warnicon} alt='warn-icon'></img>
<p className={styles.warning}>{props.text}</p>
</div>
Thank you.
yes it is normally the way it happens. Although adding your code would have helped but I have added an example:-
import React from 'react';
import logo from './logo.png';
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
I'm having a problem with the relative path for my react app. It seems super simple but I've double checked everything and I still can't get it to work.
The path is src > components(folder) > Navigation(folder) > navigation.js
The terminal says: "Failed to compile.
./src/App.js
Module not found: Can't resolve './components/Navigation/navigation' in '/Users/misbahhemraj/Desktop/facefind/src'"
This is my code in my app.Js:
import React, { Component } from 'react';
import navigation from './components/Navigation/navigation';
import './App.css';
class App extends Component {
render () {
return (
<div className="App">
<navigation />
{/*<Logo />
<ImageLinkForm />
<FaceRecognition />*/}
</div>
);
}
}
export default App;
This is my code in navigation.js
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default navigation;
I've tried changing the ports and changing the syntax of the import statement but I can't get it it work. Any advice would be appreciated - thank you so much!
Look at your export component name, you have navigation and your component name it´s Navigation
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default Navigation;
I am in the process of learning react. Here i got stuck in some basic problems. I learn concept of props and parent-child components in react, but when i try to implement it, it shows error. Please help. I have one parent component named 'Portfolio' and one child component named 'PortfolioBox'. I try to pass title props in PortfolioBox. Here is my sample code. Issue comes while starting the react app 'npm start'. It shows error 'Portfolio is not defined'.
Portfolio Component
import React from 'react';
import PortfolioBox from './PortfolioBox';
import './portfolio.css';
function Portfolio()
{
return (
<div className="row portfolio-container">
<PortfolioBox title="One" />
<PortfolioBox title="Two" />
<PortfolioBox title="Three" />
<PortfolioBox title="four" />
</div>
)
}
export default Portfolio;
Portfolio Box Component
import React from 'react';
function PortfolioBox(props)
{
console.log(props);
return(
<div className="col-md-4 portfolio-box">
<h3>{props.title}</h3>
<p>Description</p>
</div>
)
}
export default PortfolioBox;
App.js File
import React from 'react';
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;
You are missing an import statement in your app.js file:
import React from 'react';
import Portfolio from './Portfolio'; // If your file is in the same directory
function App() {
return (
<div className="container-fluid">
<Portfolio />
</div>
);
}
export default App;
this is my simple home.js code. None relevant code has been removed.
import Banner from '../components/Banner'
export default function Home() {
return (
<Hero>
<Banner title="luxurious rooms" subtitle="delux rooms starting at $299">
<Link to="/rooms" className="btn-primary">
Our rooms
</Link>
</Banner>
</Hero>
and this my banner.js
import React from 'react'
export default function Banner({childern,title,subtitle}) {
return (
<div className="banner">
<h1>{title}</h1>
<div />>
<p>{subtitle}</p>
{childern}
</div>
)
}
I don't understand why it is not rendering.
In the bedg I contd see <banner>. tag inside of hero.
How can I solve this issue?
Ok, I created a pen for this, but it's not saving so I'll add the code here. It looks like you are taking a difficult approach for a relatively easy concept. When you pass props to a component, you access them within that component using this.props.nameOfProp. You don't need to pass link as a child, just add Link inside the child component, and pass the info you need for the Link as props.
EDIT: Here's a working example https://codesandbox.io/embed/elegant-fast-m52bt
import React from "react";
import ReactDOM from "react-dom";
import Banner from "./Banner";
import { BrowserRouter as Router } from "react-router-dom";
class App extends React.Component {
render() {
return (
<div>
<Banner
title={"luxurious rooms"}
subtitle={"delux rooms starting at $299"}
path={"/rooms"}
classList={"btn-primary"}
/>
</div>
);
}
}
ReactDOM.render(
<Router>
<App />
</Router>,
document.querySelector("#app")
);
Then your banner should look something like this:
import React from "react";
import { Link } from "react-router-dom";
class Banner extends React.Component {
render() {
return (
<div className="banner">
<h1>{this.props.title}</h1>
<p>{this.props.subtitle}</p>
<Link
to={this.props.path}
className={this.props.classList}
>
Link Text (could also be a prop)
</Link>
</div>
);
}
}
export default Banner;
I'm trying to figure out how to make and use a partial in react. I've figured out how to make a new page, but now I'm trying to put my footer in a partial and add it to my page layout.
I have a page layout - I'm trying to add the footer here:
import React from 'react'
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'
import Logo from '../assets/logo.png'
import '../styles/PageLayout.scss'
var Footer = require('Footer');
export const PageLayout = ({ children }) => (
<div className='container text-center'>
<NavLink to='/' activeClassName='page-layout__nav-item--active'><img className='icon' src={Logo} /></NavLink>
<div className='page-layout__viewport'>
{children}
<Footer />
</div>
</div>
</div>
)
PageLayout.propTypes = {
children: PropTypes.node,
}
export default PageLayout
Then I have a components/Footer.js which has:
import React from 'react';
import ReactDOM from 'react-dom';
// import { Button } from 'react-bootstrap';
import * as ReactBootstrap from 'react-bootstrap'
class Footer extends React.Component {
render: function () {
return (
testing
);
}
}
module.exports = Footer;
}
This gives an error that says:
ERROR in ./src/components/PageLayout.js
Module not found: Error: Can't resolve 'Footer' in '/Users/me/code/learn-react-redux/src/components'
# ./src/components/PageLayout.js 26:13-30
# ./src/routes/index.js
# ./src/main.js
# multi ./src/main webpack-hot-middleware/client.js?path=/__webpack_hmr
Does anyone know how to incorporate a partial into a page layout. There isn't anything dynamic to put in there - I'm just trying (and failing miserably) to extract a partial and keep my file tidy.
I can see two three errors in your Footer.
Your render() function must return an element, not bare text. i.e. <span>testing</span> NOT testing.
Your export statement sits inside your class definition. Place it outside.
UPDATE Your render function signature should read render() {
Finally, your require statement also looks wrong. Try require('./Footer').