How do I write nested styles? - javascript

I am using react.js and i have simple rules for my webpack
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader', options: {modules: true}}
]
}
all i do, i process my css styles with help of style and css loaders, so i can write css in modules, everything works fine but i can't understand how to write nested styles, for example i have jsx code like this
import React from 'react';
import ReactDOM from 'react-dom';
import ButtonCSS from "./button.css";
import HeaderCSS from "./header.css";
import ArticleCSS from "./article.css";
const Button = ({title}) => {
return (
<div className={ButtonCSS.defaultButtonStyle}>
{title}
</div>
);
};
const Page = () => {
return (
<div>
<header className={HeaderCSS.defaultStyle}>
<Button title="Search" />
</header>
<article className={ArticleCSS.defaultStyle}>
<Button title="Registration" />
</article>
</div>
);
};
ReactDOM.render(
<Page />,
document.querySelector('.container')
);
here i want what my default project button would be red for search, and orange for registration, but styles for button and for header are in different .css files, and they are compiled to random hashes like this
<div class="container">
<div data-reactroot="">
<header class="_1drImxMAqFTeL1TQCthA-D">
<div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div>
</header>
<article>
<div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div>
</article>
</div>
</div>
so i can't just simply write something like
header .magic {
do something ...
}
if i'll start using :global in all my .css files, what will be the point of using modules at all?

You should use composition: https://github.com/css-modules/css-modules#composition.
This way, you will have both your classes extending a class containing all the common css.

Related

TailwindCSS and React Not Correctly Importing JSX Elements

I have two files: The main file - App.js and a JSX Element which I want to load in App.js.
element.js has the following code:
const element = () => {
return (
<div className="text-gray-100 bg-gray-800 h-64 px-4">
<h1>Test Title</h1>
<p>Lorem ipsum</p>
</div>
);
};
export default element;
The App.js file is as follows:
import './App.css';
import element from './element';
function App() {
return (
<div className="flex">
<element />
</div>
);
};
export default App;
When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.
In JSX, lower-case tag names are considered to be HTML tags.
However, lower-case tag names with a dot (property accessor) aren't.
See HTML tags vs React Components.
<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)

Why my picture does not appear, seeing only the alt?

I am trying to display a pic inside a card but it does not work... actually I only see instead of the pic the attribute alt but I don't see the pic...
Here is my code :
import React, {Component} from "react";
import classes from "./cards.css"
const Cards = (props) => {
return (
<>
<div id="card" className={"card text-white bg-info mb-3"}
style={{maxWidth: 200, marginRight: 10}}>
<div className="card-header">Test</div>
<img src="myPicture.jpg" className="card-img-top" alt="pic" />
<div className="card-body">
<h4 className="card-title">This is a test</h4>
</div>
</div>
</>
)
}
export default Cards;
Do you know how can I do to see my pic on my card ?
Thank you a lot for your help !
Have you checked that the image has loaded correctly? You can use the inspector 'network' tab. Make sure the image is being loaded by the page. It will likely be red if it is not found (in the inspector).
If you're using webpack, try this:
import backgroundImage from './myPicture.jpg';
// all other code
return (
<div>
<img src={backgroundImage} alt="Background image" className="image" />
</div>
)
Config required in webpack:
module.exports = {
// other config
module: {
rules: [
// other rules
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader'
},
]
}
}
You need to install file-loader package
Add this
import BackgroundImage from './myPicture.jpg';
<img src="{require('./myPicture.jpg')}" className="card-img-top"alt="pic" />

How to connect React Component to Laravel Blade

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.

materializecss with reactjs (how to import javascript/Jquery in reactjs)

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;

React / Electron Rendering Components Is Failing

First of all I am new to whole React and Electron thing so I am not sure if the thing I am doing is correct. I am trying to separate my components into different JSX files and import them and render them into div tags in my index page for my Electron app. However, I am a bit confused because it "partially" works. I am trying to separate my tab pages. I have one container file which looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPane1'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPane2'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPane3'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPane4'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPane5'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPane6'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPane7'));
}
The content on my index.html page seems like loading fine however when it is rendering my components into the page, it is duplicating "TabPane1" only, the rest is not even there. Literally looks like they are duplicated.
My index.html page
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<div id="viewTabPane1"></div>
<div id="viewTabPane2"></div>
<div id="viewTabPane3"></div>
<div id="viewTabPane4"></div>
<div id="viewTabPane5"></div>
<div id="viewTabPane6"></div>
<div id="viewTabPane7"></div>
</div>
</div>
</div>
</body>
Finally, my component contents (just one of them) looks like following:
'use babel';
import React from 'react';
class TabPane1 extends React.Component {
render(){
return(
<div>
<div className="tab-pane" id="tabPane1">
yada yada blah blah tab content for tabPane1
</div>
</div>
)
}
}
export default TabPane1
If I populate these into divs separately as I stated above, it does populate them but it breaks the tabpage functionality - tab script expects the tab pages to be populated under the "viewTabPagesTest" div directly, rather than having another div under it.
If I do the same thing by targeting viewTabPagesTest directly, it only renders the last element, not all of the tab pages. So that's where I am lost actually.
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPagesTest'));
}
What is the correct way to achieve this - to render my components into a single div at once?
Cheers.
The correct way would be to render your navigation page and then inside your navigation page, render out your tab panes. Ideally you would only call ReactDOM.render once. Something like this:
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
window.onload = function(){
// ideally you pick a div and render your whole application rather than bits and pieces of it.
ReactDOM.render(<NavigationLeft />, document.getElementById('left'));
}
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper" id="left">
</div>
</body>
NavigationLeft.jsx
import React from 'react';
import-your-tabs from 'wherever';
export default class NavigationLeft extends React.Component {
render() {
return (
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<TabPane1 />
<TabPane2 />
.
.
.
<TabPane7 />
</div>
</div>
)
}
}
TabPane1.jsx
'use babel';
import React from 'react';
export default class TabPane1 extends React.Component {
render(){
return(
<div className="tab-pane" id="tabPanel1">
yada yada blah blah tab content for tabPane1
</div>
)
}
}
You are repeating yourself. That's unnecessary. Trying creating props inside the tabs and use one component called TabPane. For example by using props you would not have to have so much code that does the same thing. Try something like
class TabPane extends React.Component {
render(){
return(
<div>
<div className="tab-pane">
{this.props.paneText}
</div>
</div>
)
}
}
And then when you are going to use it somewhere else the thing you have to do is simply.
import TabPane from '../Components/TabPanes/TabPane.jsx';
class TabContainer extends React.Component {
render() {
return (
<div>
<TabPane paneText='This my first tabPane' />
<TabPane paneText='Second tabPane' />
</div>
)
}
Then you you have to create an App.jsx and then put all your containers there. When you have done this you can simply write ;
ReactDOM.render(<App />, document.getElementById('viewTabPagesTest'));
It would be good to check the Hierarchies in React.

Categories

Resources