I am new to React and was learning how to use CSS modules in React but faced this error:
Failed to compile.
./src/components/Header/Header.js
Module not found: Can't resolve './Header.module.css' in 'C:\Users\User\Desktop\qwerty\qwerty-project\src\components\Header'
Here is the code I am using
import React from "react";
import styles from "./Header.module.css";
const header = props => {
return (
<div className="row">
<div className="col-md-4">
<i className="fab fa-github"></i>
</div>
<div className="col-md-8">
<nav>
<ul className={styles.nav}>
<li>{props.home}</li>
<li>{props.about}</li>
<li>{props.contact}</li>
</ul>
</nav>
</div>
</div>
);
};
export default header;
If you want to use the CSS file as a module you will need to use a webpack loader.
Alternatively you can just import "./Header.module.css"; and use the classnames to style your components
Related
I am making a cart and when I click Add to cart then the number of times increases this is done using hooks and is in the following Pricetag.jsx
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
Now I want to use the value of count in other jsx,
import React from 'react'
import './Body.css'
import image2 from './assets/cake9.jpeg'
import image9 from './assets/cake16.jpeg'
import Pricetag from './Pricetag'
export default function Body(props) {
return (
<>
<div className="headingbody">
<div></div>
{props.title}
</div>
<div className="cart">
<div className="number34"> ** here I want to show my count **</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image10} name="Swimming cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image11} name="Rossy cake" bold="Rs 345" cut="Rs 634" />
</div>
</>
)
}
Can you tell me how can I use the value of count from the first to the second?
There are a few ways you can use:
state management: redux, zustand,...
using React Context
you can pass the value through props but it will cause 'hell props'
You have to pass the count state to the other JSX file (component). There are some ways:
Import the JSX file and call the component inside Pricetag.jsx, then pass count as a prop.
If you are unable to use the component inside Pricetag.jsx, then Use state management solutions like Context API, Redux, MobX etc.
brother, you can find the description and idea from the below document of useContext API calling and its functionaloty
https://www.geeksforgeeks.org/reactjs-usecontext-hook/
https://reactjs.org/docs/hooks-reference.html#usecontext
I'm using bulma css in my react application. And I have some additional css in my css module file to set image size.
Additionally I want to use css classes from bulma like my-2 mr-4 in my main wrapping div.
How do I add these classes to the main wrapping div ?
import React from "react";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={classes.Logo}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
.Logo a img {
width: 80px;
height: auto;
vertical-align: middle;
}
.Logo a {
text-align: center;
}
.Logo a p {
display: inline-block;
color: #434343;
font-weight: bold;
}
You can pass more classes into className using template literal strings. Here's an example passing in the my-2 and mr-4 you wanted to add:
import React from "react";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={`${classes.Logo} my-2 mr-4`}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
Use classnames npm mudule. classnames is conditionally joining classNames together.install this mudule with
npm install classnames --save
or
yarn add classnames
and use for example :
import React from "react";
import cs from "classnames";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={cs(classes.Logo, 'my-2', 'mr-4' )}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
also you can use this code without any module
className={`${classes.Logo} my-2 mr-4`}
All that classes.Logo does is return a string corresponding to the css class name for Logo which they have made unique(for scoping purposes), so you can just append it to a pre existing string, either by defining string in a variable or by doing it inline
Eg:
const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
return (
<div className={logoClass}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
Or doing it inline like <div className={'my-2 mr-4 ' + classes.Logo}>
P.S would recommend first approach because you can change the string conditionally. Oh, and make sure that the classes are space seperated in the string.
The way you have it implmented you need to install the Bulma npm package. Then in the .scss file you are importing in your React code (in your case the logo functional component file) you need to import whatever Bulma CSS you want to use from the node_modules folder for example your Logo.module.scss could contain something like this:
// Import only what you need from Bulma
#import "../../../node_modules/bulma/sass/utilities/_all.sass";
#import "../../../node_modules/bulma/sass/base/_all.sass";
#import "../../../node_modules/bulma/sass/elements/button.sass";
#import "../../../node_modules/bulma/sass/elements/container.sass";
#import "../../../node_modules/bulma/sass/elements/title.sass";
#import "../../../node_modules/bulma/sass/form/_all.sass";
#import "../../../node_modules/bulma/sass/components/navbar.sass";
#import "../../../node_modules/bulma/sass/layout/hero.sass";
#import "../../../node_modules/bulma/sass/layout/section.sass";
Finally include the class names you want to use by appending them to the logoClasses string and setting them as the value (delimited by a space) for the className attribute in your wrapping div:
const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
return (
<div className={logoClass}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
I have a problem adding React to my project. The component is not rendered. This is not SPA project.
I've tried easiest way. I've setup new project with 'laravel new reactexample', next I made 'php artisan preset react' and 'yarn run'. After that I added in welcome blade.php.
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">
Example Component
</div>
<div className="card-body">
I am an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
welcome.blade.php, fragmen
<div class="content">
{...}
<div id="example"></div>
{...}
</div>
webpack.mix.js
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
app.js
require('./bootstrap');
require('./components/Example');
Did I miss something in the configuration? What should I do to get rendered component on page?
Ok, I found solutoin. I must add
<script src="{{asset('js/app.js')}}" ></script>
to the page.
Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;
Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE
To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;
I use Create-React-App to build a small React application. The full code is stored in github
My file structure:
src
components
Players.js
Player.js
App.css
App.js
index.css
index.js
...
App.js:
import React from 'react';
import './App.css';
import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
import Header from './components/Header';
import Players from './components/Players';
const App = (props) => (
<div className="scoreboard">
<Header title={props.title} />
<Players />
</div>
);
App.propTypes = {
title: PropTypes.string.isRequired
};
export default App;
Player.js:
import React from 'react';
const Player = (props) => (
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
);
export default Player;
Players.js:
import React from 'react';
import Player from './components/Player';
const Players = () => (
<div className="players">
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
<div className="player">
<div className="player-name">
Juan Li
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">30</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
</div>
)
export default Players;
And the line import Player from './components/Player'; leads to this error:
But if I put this line on top of App.js file, it doesn't report such compiling error. I really want to know what's the issue indeed with my code?
Your file path is wrong. Player is in the same folder as Players, so you need to just say import Player from './Player'
Delete the node_modules directory
Delete the package-lock.json file
Run npm install
Run npm start