Develop Reference

How to import CSS to React (electron.js) Project?

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

Import images from another file in React

I am using create-react-app to build a simple web page:
index.js:
import lostImage from './assets/img/illustrations/lost.svg';
function Image(props) {
return (
<img src={lostImage} />
);
}
It works as expected, however I plan to import dozens of images, so I decided to move the import calls in a separate file in the same directory:
images.js:
import lostImage from './assets/img/illustrations/lost.svg';
index.js:
import './images.js';
function Image(props) {
return (
<img src={lostImage} />
);
}
However I get the lostImage not defined error. How do I properly do this?

You need to export them from images.js file. Then import them to the index.js file to use.
images.js:
import lostImage from './assets/img/illustrations/lost.svg';
export { lostImage };
index.js:
import {lostImage} from './images.js';
function Image(props) {
return (
<img src={lostImage} />
);
}

How can you import portfolio projects in react?

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"/>

strange error cannot resolve <folder name> in javascript

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

Bundle.js not recognizing one of my files?

Please bear with me because I am a javascript newbie, and just starting to learn react.
I am trying to make a small app but I keep getting an error that one of my files is not found... specifically this:
bundle.js:56 Uncaught Error: Cannot find module "./components/search_bar"
My file structure is that I have my index.js in a folder called src, then my search bar(search_bar.js) in a folder called components. I have triple checked the spelling on them but I continue to get this error.
This is my index.js
import SearchBar from './components/search_bar';
import React from 'react';
import ReactDOM from 'react-dom';
//Create a componant (some /HTML)
const API_KEY = 'AIzaSyC3Z3qTpvAacDLYEIxaueKflFJbWvdIHsw';
const App = () => {
return (
<div>
<SearchBar />
</div>
);
}
// Put that componant on the page (the DOM)
ReactDOM.render(<App />, document.querySelector('.container'));
And this is my search_bar.js
import React, { Component } from 'react';
class SearchBar extends Component {
contructor(props) {
super(props);
// when user updates the search bar this term will get updated.
this.state = { term: ''};
}
render() {
//update state
//use set state everywhere besides constructor!!
return (
<div>
<input onChange={event => this.setState({term: event.target.value})}
/>
Value of the input: {this.state.term}
</div>
);
}
}
export default SearchBar;
Any Ideas as to what I am doing wrong here?

Can you confirm the following directory structure?
my_project/src/index.js
my_project/src/components/search_bar.js
It seems like your current directory structure might instead look like this:
my_project/src/index.js, my_project/components/search_bar.js

AHHH I left an 's' out of constructor... so search_bar.js was unable to compile. I have been looking at this for about an hour now...