I had a template, that I wanted to convert to React JS components, and I successfully did that. As all of us know, that there are bunch of libraries used in a template. What I first did is, I inserted the .css and .js libraries into the react app through the index.html file, in the public folder of the create-react-app boiler plate. It successfully used the styles and scripts from the inserted .js and .css files. But the problem occurred when I added routing to the react app.
When, I navigate to another route through a link, the component loads, but the required styles and scripts doesn't loads. I don't know what the problem is. I tried to import the scripts and styles to the parent component which is home.js. The styles worked properly, but the libraries used in template are :
bootstrap.min.js,
eva.min.js,
feather.min.js,
jquery.min.js,
jquery-slim.min.js, and
popper.min.js.
On each import of the above libraries, it shows different errors. But as an example, for jquery.min.js it shows the following error :
In public folder add the following code in of the index.html page.
<base href="/">
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I'm making a portfolio in react, I want to display my other projects in it, so I put them in separate folders, when I import the folder to display in the project it assumes the default css style at home, there's a way to make it just use the css of the folder where it comes from he came? or will I have to host the other projects and access them by link?
PS: I'm saying that not even in html when you have the main project folder and want to access another project then direct the link to /(another folder)/index.html
I tried to use react router dom, to do this but it didn't work, as I said the css of the files got mixed up
I wanted to play with all different types of styling methods in GatsbyJS. In my project, I have three types of implementing stylings, global CSS, CSS Modules and CSS-in-JS(styled-component). Everything works as expected. But, when I build the project with gatsby build and open one of the index.html where I did CSS-in-js I see that there is a CSS file in data-href tag inside. When I open it, It contains all the CSS stylings of my project. But I didn't even import it to the component where I did CSS-in-js. Why would something like this happen? Why stylings from module.css are being referred inside this file.
I'm refactoring HTML into React. The HTML uses a purchased theme that relies on a few custom JS files including jQuery. How do I link custom scripts to components in React? Do I link them in my index.html file in the public folder? Or do I need to link them in each component file?
You can link them in the index.html or you can import them in your JavaScript. I tend to import in my root JavaScript file so that the imported files are bundled with the rest of my JavaScript (if using a bundler like webpack). For example, to include the JavaScript required for materialize I simply add
require("./js/bin/materialize");
in my app.jsx file.
I am using react's create-react-app for my new application.
I am really getting confused to separate index.html page for client side and admin panel.
I have different functional flows and css files for both side.
So index.html file should be loaded based on router navigation.
Example:
http://example.com => should load client/index.html
http://example.com/admin => should load admin/index.html
Note: i have tried webpack's multiple entries method and webpack html plugin. But it only separates bundle files not html(while navigate).
Please help me out.
webpack just a module bundler, It doesn't control which page show, This should be done by router.
if it's single page, you can use react-router
if it's multi page, you can use express route
after using the below code to include the external scripts, I don't really want any additional html pages.
var $script = require("scriptjs")
$script("/myscript.js")