I have a page template made in React, the documentation does not give more information about it.
The problem I have is that running "npm build" builds everything and not a specific page. What I want is that from the following image, the comingSoon12.js at the time of construction is the main index to upload it to a hosting, but I am a novice, almost inexperienced in React so I do not know what file I can edit to achieve what I want . Thank you very much in advance.
This is the image with the contents of the folders
This is the structure of the App.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./assets/scss/style.scss";
import ComingSoon01 from "./pages/comingSoon01";
import ComingSoon02 from "./pages/comingSoon02";
import ComingSoon03 from "./pages/comingSoon03";
import ComingSoon04 from "./pages/comingSoon04";
import ComingSoon05 from "./pages/comingSoon05";
import ComingSoon06 from "./pages/comingSoon06";
import ComingSoon07 from "./pages/comingSoon07";
import ComingSoon08 from "./pages/comingSoon08";
import ComingSoon09 from "./pages/comingSoon09";
import ComingSoon10 from "./pages/comingSoon10";
import ComingSoon11 from "./pages/comingSoon11";
import ComingSoon12 from "./pages/comingSoon12";
import ComingSoon13 from "./pages/comingSoon13";
import ComingSoon14 from "./pages/comingSoon14";
import ComingSoon15 from "./pages/comingSoon15";
import ComingSoon16 from "./pages/comingSoon16";
import ComingSoon17 from "./pages/comingSoon17";
import ComingSoon18 from "./pages/comingSoon18";
import ComingSoon19 from "./pages/comingSoon19";
import ComingSoon20 from "./pages/comingSoon20";
import LandingPage from "./pages";
import NotFound from "./pages/NotFound";
function App() {
return (
<Router>
<Switch>
<Route
exact
path={process.env.PUBLIC_URL + "/"}
component={LandingPage}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-one"}
component={ComingSoon01}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-two"}
component={ComingSoon02}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-three"}
component={ComingSoon03}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-four"}
component={ComingSoon04}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-five"}
component={ComingSoon05}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-six"}
component={ComingSoon06}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-seven"}
component={ComingSoon07}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-eight"}
component={ComingSoon08}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-nine"}
component={ComingSoon09}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-ten"}
component={ComingSoon10}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-eleven"}
component={ComingSoon11}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-twelve"}
component={ComingSoon12}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-thirteen"}
component={ComingSoon13}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-fourteen"}
component={ComingSoon14}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-fifteen"}
component={ComingSoon15}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-sixteen"}
component={ComingSoon16}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-seventeen"}
component={ComingSoon17}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-eighteen"}
component={ComingSoon18}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-nineteen"}
component={ComingSoon19}
/>
<Route
path={process.env.PUBLIC_URL + "/coming-soon-twenty"}
component={ComingSoon20}
/>
<Route exact component={NotFound} />
</Switch>
</Router>
);
}
export default App;
If you want the file to
comingSoon12.js
be the main file, you must import it fromApp.js
. Suppose youcomingSoon12.js
have the following:You can import it from
App.js
import CommingSon12 from './pages/comingSoon12';
and the file
App.js
would have the following:in this way, when doing the build, it will take that component as the main one.
I hope it helps you. Greetings.
I got it to work with this code
This code works, I had the same problem
I don't think the approach you are following is correct. At first
npm build
, it is not exactly a project constructor as you are assuming, and I understand you, because from the name that is what it seems to be referring to. You can read more about this here .Now, React.js, doesn't work as well as you're assuming. Let the index.js now be built based on another js file. That's the traditional method of how web pages worked and that's where the replacement you're trying to do applies.
In the UI libraries for javascript there is something called State. So what I recommend is to get the comingSoon12.js component executed, you need to know which State is appropriate to get there, from the initial state of the app.
Something that can help you better understand how React works