Develop Reference

How to remove CSS from global scope and only import to the specific pages in React, Gatsby

Currently, I am trying to implement a keen-slider library(https://www.npmjs.com/package/keen-slider).
For installation, we need to add import 'keen-slider/keen-slider.min.css'.
In that case, the keen slider CSS is added to global, as you know.
The CSS is included globally in the page markup. From my perspective, it should be included only on pages where the slider is used
Is there any solution to solve this problem?

I'm not sure to understand the issue. You can always choose to import a file (CSS or whichever format you want) globally or in a specific file.
For your use-case, as soon as you install the dependency (npm install keen-slider --save), you will be able to import the minified CSS into the needed component. For example:
import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'
export function IndexPage(){
const [sliderRef, slider] = useKeenSlider()
return <section className="slider-wrapper">
<div ref={sliderRef}>
<div class="keen-slider__slide">1</div>
<div class="keen-slider__slide">2</div>
<div class="keen-slider__slide">3</div>
</div>
</section>
}
With this approach, you will be only importing the keen-slider.min.css in the IndexPage.

I think, you can try to lazily load your component via:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Also you should do import 'keen-slider/keen-slider.min.css' inside of OtherComponent.
More info here: https://reactjs.org/docs/code-splitting.html

Font Awesome icons not showing up using Bulma in Gatsby

I am building a website using Gatsby and Bulma. In my Nav.js file, where I create a general format for the buttons at the top of the website, I have a few buttons using Bulma to which I would like to add icons inside. I went off the documentation for adding Bulma buttons with Font Awesome Icons: https://bulma.io/documentation/elements/button/. My code is exactly the same, other that the fact that I have my buttons wrapped in an <a> tag to link to other pages in my website. I have the included <script> file listed in documentation to have Font Awesome Icons available, and my code looks as such:
const Nav = () => {
return (
<div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
<nav>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<p class="buttons is-outlined is-centered">
<a href="/"><button class="button is-outlined"> <span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</button></a>
<button class="button is-outlined">Projects</button>
<button class="button is-outlined">Experience</button>
</p>
</nav>
</div>
)
}
I'm not sure if I have the script located in the correct part of the file, and I've only tried to put an icon for my Home button which looks like this:
The gap to the left of the "Home" is where I'm guessing the icon should be. I would appreciate any help as to why the icon is not showing up or is showing up blank. Thank you!

I ran into this issue myself so posting here for anyone that is looking for the answer. There are a few ways to make it work, including using the icons as components with a library such as react-fontawesome. However if you're using Bulma then chances are that you specifically don't want to do that, instead you want to use the class names.
So first install the package:
npm i #fortawesome/fontawesome-free
Then in your index.js / app.js / any styling wrapper component you have:
import '#fortawesome/fontawesome-free/css/all.min.css'
Here is a Typescript example I have in front of me. This is a wrapper component that imports all my global styles for nested child components to use:
import React from 'react';
import 'bulma/css/bulma.css';
import '#fortawesome/fontawesome-free/css/all.min.css';
import NavMenu from '../nav-menu';
import Footer from '../footer';
import './layout.css';
const Layout: React.FC<{ light: boolean }> = ({ light, children }) => {
return (
<div className="layout-wrapper">
<NavMenu light={light} />
{children}
<Footer light={light} />
</div>
);
};
export default Layout;

With the help of a friend, what solved the issue was putting the <script> tag in the public/index.html file of the project, and then making an exact copy and naming it index.html and putting it in the static folder in the project. This way, each time a Gatsby server is ran, it will create a copy of the index.html file in the public repository with the Font Awesome Icon script included.

how to use images in reactjs

Here is my code.
I have an images folder inside the "src" folder and I want to use the images inside of my components/Myapp.component.js
import React from 'react';
import imageOne from '../img/cool-img.jpg';
function Myapp() {
return (
<div className="myapp">
<h1>import image<h1>
<img src={imageOne} alt="import-img" />
<h1>relative-path image</h1>
<img src="../img/cool-img.jpg" alt="relativepath-img" />
</div>
);
}
export default MyApp;
My problem is that the first import image works fine but the second relative path image does not work.

There are some common ways to import images in the ReactJs application. for such cases that images have separated server, it's so simple just call images like below:
<img src="https://images.cdn.com/sample-image.png" alt="sample-image" />
But if the images are for the application not for a show to the users, like images of UI design, there are two common ways:
Use copy-webpack-plugin and put all photos inside a folder then after build and serve, you should serve this folder and then you can call them from your link(eg: assume we run the project on the localhost:3000):
<img src="https://localhost:3000/sample-image.png" alt="sample-image" />
Just like your first trick, put all photos inside a folder and import them inside each component you need, then use it:
import sampleImage from '..[pathToAssets]/assets/imgs/sample-image';
~~~
<img src={sampleImage} alt="sample-image" />
I hope this answer helps you.

This is not working because <img src="../img/cool-img" alt="relativepath-img" /> image src is not resolved using Webpack file-loader, when you use import statement for a file, it will be checked first by Webpack and it will use the appropriate loader for the file type, in your case its an image so it will use file-loader, it will then handover the responsibility for it to handle the resolve of your file path,
If for example do a console.log(imageOne) it will log a path for your image, based on your public file path specified in your Webpack config file.
<img src="../img/cool-img" alt="relativepath-img" /> on the other hand will be printed as is since it written inside JSX code and it will not resolve the real path for your public folder.
So you should be using the first way (importing files) to resolve your files/images path.

NuxtJs vue-flip not flipping between front and back sides

I do install vue-flip into a NuxtJs (VueJS) project created using this command: npx create-nuxt-app <project-name>.
In the index.vue file i just add:
<vue-flip active-click="true">
<div slot="front">
front
</div>
<div slot="back">
back
</div>
</vue-flip>
I do register the plugin at nuxt.config.js :
plugins: [
'~/plugins/vue-flip'
]
And create the file vue-flip.js at the plugins folder :
import Vue from 'vue'
import VueFlip from 'vue-flip'
Vue.use(VueFlip)
After run npm run dev and at localhost:3000 the text front and back are visible instead of showing just the front text so when clicking the back text would appear.
How can i fix?

Did you checked you console for errors? Because there should be ones..
According to docs https://www.npmjs.com/package/vue-flip is not a vue plugin but a component, so it wont work like this. You need to specify it as a component where you use it.
import VueFlip from 'vue-flip';
export default {
components: {
'vue-flip': VueFlip
}
}

How can I import component-specific css styles in React?

This is the structure that I'm trying to mimic (from react-boilerplate):
component
|Footer
|style.css
|Footer.js
Inside Footer.js the styles are imported quite elegantly this way:
import React from 'react';
import A from 'components/A';
import styles from './styles.css';
function Footer() {
return (
<footer className={styles.footer}>
<section>
<p>This project is licensed under the MIT license.</p>
</section>
<section>
<p>Made with love by Max Stoiber.</p>
</section>
</footer>
);
}
export default Footer;
className(s) are then generated for the footer element to apply the style to that specific component.
But when I try to mimic this structure in my project it's not working. The imported styles object is always empty. I suspect I might be lacking some dependency but I can't figure out what it might be.
I would like to know which dependency I might be lacking and/or webpack configuration I need to do in order to apply the same structure to my project.

You may config your webpack like this
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .

Quite not sure about it, but it seems you are looking for styles.css with javascript
import styles from './styles.css';
and you have a style.cssin your directory :)