We Keep Coding

React switch css in Routes

I'm trying to make a little React App and it is the first time I'm using Router.
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import App from "./App";
import Shop from './routes/shop';
import style1 from "./App.css";
import style2 from "./shop.css";
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<div style={style1}><Routes>
<Route path="/" element={<App/>} />
</Routes></div>
<div style={style2}><Routes>
<Route path="shop" element={<Shop />}/>
</Routes></div>
</BrowserRouter>,
rootElement
);
It works great and I can use http://localhost:3000/ and http://localhost:3000/shop, but it is not switching the css files.
both CSS files get loaded on both pages
I know that React is a One Page Application, but please tell me how to remove the frickin App.css from http://localhost:3000/shop
So I want App.css on http://localhost:3000/ and Shop.css on http://localhost:3000/shop
I would be very grateful for every answer!

To add onto what Shivam said, what's happening with your code currently is that React is importing both CSS files and applying them.
This is because the syntax you're using is incorrect. You can't import a css file as something else:
import styles1 from "./App.css"
is actually just importing App.css and applying it to App.js and Shop.js.
You can do what Shivam said, however, if you want to style your react app in the way you were trying to, you can use css modules.
These work in the way that you were trying to use a css file - you can import them and use inline styling. I wouldn't recommend this approach however, since you would have to style every JSX expression in 'App.js' in this way. Just setting 'style={style}' only passes a prop to App.js with that style component, it doesn't actually apply it.
Check out this link. It covers css modules and some other ways of styling css in react. Best!

I don't why you're stating the CSS styles while browsing Routes.
Just import your CSS files in your component.js
Like In your case,
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import App from "./App";
import Shop from './routes/shop';
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App/>} />
</Routes>
<Routes>
<Route path="shop" element={<Shop />}/>
</Routes>
</BrowserRouter>,
rootElement
);
This is your components,
import "./App.css";
import React from 'react';
export default function App(){
//YOUR CODE HERE
}
Another Shop Component
import "./shop.css";
import React from 'react';
export default function Shop(){
//YOUR CODE HERE
}
This'll work Fine!

Rows, Cols, and Tables in React JS

I'm a React JS Beginner and I'm trying to create a table (or grid) by React Js. I've searched through different sites and tried different ways. I've used react-row, react-bootstrap, react-table, and followed the instructions step by step. However, none of them works. I tried to display a row with 3 cells but all of them displayed 3 rows :<<. Please, can you guys give me other ways or show me how to use the 3 mentioned libraries clearly. Thanks
Here is one of my case,
import React, {useState, useEffect, Component} from 'react';
import AppNavBar from './AppNavBar.js';
import {Container, Row, Col} from 'react-bootstrap';
const RestaurantReview = (props) => {
return(
<>
<AppNavBar />
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</>
)
}
export default RestaurantReview

If you have a stylesheet that you're referencing in this component you can add the below line at the top of it to ensure you pull in the default bootstrap styles.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css");
Then you can import that stylesheet in your App.js component or into RestaurantReview.js whichever you prefer. Preferably in App.js that way you can use the bootstrap styles in other components.
App.js
import React from "react";
import RestaurantReview from "./components/RestarauntReview";
import "./styles.css"; // this is where you import the bootstrap styles
function App() {
return (
<div className="App">
<RestaurantReview />
</div>
);
}
export default App;
This way you won't have to change any of your code in RestaurantReview.js
Here is a codesandbox with all of the code.

How can I create a new portal in react js?

I'm trying to create a new portal with an id .
This is the index html file in the public folder :
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="other"></div>
</body>
And here I tell react to render this component inside the div with the id of root :
import React from 'react';
import ReactDOM from 'react-dom';
function New() {
return ReactDOM.createPortal(<h1>DEMO</h1>, document.getElementById('other'));
}
export default New;
But when I npm start I dont see anything inside the div with the id of other .
How can I create a new portal in react js properly ?

I solved the problem by including the New component inside App.js file :
import React from 'react';
import logo from './logo.svg';
import './App.css';
import New from './New';
function App() {
return (
<div className="App">
<New />
</div>
);
}
export default App;
And when I inspect it , the New component is actually inside the div with the id of other .

How I can Highlight the code line in page with React.js in file .jsx?

I try some library but nothing done the job.
I try:
react-syntax-highlighter
(https://www.npmjs.com/package/react-syntax-highlighter)
after install and following the documentation the module always not found in my file .jsx. The dependency is in my package.json but the module is not found. (paranormal activity)
react-highlight
(https://github.com/akiran/react-highlight)
the module is found but don't work, the coloration of the line stay always dark
react-highlight
(https://www.npmjs.com/package/react-highlight)
... and more
If someone have any solution for color my text ^^
the code is :
import React, { useState, useEffect } from "react";
import Highlight from "react-highlight";
export const ButtonLib = () => {
return (
<div>
<pre>
<code id="foo" ref={myRef}>
<Highlight language="javascript">
import React from "react";
import { Button } from "Antd";
export const Button = () => {
return (
<span>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<JumboButton>Jumbo</JumboButton> <AuthenticationButton>Authentication</AuthenticationButton>
</span>
);
}
</Highlight>
</code>
</pre>
</div>
);
};

As Per the official documentation of react-highlight
Visit Adding Styles In React Highlight
From my perspective Adding a import statement in your component should work .
import 'highlight.js/styles/github.css';

react-highlight only converts your code in HTML with CSS classes. Without any CSS definitions, you won't see much of a difference.
You have to include CSS/styles from highlight.js, which are already included in the node package, so you can import one of them right away.
There is no need to add highlight.js as a dependency.
Instead of
import 'highlight.js/styles/github.css'
you could write:
import 'react-highlight.js/node_modules/highlight.js/styles/github.css'
You can preview all styles at https://highlightjs.org/static/demo/.

Rendering the component in the react as variable vs jsx component

The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed

You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));