I have this app that in the end only have 1 page. My current file structure is divided per section. I want to make the header if clicked scroll to a certain section (that is on another component, they're not on the same file).
This is the code in the file that contains all component.
<Header />
<Banner />
<Description />
When you build the project with 'npm build' your files will get minified and a single JS file will get produced, which contains all of your component codes.so no need to think about an issue because of codes in multiple files.
I think you have to give absolute css positioning to Header component and display where ever you want.
Related
I want to add a common footer for all my html pages, but the footer has links to different pages in different folders, how can I do this?
The problem is, I can write the footer with respect to one page, where the links point to, but what about other pages?
I want a reusable footer with access to all the correct folder locations in each page I call the footer in.
I tried using a js page for the footer and bringing all the html pages under one main folder, but that isnt the right way to do it.
Any alternate solutions?
The way I usually do this is to create an empty placeholder div for the footer (and header, normally), and use a header-footer.js file to write code into those divs. For large nav structures, I build the nav as a data structure stored in a variable, usually via nested objects, then iterate through that with a function that generates the HTML and places it into the placeholder div.
You can check out my implementation at https://github.com/sdcervi/Reference if you want to see the specifics.
I have a simple react component. Assume it as the default animated logo when the app is created
I now need to inject this component on top of a webpage using my chrome extension. I know how to inject a html template code along with its css and js through a chrome extension
I tried npm run build to generate static files so as to inject all those through my extension.
But that doesn't work. When the built index.html is injected onto someother page, it doesn't render there. Its just injected as root and nothing inside is rendered
<div id="root"></div>
Is there a solution on how I can get the a pre rendered static html of my react component so that I can use it to inject through my chrome extension
<div id="root">
<img src="a.png">
<h1>Sample text</h1>
.....
</div>
Above is how I want the rendered html of that component needs to be
When the built index.html is injected onto someother page, it doesn't
render there. Its just injected as root and nothing inside is rendered
Did you inject just the index.html file? When you do npm run build there are other files as well that are generated and are needed for the index.html to work. Mainly the chunk.js file and css files.
They need to be in the same directory as the rendered index html file(You might have to replace the relative paths with absolute paths to make it work, if you are not able to put the files in the same directory).
Further reference: https://create-react-app.dev/docs/production-build
Summary
I am trying to render some slides and the container the slides exist in does not hide the non-active slides. The result is you can see all slides when only one should be visible. Additionally, The slides render outside of the container.
Attempts
I'd rather not make my own slide component and try to get it to work since that's the point of using this library. I've tried changing different css styles to see if it works, tried changing some of the content, nothing has fixed it yet.
Notes
When I put the component into storybook, the issue goes away. I'm not sure what the difference is, I pass the same props to both.
I found a solution. I changed the file to a scss file in node_modules, created an scss file in the same folder as my component, and imported the node_modules scss file into the new scss file.
The problem is related to react-carousel.es.css. It's either not imported or not applied for some reason. I had the same issue when forgot to import it
I included a navigation element in multiple pages like this:
<script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>
But this works just for html-files in the same directory "subdir". The navigation.html cannot be reached from the index.html in the upper main directory "dir".
If I add the upper pattern to the index.html in the directory above the navigation.html is reached correctly but the relative links do not work anymore. I don't want to replace the relative links by absolute paths.
Is it possible to switch between different links in navigation.htmldepending on wherefrom it is called?
Any other ideas?
Thanks a lot!
Since this is a multiple page website that reuses the same menu on all its pages, there's no functional or logical difference between page1.html and index.html apart from index probably being the first page you see. So I would just put index.html in the same folder and call it a day. It would make sense to have it on an upper level if the index page would load all the other pages into itself. Then the menu would only need to be included on the index page.
A folder structure is a project requirement, not a technical requirement. In development, all pages are likewise divided into sub directories and such to organize the files. But with running the deployment script to copy everything into production, the deploy script concatenates everything into one file anyway and the entire folder structure disappear.
It's perfectly normal to have a clear folder structure for development organised by business needs and also have a completely different folder structure for live code organised by technical needs.
you have to give the path of navigation.html file.
$(function(){ $("#includedNavigation").load("./dir/navigation.html"); });
like this
Can you use something like this
<link rel="import" href="navigation.html">
Or
$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });
Currently, my webpack build only generates 2 files : App.js (~1.2MB) & vendor.js(~213kb). In order to decrease time to first paint I wanted to extract my app shell(all static assets HTML , CSS , JS). In my case it would be my Material-ui app Bar with icon menu & list consisting of paper elements. Is there a way so I extract and inline the js code that generates my material-ui components above the fold (before my App.js and vendor.js get evaluated and parsed). Resulting in almost instant load of the app shell.