i am beginner in react js, using jsx bootstrap in react js, i have watched many videos in youtube some using jsx react and some using simple bootstrap with minimal classname change,that's why i got confused
what have to use react bootstrap or simple bootstrap
As it is documented in Bootstrap official website, "React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery."
It is moreover stated that React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. Hence, the dependencies on Jquery and Bootstrap.js are eliminated.
Methods and events using jQuery is done imperatively by directly manipulating the DOM. In contrast, React uses updates to the state to update the virtual DOM. In this way, React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React's virtual DOM.
If you are using React, React-Bootstrap would be a better option, as you will not need to add scripts such as jquery.js or bootstrap.js to your code. The React component model gives more control over form and function of each component.
Related
Is Bootstrap 5 compatible with React?
I've read that prior versions of Bootstrap (before version 5) effect the DOM, and therefore are not compatible with React. However, I heard that Bootstrap 5 is pure CSS. Does this mean that it is compatible with React?
Edit:
I stand corrected. It does use vanilla JS, but jQuery is removed.
I'm reading
https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/
Vanilla JavaScript instead of jQuery Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic
features such as menu expansion, carousel, dropdowns etc. However,
this forced dependency on jQuery was not liked by many developers who
wanted to use Bootstrap with modern JavaScript frameworks such as
React and Vue.js. With Bootstrap 5, they have removed this dependency.
It KIND of sounds like they remove jQuery, and that it allows compatibility with React and Vue.js. But it doesn't actually says it's compatible.
I think you have try to use some component library from bootstrap. some updated library compatible with Bootstrap v5
i.e. reactstrap using Bootstrap v5.1.0
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
I'm working on an update of an existing project, and the whole project uses Bootstrap , and the only place where I would like to replace bootstrap by semantic UI is in components where I defined list items.
Here is what i've done :
1 - I've followed the following guide : Get Started with Semantic UI to install React semantic UI
2 - And in my header tag, i've place the semantic UI cdn before bootstrap
Note : I've use the React Bootstrap for bootstrap
The semantic UI components render as expected , but the only problem is that the whole pages are now using semantic UI even my form field that i've created with bootstrap.
Where can the problem come from?
There can (will) be a lot of conflicts between SUIR and bootstrap. You probably shouldn't import the whole package. Instead install only needed modules. You can find a list of individual ones here
Certain elements in both packages share similar naming patterns, so there will be namespace conflicts. You can rename semantic element keywords in semantic.js and semantic.css.
How to merge node_module, project dependencies, of both Svelte and ReactJs?
I've seen guides showing how to include ReactJS file into a Svelte app
<SvelteComponent this={First} {...this.props}/>
That produces the following error:
Constructor is not a Constructor error
here is an example of including a svelte component in react. It been written by Rich Harris author of svelte:
https://github.com/Rich-Harris/react-svelte
Svelte and React are not compatible to import and use the other framework component directly.
It is definitely possible to create a Svelte app inside of a React app or vice-versa though.
You would have to instantiate the app like normal inside of the other app. The Svelte docs show how you can bind a Svelte app to a DOM node, which you can include in a React component. Make sure you also add the DOM node inside of that component, such as <div id="svelte-app" />.
If so, please share folder structure (where is semantic path) and an example of importing a component.
I know this question is rather "old" (in a front-end dev sense), but Semantic UI now has official React integration and bindings:
Semantic UI React
https://react.semantic-ui.com/
Among its key features (from the landing page):
jQuery Free
All jQuery functionality has been re-implemented in React.
Declarative API
Declarative APIs provide for robust features and prop validation.
Augmentation
Control the rendered HTML tag, or render one component as another component. Extra props are passed to the component you are rending as.
Shorthand Props
Shorthand props generate markup for you, making many use cases a breeze. All object props are spread on the child components.
Sub Components
Sub components give you complete access to the markup. This is essential for flexibility in customizing components.
Auto Controlled State
Our stateful components self manage their state out of the box, without wiring. Dropdowns open on click without wiring onClick to the open prop. The value is also stored internally, without wiring onChange to value.
Installation
$ npm install semantic-ui-react --save
$ npm install semantic-ui-css --save
or if you prefer Yarn:
$ yarn add semantic-ui-react
$ yarn add semantic-ui-css
After installing, include this line in your index.js file:
import 'semantic-ui-css/semantic.min.css';
I will make use of the react package https://react.semantic-ui.com/ . Same stuff but without jquery and all react components