Develop Reference

Frontend integration on React 18.1.0

I'm not able to write the code inside the index.js file. I wrote the code as per the code sandbox section of cube docs. It sends a console warning that my app may work as React 17. When I followed 18.1.0 conventions the page was shown loading and never stopped. Any solution to this?
It's written like this currently and I've added CubeProvider to access cubejsapi at app.js file while setting up routes, which is working fine.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './context/AuthProvider';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>,
document.getElementById('root')
);

Does AuthProvider a default export or named export?
For good practice, move the AuthProvider to the app component .
Index.js need to be codeless as you can.
More of context here : https://reactjs.org/docs/context.html

Use multiple components on one React Page

I am new to learning React and so far as I have been exploring its amazing. I have a quick question which is how can I display multiple modules such as "app.js" and "About.js" on one page? is this possible?
Here is some images that may help.
React App.js and About.js
React index.js
React js console error

Commonly in a react app, you will route based on different URLs.
The different 'modules' (also known as components) are typically defined in other JS files. See the HomePage and AboutPage files in the example below.
First, import the other pages.
Second, route to them given a path.
A common routing solution in React is React Router
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.js';
import AboutPage from './pages/AboutPage.js';
const MyApp = () => (
<BrowserRouter>
<Switch>
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
</Switch>
</BrowserRouter>
);

I cannot figure it out <App /> meaning. it is hard to google

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import "github-fork-ribbon-css/gh-fork-ribbon.css";
ReactDOM.render(<App />, document.getElementById("root"));
code is this. In last line. I know ReactDom.render means but I cannot figure out what <App /> means. especially "/>"

App refers to the file imported on line 3:
import App from "./App";
Open App.js on the same directory to look at the component. If you used the create-react-app, it is probably the root component of your application.

React blank page after running npm run build because of react-router-dom

Here is my code for the index.js page:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"
import './css/bootstrap.min.css';
import './css/style.css';
// Pages
import Library from './pages/Library.js'
import Register from './pages/Register.js'
ReactDOM.render(
<div>
<Router>
<Switch>
<Route exact path="/" component={Library}/>
<Route exact path="/library" component={Library}/>
<Route exact path="/register" component={Register}/>
</Switch>
</Router>
</div>,
document.getElementById('root')
)
When I run npm start I get the application as desired. localhost:3000 and localhost:3000/library render the Library component, while localhost:3000/register renders the Register component.
When I run npm run build I get the build folder but when I enter the index.html page, it is blank.
This problem was introduced after I implemented the router. Previously the result of both npm start and npm run build were the same.

Here is the link to the same issue you are facing on the official create-react-app github issues
It is marked as closed there, you can also read that for more info.
You should serve the build folder for example like
npx serve -s build

Why react-router does not display correct component?

When I enter localhost:8080 in my browser it displays App.js component. But when I navigate to localhost:8080/#/hello it displays same App.js component instead of hello.js. localhost:8080/hello show "can not get localhost:8080/hello" . What is the problem with my code? I am using webpack and babel in my App.
//index.js
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store} from './public/store/store';
import App from './public/Components/App';
import Hello from './public/Components/hello';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
//import './index.css'
render(
<Provider store={store}>
<Router>
<div>
<Route path="/" component={App}/>
<Route path="/hello" component={Hello}/>
</div>
</Router>
</Provider>,
document.getElementById('root')
)
//App.js
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div>
<h1>React Js.</h1>
</div>
);
}
}
//hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}

There are a few things happening here, let me try to explain what's going wrong and how you can fix them.
http://localhost:8080/#/hello it displays the same App.js component instead of hello.js.
Because you are using BrowserRouter instead of HashRouter (an older version, # is not working). The browser reads only the first part of your URL which is http://localhost:8080/. The # is similar when you route to a section of a page using the following.
Goto projects
The above keeps the user on the same page but scrolls to the section <div id="projects"></div>
Don't use this, if your are using React Router V4 it's not what you are looking for.
http://localhost:8080/hello displays cannot get http://localhost:8080/hello
You probably don't have a dev server running that supports front-end routing. If you don't, basically what is happening is that by pressing enter you tell the SERVER to serve you page, http://localhost:8080/hello. You don't want this, the server should be passive here and not serve you any other page then your main index.html. So, instead, you want the server to give you http://localhost:8080 and by doing so, it loads your main index.html and scripts, then react takes over, react-router checks the url and it then renders you the /hello route with the Hello component.
In order to achieve this make sure you have webpack-dev-server installed. You can do this by typing the following in the command line.
npm install webpack-dev-server --save-dev
Then add the following to your package.json
devServer: {
publicPath: '/',
historyApiFallback: true
}
// add the below line to the scripts section
"start:dev": "webpack-dev-server"
This basically tells the dev-server to re-route all requests to index.html, so react-router takes care of the routing. Here's more on Webpack-dev-server.
Then in your terminal run npm run start:dev to start the development server.
I hope this all makes sense and with these guidelines you're able to make your code work. If not let me know ;)
NOTE: Alex has a good point as well. React Router v4 renders all routes that match. So, if the path is http://localhost:8080/hello
/ and /hallo both match and will render. If you only want to render one, use exact as Alex mentions, or wrap your routes in a <Switch> component.
<Switch>
<Route path="/" component={App}/>
<Route path="/hello" component={Hello}/>
</Switch>
Here's what the react-router docs say.
Renders the first child or that matches the location
UPDATE:
After the OP uploaded a repo with the problem, the following was corrected to make the routes work. If anyone is interested, the fixed project is on GitHub.
Main points to make the project work:
Use react-router-dom instead of react-router
Tell Express route all incoming traffic to index.html app.get("/*", (req, res) => res.sendFile(__dirname + '/public/index.html'));
Use <Switch> and <Route> components to setup the routes as described in the question. See code here.

Try to use exact directive:
<Route exact path="/" component={App} />
See API doc: https://reacttraining.com/react-router/web/api/Route/exact-bool