We Keep Coding

React.js NavBar: Is it possible to reference a different component's markup? (Trying to create a navbar that references to components in one route)

Basically I'm trying to make a navbar for a personal website application in which the navbar references content (About/Skills, etc.) all on single page (route). When making the navbar, I can easily reference markup with ids/classes BUT I would have to put all the html in one file.
I noticed that if I were to separate each content into its own react file (About.jsx, Skills.jsx, etc.) and import them, there didn't seem to be a way for me to reference the react component's markup.
I also noticed with react router, this wasn't feasible because each component would be on a separate route (which I don't want) rather than on a single route.
This is my current navbar file below; How exactly Can I import and reference the markup of the separate components?
import React from 'react';
import "../Styles/NavBar.scss";
import About from "./About.jsx"; (Not used)
import Skills from "./Skills.jsx"; (Not Used)
import Projects from "./Projects.jsx"; (Not used)
const NavBar = () => (
<div class="MainDivWrapper">
<div class="NavBarDiv">
<h1 class="NavBarH1">NavBar</h1>
<br/>
<nav>
About
Skills
Projects
</nav>
{/* <div id="AboutDiv">
<h1>About Me</h1>
<span>Just some text</span>
</div>
<div id="SkillsDiv">
<h1>Skills</h1>
<span>Just some text</span>
</div>
<div id="ProjectssDiv">
<h1>Projects</h1>
<span>Just some text</span>
</div> */}
</div>
<hr class="HeaderDivider"/>
</div>
)

You reference a JSX import like that:
/* Component have to start with a capital letter. file name can be anything (usually is the same as component) */
import MyComponent from "./MyComponent"
export default function MyApp() {
return (
<div>
/* other html/components here */
<MyComponent /> // selfing close tag
/* or */
<MyComponent> // with `children`
some content
</MyComponent>
</div>
)
}
Here is a codesandbox implementation of your code: https://codesandbox.io/s/stack-reactjs-navbar-is-it-possible-to-reference-a-different-components-markup-64oic?file=/src/App.js

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'

Bootstrap is not working in laravel react ui

I've set up my new laravel project with react UI using php artisan ui react. Did the npm install and npm run dev. Added the react id and script link to the welcome.blade.php. now the example react component is loading but bootstrap styling isn't present at that page. my codes are below,
app.js:
require('./bootstrap');
require('./components/Example');
Example.js:
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
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'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
I'm using laravel 8.12. Am I missing something?

You need to include styles:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
to your welcome.blade.php view file, where is located <div id="example"></div>

I faced issues with Pagination error while using bootstrap ui.
Additionally, I will suggest adding this code to AppServiceProvider.
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrap();
}

How can I turn this regular JavaScript function into something React.js can read

I'm following along with a video to make a slideshow with JavaScript. I'm trying to figure out how I can implement this function from the video to React in create-react-app. I'm not too familiar with React but I think I shouldn't be trying to have "getElementsByClassname" in my function. What should I do to make this work?
I'm not sure where to call a function as you would in regular JavaScript, so I've been calling it with an onClick event. If anyone could help me with that as well, that would be amazing.
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import './Showcase.css';
class Showcase extends Component{
constructor(props){
super(props);
this.initGallery = this.initGallery.bind(this);
}
initGallery(){
let slideIndex, slides, dots, captionText;
slideIndex = 0;
slides = document.getElementsByClassName('imageHolder');
slides[slideIndex].style.opacity = 1;
console.log('hello');
}
render(){
return(
<section onClick={this.initGallery} id="Showcase"> {/*CONTAINS ALL SLIDING IMAGES*/}
<div className="captionHolder">
<p className="captionText">Caption Text</p>
</div>
<div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
<img src="https://www.spacex.com/sites/spacex/files/amos17_v2.jpg" alt="Amos-17 Mission"/>
<p className="captionText">Caption Text-01</p>
</div>
<div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
<img src="https://www.spacex.com/sites/spacex/files/v2_smallsatheader.png" alt="RideShare Missions"/>
<p className="captionText">Caption Text-02</p>
</div>
<div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
<img src="https://www.spacex.com/sites/spacex/files/nasa_astronauts3.jpg" alt="NASA Astronauts on crew Dragon"/>
<p className="captionText">Caption Text-03</p>
</div>
</section>
);
}
}
export default Showcase;
Not getting any errors, I checked that the function was being called successfully by adding a console.log whenever the click event triggered the function. I'm simply not getting the desired result which is to take the className and turn the opacity to 1 which will make an image appear since it is set to opacity 0 in the CSS file.

Instead of using document.getElementByClassName you can create an ref over an tag and use it like this.myRef = React.createRef(); in your constructor and binding it to the tag this is the way to do in react. You can refer here
React Refs and Dom

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?