tried
npm install --save bootstrap.native
loaded import 'bootstrap.native/dist/bootstrap-native-v4.js'; in index.js file in create-react app.
Expected Result:
converting bootstrap component (navbar, modal, alert, popup...) to jsx and creating react component should work as expected in bootstrap v4.
Problem:
Works when pasted directly in index.html but does not work when tried to render through component.
This shows bootstrap native is loaded properly, but it seems to be working only if bootstrap code is in DOM, but not on " create react app" rendered code.
Also any suggestion on, using bootstrap component as react component without use of jquery or any react-bootstrap library(something native implementation) will be welcome.
I am using BSN but not together with react:Reason bootstrap.native uses the browser DOM, which is going to wreck havoc with React's virtual DOM. In short: Don't do it!
to say it more direct: React is a whole different way of doing things. React support is out of scope for bootstrap.native. It would require a completely separate codebase.
Use react-bootstrap it is a complete rewrite of bootstrap.js (and also no jQuery)From the developers:
React-Bootstrap replaces the Bootstrap JavaScript. Each component has
been built from scratch as a true React component, without unneeded
dependencies like jQuery
Related
I am Using vue 3 with CLI Build tool. Going to import my component on .net page.
I need to check my components on browser without using a router library. Actually it was stand alone components
Is there any way. In Vue 2 i have used gulp build tool and fractal tools for checking my components in broswer. After migrate to vue-3, i can't find solutions for that.
If you route the page with Java or .Net, Just create a route page with .Net and import the component into your new page. Hope this will work
if you just need to test a component and your vuejs project is starting rely on jsp or .net. just make a new route and import the component into the route page you make. you could see the way in vuejs.org quick start part. https://vuejs.org/guide/quick-start.html#without-build-tools[enter image description here]1
I am new to react js. I am building one application using React and Larave but I don't know how to include non-react libraries into the react-laravel application. I have used the componentDidMount function to include the file, which is getting include in the document but it's not getting executed.
With "componentDidMount" you are in a React component. You might have any non-React JavaScript code there, but React will only apply what it gets back from a component. It is not possible to add some "side effects" to React components, i.e. doing arbitrary JS additionally to React's rendering.
I already have a built website with Express and I wanted to use React just in some pages. How is the best way to add it having all the resources that I have using the create-react-app?
I know I can add each script to the HTML file, but that is kind of error prone and laborious. I just wanted to be able to do all the import and manage the files the same way I do with an application using create-react-app.
If you only want to use React in some already existing pages, I would suggest you to go through importing the script as React documentation talks about here. It gives you a nice and short example on how to do add react components to existing html pages. You only need to import the react and react-dom dependencies once in your html entry-point (probably index.html), then in each page you only import the required components.
The other alternative is to follow the idea in this guide, to build the app using both create-react-app and express. You would want to move all the html code into React components and handle everything from React, and you will be able to manage all the project structure like you wish. But I believe this is more error prone and a lot of effort, if you only want to add React to build some componentes in just some pages.
I want to integrate UI-kit completely into my VueJS app without the use of Vui-Kit framework. My css works correctly but the javascript does not work properly (for example data-src attribute is not recognised). I integrated it inside main.js like this.
import 'uikit/dist/css/uikit.css'
import 'uikit/dist/js/uikit.js'
Can somebody help me with the correct integration?
I want to use jquery.scrollbar plugin in my react application. I want the jquery.scrollbar for every component which is scrollable. I have already installed it via npm. I am not getting any way to initialize it in my react component. How should I do it?
Always remember to import it in your components and called the function inside your JSX. I believe react js has some nice scrollbar which are more suitable
http://malte-wessel.github.io/react-custom-scrollbars/