CODEWITHSUNDEEP
reactjsasp.net-coresingle-page-application
Avoraa
Avoraa

Reputation: 95

REACT import css and js files

My application needs to have two pages, one landing page and one admin page. Both pages use different themes. I could not integrate css and js files of these two pages in a single page application.

const jquery = require('mdbootstrap/js/jquery-1.11.3.min.js');
window.jQuery = jquery;
window.$ = jquery;

require('mdbootstrap/css/bootstrap.min.css');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.css');
require('template/homePage/js/plugins/owl-carousel/owl.theme.css');
require('template/homePage/js/plugins/owl-carousel/owl.transitions.css');
require('template/homePage/css/animate.css');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.css');
require('template/homePage/css/preloader.css');
require('template/homePage/css/style.css');

require('mdbootstrap/js/popper.min.js');
require('mdbootstrap/js/bootstrap.min');
require('template/homePage/js/plugins/vivid-icons');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.js');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.jquery.js');
require('template/homePage/js/plugins/wow/wow.js');
require('template/homePage/js/plugins/jquery.easing.min.js');
require('template/homePage/js/main');

this sample import not good work. And I need outside link css and js.

I have two problem one of them is $(...).scrollspy is not a function other WOW is not a function.

None of them work in sequence.

Upvotes: 0

Views: 631

Answers (1)

Angelo Giuseppe
Angelo Giuseppe

Reputation: 261

When you want to import resources into your React app, you use imports like this:

// Import with variable assignation

import logo from './logo.png';  

// Import without variable assignation   

import './css/index.css'

You can read more about this in the create-react-app documentation:

https://create-react-app.dev/docs/adding-images-fonts-and-files/

You can read more about ES7 imports here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

I see what you're trying to do is to add libraries and resources to your app component, like if were a common html file, you can't do that in React , you need to find an implementation.

It is not recommended to use jQuery with React, because you use jQuery to write code in a simple and fast way to create complex implementations, now those complex implementations can be made with just React and JS, that is what React is designed for.

Now I understand that you might want to use jQuery even do is not that recommendend, so here is a link where you can get jQuery to install it as a plugin for your React app

https://www.npmjs.com/package/jquery

You would be able to import it to your component like this:

import $ from "jquery";

To use Bootstrap in your React app you check out the documentation of an implementation of Bootstrap for React, react-bootstrap:

https://react-bootstrap.github.io/getting-started/introduction

Upvotes: 1

Related Questions