Develop Reference

I'm building three pages using react, each of them has its own css file and only one css file is working for everyone of them

I'm working on these three pages:
App.js has two buttons, when you click on the first button it takes you to page "/quotes", and when you click on the second button it takes you to page "/recommendations". The htmls of all three are working BUT whenever i go to "/quotes" or "/recommendations" the App.js html content AND css content continues to appear (in a very weird and broken way, it looks very bad).
Heres an example:
this is my code:
App.js:
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import QuotePage from './QuotePage.js'
import RecommendationPage from './RecommendationPage.js'
function App() {
return (
<div className="all-page">
<Router>
<Routes>
<Route path="/quotes" element={<QuotePage/>}/>
<Route path="/recommendations" element={<RecommendationPage/>}/>
</Routes>
</Router>
<main className="central-div">
<h2>Taylor's Songs</h2>
<a href="/quotes" className="quote-bttn">
FIND ME A QUOTE
</a>
<a href="/recommendations" className="recommend-bttn">
GET ME A RECOMMENDATION
</a>
</main>
</div>
);
}
export default App;
QuotePage.js:
import './QuotePage.css';
function QuotePage() {
return (
<h1>testing</h1>
);
}
export default QuotePage;
QuotePage.css (I only made this for testing):
body{
background-color: red;
}
RecommendationPage.js:
import './RecommendationPage.css';
function RecommendationPage() {
return (
<div className="test">
<h1>this should be the recommendation page!</h1>
</div>
);
}
export default RecommendationPage;
RecommendationPage.css:
*{
background: rgba(191, 240, 243, 0.94);
}
.test{
background-color: rgb(234, 83, 83);
height: 30px;
}
If there's anything missing here, I'm sorry and would really appreciate if you took a quick look to check if it's here: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master/front
Thank you SO much for anyone who tries to help me!!! <3

I think you're falling for a trap commonly experienced with new people to react: it's not structured like HTML.
While this isn't strictly true, it's helpful to start off as thinking that react has only one screen/page: app.js. You pull other content into this page using components. This is called managing state.
Because you have all of that code in app.js, it will continue to appear. What you need to do is create a separate file (say, "home.js") and put that code in there.
You then need to do the routing with a tool like react-router-dom so that you can change the content on the screen.
Once you've done that, you'll have begin to see how react works.
So:
Move all of that content into a new file called home.js
install react-router-dom with npm
create a new file called navbar.js and create a navigation bar for your site with it
when done, only call navbar.js as a component in app.js
add your pages as routes
You'll need to read up on react-router-dom but it's pretty straightforward

How do I make a Bootstrap Icon appear?

I am new to Bootstrap and I'm building a login screen for an app. I want to use the the MDBIcons for google, twitter and facebook. I followed the documentaion here https://mdbootstrap.com/docs/b5/react/components/buttons/
However, when I view my webpage I can't see the icons. I only a small button in the color of the brand. My code for the google icon button looks like this
import "./App.css";
import React from "react";
import { MDBIcon, MDBBtn } from 'mdb-react-ui-kit';
const SignIn = () => {
return (
<>
<MDBBtn
className="m-1"
style={{ backgroundColor: "#dd4b39" }}
href="#"
>
<MDBIcon fab icon="google" />
</MDBBtn>
</>
);
};
The picture above is what I see, there is no Google logo in the button. I am using React and running 'npm start' to view my webpage on chrome.
Any help would be appreciated.

Did you add style in the public/index.html file? Info about it is here. React MDB Installation Guide.
I mean this:
link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
If not, try adding this into your index.html file's "head" section.

React bootstrap layout issue

I was wrapping my head around the layout for React-bootstrap. Tried the basic layout using Container, Row and Col. You can access the sandbox here.
What I understood from the react-bootstrap docs is the columns should have been put horizontally rather being stacked on top of each other. What I am trying to achieve is get those columns stacked horitzontally.

You have to import the bootstrap CSS file, bootstrap/dist/css/bootstrap.min.css. Try the following:
import "./styles.css";
import { Container, Row, Col } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
return (
<div className="App">
<Container>
<Row>
<Col>Col 1 of 4</Col>
<Col>Col 2 of 4</Col>
<Col>Col 3 of 4</Col>
<Col>Col 4 of 4</Col>
</Row>
</Container>
</div>
);
}
References:
StackOverflow. Container, Row, Col - in React-Bootstrap not working. https://stackoverflow.com/a/60673785/8121551. (Accessed 22 August, 2021).

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.

ReactJS Collapsable Element with "Progess/Completion bar"

I am struggling to make a relatively simple component in React. The goal is to get something close to the following image:
In the image there are two components of the same type (lets call them a Panel) in which content can be collapsed and expanded. Ideally a Panel would have a Header Component, a Progress Bar Component, and Content(i.e radio buttons, text, etc). When collapsed, I would like the "progress bar" to turn green. I've started with the following code snippet to create a progress bar, though it is very rough (some of the code in there will be placed in other components and is there for testing).. I am new to react so any insight or direction would be appreciated!
import React, { Component } from 'react';
import './styles.css';
export default class IconProgressBar extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div className="row">
<div className="progress-bar">
<span className="progress-line"></span>
<span className="progress-icon"></span>
</div>
<div className="step-container">
<div className="step-header">
<span className="col s6"><h3>Header 1</h3></span>
<span className="col s6 text-right step-summary">
<button className="secondary right edit-button">Edit</button>
<span className="current-value right"> . </span>
</span>
</div>
<div className="step-body">
</div>
</div>
</div>
);
}
}
Edit: In any answers I'm not super concerned about styling (that can be worked out later) i.e a Circle with a line under it in a collapsible & stackable element would suffice :)

I have implemented a majority of your functionality, except the binding and some of the styling. You will just have to finish up the styling and add your icons and callbacks to record user actions.
The idea is simple in this case, you have a list of panels which contain a header and a bunch of options to go with each. First, you can simply render the elements and then within your new ProgressBar component, maintain the state of the bar i.e. click to toggle and changing the styles of the bar on the left. Let me know if you have any further questions.
For the sake of simplicity, I have kept everything in a single component, but you might want to change that in case you want to isolate and reuse sub components.
https://react-2nhcbe.stackblitz.io