I am learning meteor framework for the first time today. I installed react react-dom and react-mounter through npm instead of atmospherejs.I am facing a problem that says Cannot find module '../../client/components/layouts/home.jsx'. I dont think there is error in path.Because my routing.jsx is inside routing directory that is inside lib directory and home.jsx is inside layouts directory which is inside components subdirectory of client directory.
lib - routing - routes.jsx
client - components - layouts - home.jsx
routes.jsx
import React from 'react';
import {mount} from 'react-mounter';
import HomeLayout from '../../client/components/layouts/home.jsx';
import Layout from '../../client/components/layouts/layout.jsx';
publicRoutes = FlowRouter.group({
name:'publicroutes'
});
privateRoutes = FlowRouter.group({
name:'privateroutes'
});
publicRoutes.route('/',{
name:'Home',
action(){
mount(
HomeLayout, {}
)
}
});
publicRoutes.route('/dashboard',{
name:'Dashboard',
action(){
mount(Layout,{
sidebar:<div>Sidebar</div>,
content:<div>Content</div>
})
}
});
home.jsx
import React, { Component } from 'react';
export default class HomeLayout extends Component{
render(){
return(
<div className="container">
<div className="row">
<div className="col-md-6">
Features
</div>
<div className="col-md-6 col-md-offset-1">
Signup
</div>
</div>
</div>
);
}
}
What might be the reason?
Related
**This is my Styles.css File**
.headingStyle
{font-size:4rem;
color:blue;}
Iam importing these styles here but nothing is being applied to the heading
import React from "react"
import styles from "./Css/styles.css"
function App()
{
return (
<div>
<h1 class={styles.headingStyle}> CSS3 Testimonials Slider</ h1>
</div>
)
}
export default App
According to create-react-app documentation on CSS modules you should name your file styles.module.css and then import it like you already did
import styles from './styles.module.css';
Import CSS file directly.
Use className instead of class
Try this
import React from "react"
import "./Css/styles.css"
function App()
{
return (
<div>
<h1 className="headingStyle"> CSS3 Testimonials Slider</h1>
</div>
)
}
export default App
I create a simple react/electron project with "electron-forge" plugin : electron-forge init myProject --template=react. I try to import my css file with this code below
Button.module.css
.error {
color: red;
}
app.jsx - created by electron-forge:
import React from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
export default class App extends React.Component {
render() {
return (
<div>
<h1>Hello world</h1>
<button className={styles.error}>Error Button</button>
</div>
)
}
}
It throws an error:
Uncaught Error: Couldn't find a compiler for /home/denny/Experimentals/electron-transactionsell/src/Button.module.css
I'm pretty sure I have the file in the correct folder
and I am sure that this is how it's done in React
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
I'm making a portfolio with react. How can I navigate to my projects through my localhost:3000? They are in my includes folder and the projects aren't made with react. It seems not to be the same as using XAMPP as my sever.
My file structure is:
-src
-componets
-sectionB.js
-imports
-myproject1
-index.php
I'm trying to go to my project with an <a> tag with this code:
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
class Card extends Component {
render() {
return (
<a className="proj-card" href={this.props.href}>
<h2>{this.props.projName}</h2>
<img src={this.props.img}/>
<span>Technolgies: ({this.props.tech})</span>
<p>{this.props.projdesc}</p>
</a>
)
}
}
class SectionB extends Component {
render() {
return (
<div className="sectionB">
<Card projdesc={...} img={...} tech="..." projName="..." href="./imports/calendar2/index.php"/>
</div>
)
}
}
export default SectionB;
Why is this not directing the url to my project?
I think you're supposed to be using Link from react-router-dom. That may be a place to start. And what happens when you change:
<Card projdesc={...} img={...} tech="..." projName="..." href="./imports/calendar2/index.php"/>
to
<Card projdesc={...} img={...} tech="..." projName="..." href="../imports/calendar2/index.php"/>
I have below code structure,
and my src/components/App.js look like this
import React, { Component } from 'react'
import { max_number } from '../helper'
class App extends Component {
render() {
return (
<div>
</div>
)
}
}
export default App
As you can see helper folder is the same level as components, but somehow I got error of Module not found: Can't resolve '../helper' in '/Users/james/Documents/react-demo/src/components'
helper.js is a directory you need to import from '../helper.js'
preferably rename the folder to helper
I followed the installation instructions on https://www.npmjs.com/package/reactjs-mappletooltip
Nothing from the MappleToolTip renders or even shows up in the page source when I inspect the page source in Chrome. What am I doing wrong? I tried to include as a separate component as well with same results, nothing from MappleToolTip rendering.
My Code:
(NOTE: code has been shortened for readability)
ToolTip.js
import React from 'react';
var MappleToolTip = require('reactjs-mappletooltip');
export const PageWithToolTip = () => {
return(
<div>
<MappleToolTip>
<div>
Show Mapple Tip on this
</div>
<div>
Hey! this is damn easy
</div>
</MappleToolTip>
</div>
);
}
FoodMenu.js
import React, {Component} from 'react';
import {PageWithToolTip} from './ToolTip';
class FoodMenu extends Component{
render(){
return(
<div className="section-meals">
<div className="row">
<h2>
- Menu -
</h2>
</div>
{PageWithToolTip}
</div>
)
}
}
export default FoodMenu;
Thank you!
Just <PageWithToolTip/> instead of {PageWithToolTip}.
And change import to import MappleToolTip from 'reactjs-mappletooltip';