Integration of Vue and Vanilla UI-Kit - javascript

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?

Related

How to add React to an already built website?

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.

Why aren't Bootstrap Native components rendering in my React app?

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

Is React compatible with Odoo?

I want to use my component library written in react JS in my Odoo website. Is it possible, compatible? if not is there a way to overcome this issue?

Can a website work with both simple JavaScript and React

I have a design of the website which contains javascript without any framework. Now I'm in the development process and I need to use javascript framework like react for a specific process. so, will it work or I need to transform everything into a framework? I'm working with Laravel and how can I make multiple react app for a single website inside Laravel framework?
Yes. This is exactly the problem that Facebook aimed to solve by creating React. They initially only used React for parts of the comment system and their chat.
You can create a React component and use it in only part of your website. You just need to provide it a place for it to mount. That is, a div where you are mounting your application.
Check the documentation for React DOM and the integration guide for more information about rendering to the DOM. The basic idea is to create your component then use the following code to render it:
ReactDOM.render(element, container[, callback])
From the React docs:
React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.
To integrate React with other libraries or frameworks, check out the React integration guide: https://reactjs.org/docs/integrating-with-other-libraries.html
Yes you can create global window renderer functions from react library and call it from vanilla js or some other third party library like jquery .You just need to include the minified js to call that function.
Some thing like below on react
const app = (parameter1,parameter2) => (
<YourComponent parameter1={parameter1} parameter2={parameter2}/>
);
window.renderYourComponent = function (p1, p2) {
render(app(p1,p2), document.getElementById('your_div'));
}
On your vanilla js
<script type="text/javascript" src="your_minified_react.js"></script>
<div id='your_div'></div>
window.renderYourComponent("p1","p2");
Everything will be rendered inside 'your_div' and you can work separately on react
Yes, You can make multiple React apps for a single website inside the Laravel framework.
The Laravel often uses a blade template for frontend UI.
What you need to do is build the React app and integrate the built React app with the Laravel blade.
You can copy the whole built contents of the React app into the Laravel home blade, for example.
In addition, inside React to import custom Javascript files, you can use several ways like script tags and also webpack copy module.

Angular 4 Javascript Plugins How to use

I'm new to Angular, and developing an Angular-Spring project
For my frontend,
I'm using this bootstrap project as base: https://github.com/start-angular/SB-Admin-BS4-Angular-4
It has, inside layout/bs-components/components, several components like date-picker, modal, pagination, etc
But I can't find the logic to import and use this components, I've imported the date-picker.component.ts file of Date-Picker for example, but can't use it, tried the example of the date-picker.component.html file, no use too..
Like I said, I'm really new to Angular, and have no clue how to proceed..can anyone help?

Categories

Resources