We Keep Coding

How to prevent laravel from overriding css files after react compilation?

I have a Laravel project where we are using React for new components but about half of the existing pages are older and just use the regular blade files.
In the public folder we have a few css files that are included in app.blade.php which serves as out top file.
Now, it works perfectly until we try to import React Component. As soon as i do this, it recompiles the css in some weird way that it just breaks. All previously used css just seems to stop working.
This is my mix file:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css')
An example React Component i'm testing (comes from the laravel + react babel preset, i just added the css import):
import React from 'react';
import ReactDOM from 'react-dom';
import './Example.css'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="txt-color-white card-header">Example Component</div>
<div className="txt-color-white">ISTO É UM TESTE</div>
<div className="txt-color-white card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
And this is my public folder. I'm assuming react css is being thrown into the app.css file but instead of being added (appended) is doing something weird.

implementing page javascript in next/react component

I am trying to implement a project like:
https://codepen.io/andytran/pen/GpyKLM
As you can see there is javascript that is needed for the page to function. I am trying to build a Next/React component that implements this code:
import React, { Component } from 'react';
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
class Auth extends Component {
render() {
return (
<div className="App">
<Header></Header>
<div className="container mrgnbtm">
<div className="row">
<div>
hello
</div>
</div>
</div>
</div>
);
}
}
export default Auth;
Where would I put the javascript in the above example? Also, how would I call code from a scss file?

What you do is anti-pattern, instead of importing bootstrap from a CDN you can use reactstrap package.
for element listeners, must pass those to each element that you want, like onClick:
<div id="button" onClick={() => alert("button clicked!")} ....
and for using SCSS in your next app, first you have to install the sass package:
npm install sass --save
then reload the dev server and import SCSS file in component, e.g:
import styles from '../../styles/Home.module.scss'

What's the appropriate way to replace my wrong design?

I have a question about nuxt.js project,
as we know the nuxt.js generate the routes automatically.
I have a page structure like this:
In the header there is navigator in it, I want use it to switch pages(switch the main body's content).
but the nuxt.js do not like vue-router have <router-view/>
<route-link></route-link>
<router-view/>
it only has
<nuxt-link></nuxt-link>
So I write code structure like this:
<template>
<div >
<Header></Header> <!-- the main body written in the Header -->
<Footer></Footer>
</div>
</template>
the Header component:
<navigator-component></navigator-component>
<div>
<Home v-show="$store.state.page_name == 'home' "></Home>
<Search v-show="$store.state.page_name == 'search' "></Search>
<Aboutus v-show="$store.state.page_name == 'about_us' "></Aboutus>
<Contactus v-show="$store.state.page_name == 'contact_us' ">
</Contactus>
</div>
but there is a problem, the URL will not switch, it will stay in the root URL.
So, what's the appropriate way to solve my problem? how to design the
code structure?

Nuxt has a "router-view". It is just: <nuxt />.
The way to go here, is to use layouts.
There is a default file in the layouts directory. Every page has this layout by default.
You can simply write in this default layout file your page structure.
For example:
<template>
<Header />
<nuxt />
<Footer />
</template>
<script lang="ts">
import Vue from 'vue';
import Header from '..';
import Footer from '..';
export default {
components: {
Header,
Footer,
},
};
</script>

Using fullpage.js with React

I'm trying to make a React Component that uses fullpage.js. However, I'm having issues trying to integrate the javascript files from the fullpage.js library. This is what I have (abbreviated):
import React from 'react';
let $ = require('jquery')(require('jsdom').jsdom().defaultView);
import 'fullpage.js';
class FullPage extends Component {
componentDidMount() {
$('#fullpage').fullpage();
}
render() {
return (
<div id="fullpage">
<div className="section">Some section</div>
<div className="section">Some section</div>
<div className="section">Some section</div>
<div className="section">Some section</div>
</div>
)
}
}
However, using this component gives an error:
Error: jQuery requires a window with a document
Even if I have defined a window using JSDOM.
Beyond fullpage.js, how should I go about using libraries that require jQuery into React components?

window.$ = require('jquery')(window);
Could you please try with above code?

Calling different components into rows in React

I have a very basic question that I cannot comprehend and need some help. I'm creating a really small React project for my personal website. I have App.js that is calling all the different components such as header, intro and etc:
import React from 'react';
import Header from './Header';
import Intro from './Intro';
export default class App extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-6">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-6">
<Intro />
</div>
</div>
</div>
)
}
}
As you can assume, header is just the top portion of the page and intro (currently) just says some text. This is what it looks like:
The second component is being blocked by the first component. Can someone explain how React works with components in terms of how it's rendered on the web page? Or is this purely a HTML issue in App.js?