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').
Related
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 have this error when i import my component
Module not found: Can't resolve '../src/components/Menu' in '/Users/userName/Documents/folder/repository/Project/src/pages/Home'
src
components
Menu
Menu.css
Menu.js
pages
Home.css
Home.js
Menu.js
import React, { Component } from 'react';
import './Menu.css';
class Menu extends Component {
render() {
return (
<div className="menu">
<h1>Je suis un Menu</h1>
</div>
);
}
}
export default Menu;
Home.js
import React, { Component } from 'react';
import './Home.css';
import Menu from './../components/Menu';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
msg: 'Hello from the state of Home'
}
}
render() {
return (
<div className="home">
<h1 className="text">Welcome to the Home Page</h1>
<p>{this.state.msg}</p>
<Menu/>
</div>
);
}
}
export default Home;
You need to import from one level deeper:
import Menu from './../components/Menu/Menu';
You have a folder called Menu and the file you want is inside called Menu.js.
That's because '../src/components/Menu' doesn't point to your file.
Either use the path
'../src/components/Menu/Menu'
Or, if you want to use your original path, rename your Menu.js file to index.js.
In my experience the latter tends to be more popular due to it's inclusion in the hugely useful Airbnb JSX style guide.
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.
I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.
My 'src' folder structure is like this:
scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES
In App.js I have this:
import React, { Component } from 'react';
import ComponentA from './components/ComponentA';
class App extends Component {
render() {
return (
<div className="App">
<ComponentA />
</div>
);
}
}
export default App;
In ComponentA I have this:
import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';
class ComponentA extends Component {
render() {
return (
<div className="componentAStyle">
<ComponentB />
</div>
);
}
}
export default ComponentA;
In ComponentB I have this:
import React, { Component } from 'react';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
And if I remove the css import there is another error message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
How can I import another component from another component and its respective css?
Thanks.
You need to make the paths you are importing are relative to the current location of the file doing the import.
The correct imports would be
Component A
import React, { Component } from 'react';
import '../styles/ComponentA.css';
import ComponentB from './ComponentB';
You can see this working at https://glitch.com/edit/#!/trashy-unicorn.
(Click on Show Live in top left hand corner.)
Currently what is happening with your error is
import ComponentB from './components/ComponentB';
is is looking in the path
src/components/components/ComponentB
which does not exist and so gives you an error. Same thing is happening with your styles.
Hope this helps.
I'm teaching myself React-Native and I came across this strange roadblock. Inside my App.js I'm trying to export a class and then use another file within my App.js which is inside the somePage() function. where I'm calling <Header/> in an attempt for that text to appear on my physical device upon hitting refresh.
It displays <Login/> perfectly, but not what's within the somePage() function. My question is, why?
(I'm using Expo by the way, instead of having an index.ios.js file it's an App.js file that still supports cross platform development).
Here's my App.js file:
import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import Login from './components/Login';
import Header from './components/Header';
export default class Project extends Component {
render() {
return (
<Login/>
);
}
}
const somePage = () => (
<Header/>
);
AppRegistry.registerComponent('someProject', () => Project);
AppRegistry.registerComponent('someProject', () => somePage);
Here's my Header.js file:
import React from 'react';
import {Text} from 'react-native';
const Header = () => {
return <Text>Testing this out</Text>
}
export default Header;
The concept of react is that a parent component renders child components. You only need to register once because the root component is the parent component of all other components. Any other child or grandchild components you want to render must be descendants of the root component. As a side note, you don't need to have export default in front of the Project component, because you aren't exporting it anywhere: you are registering it below.
To fix your app, you need to place the header component inside the registered root component:
import React, { Component } from 'react';
import {AppRegistry, View } from 'react-native';
import Login from './components/Login';
import Header from './components/Header';
class Project extends Component {
render() {
return (
<View>
<Header/>
<Login/>
</View>
);
}
}
AppRegistry.registerComponent('someProject', () => Project);