I've installed Foundation on my react project and even after importing it, it still can not define foundation
import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import Auth from '../modules/Auth';
import DrawerLeft from './Drawer.jsx';
import Foundation from 'react-foundation';
const Base = ({ children }) => (
<div>
<div className="top-bar">
<Row>
<Column small={2} large={4}>TESTING</Column>
</Row>
{Auth.isUserAuthenticated() ? (
<div className="top-bar-right">
<Link to="/logout">Exit</Link>
</div>
) : (
<div className="top-bar-right">
<Link to="/login">Enter</Link>
<Link to="/signup">Join</Link>
</div>
)}
</div>
{ /* child component will be rendered here */ }
{children}
</div>
);
Base.propTypes = {
children: PropTypes.object.isRequired
};
export default Base;
And in my package.json it says "react-foundation": "^0.8.2" under dependencies
You need to import it like this
import { Row, Column } from 'react-foundation';
Also you'll need Column
From the npm package link to the Grid Code, you can see that Row and Column are named exports in react-foundation, so you can import them as
import {Row, Column} from 'react-foundation';
and use them
Related
This is my App.js. Here, I call the "Profile" Component.
import './App.css';
import Profile from "./Profile"
function App() {
return (
<div className="App">
<Profile />
</div>
);
}
export default App;
Then, inside Profile.js, I call Card component and inside the Card component, I've enclosed an image.
import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
return (
<Card>
<div>
<img src={image1} alt="" />
</div>
</Card>
)
}
export default Profile
Inside of Card component, I've just applied some CSS to make it look like a Card.
import React from 'react'
import styles from "./Card.module.css"
const Card = () => {
return (
<div className={styles.card}>
</div>
)
}export default Card
This is my folder structure.
I'm really confused why the image isn't getting showed up. Currently this is the output I'm getting.
I've restarted the server as well. But it's not getting fixed.
your card doesn't have a child component return maybe that could be the problem
import React from 'react'
import styles from "./Card.module.css"
const Card = ({children}) => {
return (
<div className={styles.card}>
{children}
</div>
)
}
export default Card
try this
I have the following code that produces a Card UX Component.:
import React from 'react';
import image1 from '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src="image1" alt='Image 1'/>
</div>
</div>
);
}
export default Card;
I would like to know how I can call it in one of my pages that simply produces an image at the top half of the page, and also what is the command for importing the "bootstrap.min.css" from "node_modules" in this page. The code for the page currently looks like this:
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Hero hero="servicesHero"/>
);
}
Card Import
import React from 'react';
let image1 = '../images/swimming_sign.jpg';
const Card = props =>{
return(
<div className="card text-center">
<div className="overflow">
<img src={image1} alt='Image 1'/>
</div>
</div>
);
}
export default Card;
import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';
export default function Services() {
return (
<Card/>
<Hero hero="servicesHero"/>
);
}
To import css file from node modules, please place the link statement in your index.html file
<link rel="stylesheet" href="./node_modules/bootstrap/bootstrap.min.css">
I have a
menu-item.component in src/components/menu-item/menu-item.component.jsx
directory.component in src/components/directory/directory.component.jsx.
In menu-item.component:
import React from "react";
import withRouter from "react-router-dom";
import "./menu-item.styles.scss";
export const MenuItem = ({ title, imageUrl, size }) => (
<div className={`${size} menu-item`}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">Alışverişe Başla</span>
</div>
</div>
);
// export default MenuItem;
with this, the import statement import { MenuItem } from "../menu-item/menu-item.component"; in directory.component.jsx works well. When I remove export from function definition and instead add export default MenuItem; at the bottom, the npm start fails with:
Failed to compile.
./src/components/directory/directory.component.jsx
Attempted import error: 'MenuItem' is not exported from '../menu-item/menu-item.component'.
I'm new to react and following the exact code from a tutorial and it works well in the videos. Why this fails?
Try removing the brackets
import MenuItem from "../menu-item/menu-item.component"
When you do an 'export default', you dont need to be specific about the name when importing to get the default import (you can import it as Item or MenuI, for example, but always starting with a capital, to let React knows it's still a component);
Also, remove the export before the const declaration you're using export default
In reactjs, I have already created one component and added it to my Main.js file but now, I need to add one more component to it and due to JSX restriction of having only one root element per JSX, I cannot add one more component to it. I don't know where I'm going wrong in this.
`~~~~index.js file`
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
-------------------------------------------------------
Main.js file
import React, { Component } from "react";
import Header from './Header';
// import Body from './Body';
import './index.css';
class Main extends Component {
render() {
return (
<div className="Main">
<Header image={require('./demo.jpg')}/>
{/* <Body/> */}
</div>
);
}
}
export default Main;
-------------------------------------------------------
Header.js file
import React from 'react'
import './Header.css';
// import Body from './Body';
export default (props) => {
const style= {
backgroundImage : "url(" + props.image + ")"
}
return (
<div className="body" style={style}>
<button className="btn" > Drawer </button>
<h1 className="heading1"> Questions </h1>
<button className="heading2"> Eye Button </button>
<h2 className="heading3"> Hi.. Sandeep Gautam </h2>
<h3 className="heading4"> Mind answering a few questions </h3>
</div>
)
}`
I am new to ReactJS, but familiar with React Native. I am trying to to get a basic map component to be displayed.
My map component is
WaterMapView.js
import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
export class WaterMapView extends Component {
render () {
console.log(' I am here ');
return (
<Map
google={this.props.google}
style={styles.mapStyle}
initialCenter={{
lat: 40.854885,
lng: -88.081807
}}
zoom={15}
/>
)
}
}
const styles = {
mapStyle: {
height: '100%',
width: '100%'
}
}
export default GoogleApiWrapper({
apiKey: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})(WaterMapView)
This component is embedded in MainDashboard.js as follows :
import React, { Component } from 'react';
import windowSize from 'react-window-size';
import WaterMapView from './WaterMapView';
class MainDashboard extends Component {
render () {
const height = this.props.windowHeight;
const {
containerStyle,
headerStyle,
navigationStyle,
mainPageStyle,
eventPageStyle,
mapPageStyle,
mapDisplayStyle,
mapPropertiesStyle
} = styles;
return (
<div style={{ ...containerStyle, height }} >
<div style={headerStyle} >
</div>
<div style={navigationStyle} >
</div>
<div style={mainPageStyle} >
<div style={eventPageStyle} >
</div>
<div style={mapPageStyle} >
<div style={mapDisplayStyle} >
<WaterMapView />
</div>
<div style={mapPropertiesStyle} >
</div>
</div>
</div>
</div>
);
};
};
My App.js component is :
import React from 'react';
import MainDashboard from './MainDashboard';
const App = () => {
return (
<div>
<MainDashboard />
</div>
)
};
export default App
And index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I am using React version 16.0.0 and google-maps-react version 1.1.0
I get an error accompanied by a dump of code. The error is :
TypeError: Cannot read property 'array' of undefined
I am not including the dump in this post. I can add that if required.
The problem seems very basic as the I do not even see the console.log statement 'I am here' in WaterMapView.js component.
Let me know what am I missing.
<div style={mapDisplayStyle} >
WaterMapView
</div>
Should be
<div style={mapDisplayStyle} >
<WaterMapView />
</div>
Otherwise react just interprets WaterMapView as a string and displays the string. When you want to use/render the component you need to add < > to id.