I was building an application with react, and I wished to have a link within that application that would lead to another react app I built a few days prior.
The problem is that, up to now, when I wanted to link to another page, I would simply include said page, the css and javascript in the react folder and simply create a link to the html file.
But for a react page, not only the file is a lot heavier (due to all the node modules) but in addition to that the html file is a mere template for the react app to build upon, so I have no idea how I would link a react app within another react app.
I hope I was clear, if anybody has an idea, any help is appreciated.
Hey !
So I tested React router and it looks great from what I gathered so far,thanks a lot !
However, there is something I do not get, how does one import a react app without creating a conflict with the css files ? I mean I need to import the second app I was talking about, but when I do so, the css part of my apps gets messed up since it seems like both css files are active as once (the one from the app I want to import, and the main one)
It’s not really clear what you are trying to do here. You are throwing around words like “import” and “link” and “another react app” and it’s not clear what you mean by it.
React Router is for one React app. It creates the illusion of separate url routes. In “normal” app, you could link to different html files for different routes. Because React is a Single Page App (SPA), it can’t do that. But React Router allows you to create the illusion of this, with url routes and everything.
But when you say things like, “link within that application that would lead to another react app I built a few days prior.” it sounds to me like you are trying to link to a different app. In that case, if it is a different app altogether, then you just set up the React app in a different directory. I do this for my portfolio page, for example.
In the case of React Router (afaik) it is all the same app. In the latter case, they are two completely separate apps. In the latter case, CSS conflicts are not an issue as you are opening in a browser window and In the first case there is the potential for CSS conflicts. There are ways to handle that. BEM is one, CSS Modules is another. I’m sure there are more. I often put a CSS file with each component and just use an id for the component. For example, if the component is called “Menu”, I give the highest level div (or whatever) an id of “Menu” and then in my CSS, I put something like:
it’s not really clear what you are trying to do here. You are throwing around words like “import” and “link” and “another react app” and it’s not clear what you mean by it.
Yes ! I’m really sorry about not being clear, I really am struggling with the react terminology as I’m pretty new to it.
I’ll look into the links you provided and check for a solution. However, if I am not wasting to much of your time, could you please elaborate what you mean by
In that case, if it is a different app altogether, then you just set up the React app in a different directory. I do this for my portfolio page, for example.
As it sounds exactly like what i’m trying to do. When I first tried to link to a different react app, the first thing I tried was to place the “Sub App” in a different directory and anchoring a link to its index.html. However this does not work, I only get a blank page as if I directly open the html file on my desktop, It is why I thought I would need something else to make it work.
This is a jQuery app, but some of my projects are just static React apps and they are in a sub folder, here.
It’s a little byzantine how I set up the anchor tag in the jQuery, but ultimately it’s just an anchor tag. There’s nothing magical here. I’m just linking to the index.html file of a different app, just like I would if that target app were built in jQuery, vanilla JS, or even just html.
If you are getting a blank page - are you getting that when you go to the first React app? Are there any errors in the console?
Ok, I cloned your portfolio and it actually worked with your files; when I try to open the html of your react apps, I actually get a page whereas when I try to open one of my react apps’ html, I get a blank page. The hell have I done wrong …?
Maybe it’s caused by the fact I created my apps with npm’s create-react-app, since the babel files are created automatically, it will not act the same way as yours. Damn, If I had knonw I would have made them myself …
I seem to remember something about having to set the home pages in create-react-app, in the package .json. For example, in the time zone app (built with CRA) I had to specify:
in the package.json, the directory it ended up in. I think it is so it knows how to access the assets. If you open up your console, you might find some 404 errors.
OK, so I did some research and found that setting the homepage to "." will tell it to look for the assets relative to index.html.
OK, so here is a simple React app that calls a different React app and back and forth. These are two separate apps, created and built separately with create-react-app. When you link to one, the other one takes over and previous one is “forgotten” - only one app runs at a time so there is no danger of CSS collisions.
Here is where I deployed the static files created by the build (in the build folder) to allow them to work as web pages.
They are deployed on the same site, but they don’t need to be. In this case I’ve set them up in my github pages because I wasn’t using it for anything else.
Ok, I tried some more stuff, but nothing seemed to work, then I tried to reproduce the app you provided, but when I was ready to upload them on github pages, I re-read your message touroughly to make sure I didn’t miss anything, but bugged of on this sentence
Here 3 is where I deployed the static files created by the build (in the build folder) to allow them to work as web pages.
I’m not sure i’m getting that right, I always ran npm build in the same time as npm run deploy, so I never really bothered to think what it actually does. Could you please tell me what you mean by “deploying the static file” ? Don’t you need a package.json in the directory in order to run a build ?
On a side note, let me leave a word of thank for your kindness and your time, i’m struggling and probably missing something, and yet you keep helping me. If I can do anything in return, please let me know !
I’m not sure i’m getting that right, I always ran npm build in the same time as npm run deploy, so I never really bothered to think what it actually does.
I’m not sure I understand npm run deploy there is no such script in the standard CRA. I think you can run npm run build (or yarn build) in any sub-directory.
What happens? I’m no expert here, but … Try to run the index.html in the public directory buy clicking it in File Explorer or whatever. Nothing happens. Right now everything is spread out in unconnected JS and CSS files. CRA (through the magic of webpack) is connecting all of those for you. When you do an npm run start you are telling CRA to run a dev server so you can see how they all connect up and work. CRA (and webpack) allows you to spread all those files out and work on them in a much easier way. But you can’t deploy that. When you run npm run build, CRA (through webpack) “permanently” connects up all those files and minimizes and optimizes them into the build folder. That is what you deploy to the site.
Just to clarify, CRA is built around webpack but keeps it hidden from you for simplicity. If you really needed to get to that webpack stuff, you could do an npm run eject and you could see and modify the inner workings. But this is a one-way operation and it is not recommended unless you know what you’re doing.
On a side note, let me leave a word of thank for your kindness and your time, i’m struggling and probably missing something, and yet you keep helping me.
That’s what we do here. I got here because of FCC and others helping me.
If I can do anything in return, please let me know !
Just keep learning and one day you’ll be answering the questions. One day sooner than you think.
Alright, I’m gonna do a quick rundown in case someone with the same problem as me find this thread someday.
The problem I had was that I never actually used npm build correctly. I always used gh pages to upload my stuff online, and thhis module automatically creates a build to be uploaded, so I was leaving it do all the work. The problem is that is works great for single-page apps, but when it comes to multiple pages, it doesn’t work as well.
Because of that, I was keeping all my app in developement stage, meaning that I kept trying to link to an html file that was nothing more than a template, thus crashing on blank pages with no 404.
So I tried to copy one of my app and run npm build in its root directory. The build file created had an html file that still led to a blank page but this time it showezd 404 errors. Thanks to @kevinSmith I fiddled with tpackage.JSON file to add the famous "homepage":"." in the top level and when I ran npm built, I actually got a file that was usable, and it is the contents of this build file that I had to link to , not to the html file provided with CRA.
So yeah, I was just missing something stupid due to me letting a module handle the tasks automatically. Thanks a lot, @kevinSmith for sticking with me, couldn’t have done it without you.
