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.
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 having an issue with Snowpack and CSS modules. When I build the app it creates a .json file with the hashed and non-hashed class names but they are not loaded into index.js and all the classes show as undefined when inspecting the page. When I look at the source I can see an empty object that looks like it should have the JSON in and if I add it manually it works... is there something I need to configure to get this to work or should it just do it after importing the xxx.module.css file?
Additionally is there a way to bundle the css in with the JavaScript so it injects the styles at runtime rather than having a separate css file? Maybe using #snowpack/webpack to bundle them?
Update:
I just updated to the latest version of snowpack and it doesn’t even generate the .json file...
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="/">
I have a custom files like
- bootstrap.css
- bootstrap.js
- owl-carosel.min.css
- owl-carosel.min.js
etc. I want to add them locally from my assets folder inside src to my index.js
I have tried adding them to my index.html but the problem is i have to move my assets folder to public folder.
When i try adding them using import statement it Fails to compile
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like
Step1:'bootstrap': 'file:/path/to/your/repo'
Step2:npm install
I want to integrate them to my index.js file.
With js you can use the function import() that allow you to import external js file in a js file ;) Just read the doc
try using react-bootstrap framework its build with react components! here a link:https://react-bootstrap.github.io/
I was wondering before starting to do it, if is posible to create a react proyect(i need to do a forum widget) code it on react and the compile it and put the .js output file in other proyect, not with react the other proyects uses php symphony and twig, would be as easy as importing the script and adding a ?
Yes it can be done. The bundle of a react app is a complete js with everything that you need to run it. At the end you only import one js file in your html. I recommend you use a bundler library like webpack or browserify to generate a minified bundle and apply other functionality before creating the final bundle.