Fix folder structure errors in React - javascript

I am new to React and had everything working before I decided to organize my code in folders and subfolders. Right now I'm getting this Module not found, but it isn't the "Can't resolve 'react' which there were some answers for. Maybe some of you might know this silly thing. Thanks in advance! I really appreciate it!
Here is the Compile error
Image
Here is an image of my folder structure
Here is my Header.js
import React from 'react';
import './Header/CSS/Header.css';
// Class will consist of Header design and structure
const Header = (props) => {
return (
<header className="App-header">
<div className="container">
<button className="btn">
<span>About</span>
</button>
<button className="btn">
<span>Experience</span>
</button>
<button className="btn">
<span>Education</span>
</button>
<button className="btn">
<span>Projects</span>
</button>
<button className="btn">
<span>Contact</span>
</button>
</div>
</header>
)
};
export default Header;
Here is my Header.css
/*
========================
HEADER Component
CSS for the header
========================
*/
.App-header {
background-color: black;
min-height: 05vh;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
padding: 5vw;
}
/*
========================
HEADER BUTTONS
========================
*/
.container {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn {
margin: 5%;
display: inline-flex;
}
Here is my App.js
import React, { Component } from 'react';
import './App.css';
import Header from './Header/js/Header.js';
/*
========================================
App class
Where everything is put together
eg. Skeleton of my website
========================================
*/
class App extends Component {
render() {
return (
<div className="App">
<Header />
</div>
);
}
}
export default App;

It should be
import '../CSS/Header.css';
../ (2 dot) goes back one folder, and ./ (1 dot) stay in the same directory.
Since your structure looks like this:
. src
.. Header
.... CSS
...... Header.css
.... JS
...... Header.js
Using ../ inside Header.js, will take you to the Header folder.

Try changing your import route to import '.. /Header/CSS/Header.css';

Within your config files, such as webpack config or Babel, you will need to use a OS agnostic method of finding files because:
Windows uses \ and everything else uses /
So require Node's built in path module
const path = require('path')
And in your config files use path and __dirname
// "target": "./dist"
"target": path(__dirname, '/dist')

Related

Properties background image not working [React]

I'm trying to set the background image of a div depending on the value of a component property, the background doesn't show, however it does show when I harcode the background-image property in the css file.
Here is the component code :
import React, { Component } from "react";
import "./Banner.css";
export default class Banner extends Component {
render() {
const style = {
backgroundImage: `url("${this.props.image}")`,
};
return (
<div className="banner" style={style}>
Chez vous, partout et ailleurs
</div>
);
}
}
Here is the Banner.css file:
.banner {
/* background-image: url("../assets/images/moutains.png"); */
background-size: cover;
height: 170px;
border-radius: 20px;
text-align: center;
vertical-align: middle;
line-height: 170px;
font-size: 2.5rem;
color: #fff;
}
In the parent component:
<Banner image="../assets/images/moutains.png" text="" />
EDIT: Complete code and assets here: https://github.com/musk-coding/kasa
codesandbox: https://codesandbox.io/s/github/musk-coding/kasa
Thanks in advance for your help
Since, you are trying to access the image directly in your Component using the inline CSS. You must move your image to the public folder.
CODESANDBOX LINK: https://codesandbox.io/s/image-relative-path-issue-orbkw?file=/src/components/Home.js
Code Changes:
export default class Home extends Component {
render() {
const imageURL = "./assets/images/island-waves.png";
return (
<div className="container">
<div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
Chez vous, partout et ailleurs
</div>
<Gallery />
</div>
);
}
}
NOTE: From React Docs, you can see the ways to add images in Component. create-reac-app-images-docs. But since you want an inline CSS, in that case we have to move our assets folder into the public folder to make sure that the image is properly referenced with our component.

Nuxtjs error render function or template not defined in component: carousel

I have installed vue carousel via npm
"dependencies": {
"nuxt": "^1.0.0",
"vue-carousel": "^0.6.9"
},
Now in my nuxt configurations
plugins: [
'~/plugins/vue-carousel'
],
And the vue-carousel.js
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
Now in my components am using it as
<template>
<div>
<carousel>
<slide>
Slide 1 Content
</slide>
<slide>
Slide 2 Content
</slide>
</carousel>
</div>
</template>
<script>
import Carousel from 'vue-carousel';
import Slide from 'vue-carousel';
export default {
components:{
Carousel,Slide
}
}
Where am i going wrong as am getting an error
render function or template not defined in component: carousel
Nuxt has a different way to configure and include packages like vue-carousel in the project
Below are the steps
Install vue-carousel as local dependency
npm install --save vue-carousel
In nuxt project, under plugins directory create a file plugins/externalVueCarousel.js and add vue-carousel as a global component (reference link)
import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel);
In nuxt.config.js file , include below code under plugins
plugins: [{ src: '~/plugins/externalVueCarousel.js', ssr: false }],
The project is now ready to use vue-carousel in pages or components. vue-carousel is configured with global scope.
Under pages or components try the examples given in vue-carousel official website
Sample program
Place below code under pages/components and validate the result in-case if you would like to test a program ASAP
<template>
<div class="mycarousel">
<carousel :perPage="1">
<slide>
<span class="label">Slide 1 Content</span>
</slide>
<slide>
<span class="label">Slide 2 Content</span>
</slide>
<slide>
<span class="label">Slide 3 Content</span>
</slide>
</carousel>
</div>
</template>
<style>
body{
background-color: yellow;
}
.mycarousel{
left: 50%;
top: 50%;
position: relative;
width: 700px;
transform: translateX(-50%);
}
.VueCarousel{
display:inline-block;
}
.VueCarousel-slide {
position: relative;
background: #42b983;
color: #fff;
font-family: Arial;
font-size: 24px;
text-align: center;
min-height: 100px;
}
</style>
Referred from https://nuxtjs.org/examples/plugins/

Styled-components doesn't output style tag

I've set up a new project in React using Webpack, and wanted to give a try to Styled Components.
My index.js looks like this:
import React from "react"
import ReactDOM from "react-dom"
import Page from "./site/Page"
import styled from 'styled-components'
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
const Index = props => {
return (
<Page>
<Wrapper>
<Title>Test</Title>
</Wrapper>
</Page>);
};
ReactDOM.render(<Index/>, document.getElementById("app"))
The code outputted by styled-components on the HTML page looks fine but the <style> the on the head doesn't get added, resulting in no css style at all.
<section class="sc-bwzfXH gzMTbA">
<h1 class="sc-bdVaJa bzmvhR">Test</h1>
</section>
Does somebody have any suggestions?
Take a look at this API: CSSStyleSheet.insertRule().
Styled Components inserts empty style tags for hosting these dynamically injected styles.

CSS doesn't apply to a component

I have a react component that is wrapped up in div:
AccountLogin.jsx:
import './AccountLogin.css';
export default observer(() => (
<div className="content">
Something here
</div>
));
AccountLogin.css:
.content {
color: blue;
background-color: blue;
margin: 500px;
}
But the css doesn't apply to my rendered component AccountLogin.
Any ideas why that could happen?
Looking at rfx-stack source, I can see that files suffixed with .global.css are imported in global scope where as others are imported as css-modules.
So you can either rename your file to AccountLogin.global.css or use the imported class name:
import styles from './AccountLogin.css';
Within component:
<div className={styles.content}>...</div>

'React' is defined but never used

I am following the official reactjs instructions to create a sample app. My node version is 6.9.0.
I created sample react app which is supposed to display a empty tic tac toe table according to the official website using following instructions:
npm install -g create-react-app
create-react-app my-app
cd my-app
changed to my-app directory
removed the default files inside the source directory as directed. Now
my index.js looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Then I ran yarn start
But all I see is blank screen no tic tac toe table. And couple warnings in the console saying
Compiled with warnings.
./src/index.js
Line 1: 'React' is defined but never used no-unused-vars
Line 2: 'ReactDOM' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
You missed last parts in steps 4 & 5:
Add a file named index.css in the src/ folder with this CSS code.
Add a file named index.js in the src/ folder with this JS code.
index.css
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
index.js
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
You should create some component/element/, maybe style it, then call ReactDOM to render your component to the underlying html and then you will have it.
React is used to handle JSX and creation of React component
ReactDOM in your simple case will be used to render created element to dom.
See here : https://reactjs.org/blog/2015/10/01/react-render-and-top-level-api.html
So ading something like
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
to your code, you will get something if in your index.html there is element with id="root" inside <body> tag
This simply means your project has eslint configured to catch unused variables.
If you use JSX or anything React within that file the warning will go away just like suggested by zmii in his answer.
But i am writing this answer because someone showed me their code and they were facing the same problem.
Their code :
import React from 'react';
const person = () => {
return "<h2>I am a person!</h2>"
};
export default person;
The problem in the above code was that while returning, he used double quotes. So instead of JSX, it was returning string and therefore they were getting error that React was never not used.
Conclusion: Syntax are important so keep in mind, specially if you are starting out.
Hope this helps someone.
ESlint needs to be configured to work with React JSX. This excellent article has all the details.

Categories