Can someone please explain how to add bootstrap to react app and how to use them inside react components since we can not add CDN links and "class" attribute inside a react app. Would you kindly please explain how to use bootstrap components inside react app. This will really helpful for me since i'm a very beginner to react developer..
Read this
https://react-bootstrap.github.io/getting-started/introduction
1. install react-bootstrap
npm install react-bootstrap bootstrap
2. import css file in your index.js or app.js
import 'bootstrap/dist/css/bootstrap.min.css';
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
3. import components like
import { Button } from 'react-bootstrap';
You can use normal bootstrap classes like className="row"
You can't use bootstrap directly in react application instead you can use reactstrap which contains the bootstrap components.
Example of using reactstrap inside react
import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
If you want standard Bootstrap
install
npm i bootstrap
import in App.js
import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap"; // <-- JS File
Related
I am new to react an trying to add external JS in react App.
However no approach is working for me as JS does not work at all.
Below is my code. What is wrong with the code?
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import * as Yup from 'yup';
import ScriptTag from 'react-script-tag';
import {Helmet} from "react-helmet";
function App() {
return (
<div className='App'>
<h1>This is external javascript - Helmet</h1>
<Helmet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
type="text/javascript" />
</Helmet>
<h1>This is external javascript - ScriptTag</h1>
<ScriptTag isHydrating={true} type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
</div>
);
}
export default App;
You cannot use jquery cdn directly inside the react js project. Rather you can go with the below plugin to use jquery inside your react js project,
https://www.npmjs.com/package/react-jquery-plugin
Just install it with below code,
npm install --save react-jquery-plugin
I created a project using electron react boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
Everything works, but I decided to add antd (ant design)
yarn add antd
Then I import the antd styles
index.tsx
...
import "./styles/global.css";
import "./styles/fonts.css";
import "antd/dist/antd.css"
...
Next I used a button of type primary
some_component.tsx
import React from "react";
import s from './someComponent.module.scss'
import { Button } from "antd";
export const SomeComponent: React.FC = () => {
return <div className={s.root}>
<Button type={'primary'}> button text </Button>
</div>
}
But the style of the button remains the same (with standard styles)
I tried importing the component styles directly into my global.css, also tried adding to the component style, but that didn't change anything
#import "~antd/dist/antd.css";
I have looked into the following repository where it works, however I didn’t figure out how to add it to my project. I don't want to use this repository as it works crookedly and doesn't use typescript
Thanks!
you can add this import in App.global.css or create new one custom.global.scss
copy this line
#import '~antd/dist/antd.css';
then import this scss into your App.tsx
import './custom.global.scss';
This should work
I am creating React web page using Material UI. For using any element I need to import that element.
So I want know how to import whole Material UI library.
As we import required components in particular component so same we have to follow when we import material-ui. Hence in individual component we have to add import statement with particular components as::
import { Button } from '#material-ui/core';
or if multiple components then we can use comma separated import as
import { Button, Text } from '#material-ui/core';
Try this
import { Button, TextField } from '#material-ui/core';
in this article, https://material-ui.com/guides/minimizing-bundle-size/
To import material ui library as a whole with every single feature, you need to install multiple dependencies and import all of them.
First Import
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
The font cdn link used by material UI is
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
The icons of the material UI cdn link is
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
The svg icons in material UI
// with npm
npm install #material-ui/icons
// with yarn
yarn add #material-ui/icons
I have installed react-bootstrap with:
npm install react-bootstrap bootstrap
command, and successfully imported it:
import Carousel from 'react-bootstrap/Carousel'
<Carousel>
...
</Carousel>
but it's styles didn't applied!
What I need to do to use it correctly?
React-Bootstrap doesn't come with bootstrap CSS automatically - it only produces the corresponding div elements with classes.
If you're using css modules, import the bootstrap css in index.js:
import "bootstrap/dist/css/bootstrap.min.css";
If you're using normal HTML, include bootstrap.min.css in your html file somehow.
I'm trying to get my hands on writing my first component using bootstrap 4.
import React,{Component} from 'react';
import {Button} from 'react-bootstrap-4';
class TextField extends Component {
constructor(props){
super(props);
}
render() {
return (
<Button bsStyle="primary" bsSize="large">Default</Button>
);
}
}
export default TextField;
In my index.js I call it as follows:
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import TextField from './components/custom/text_field';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
Helo World1
<br/>
<TextField id="test" />
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('.container'));
When I run the app I don't get any errors but the button is not looking like its suppose to
Am I missing something?
You're responsible for including Bootstrap's CSS yourself with react-bootstrap, which react-bootstrap-4 is a (temporary) fork of.
As per its Getting Started guide:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide.
You would need to do the equivalent for Bootstrap 4.
by including Bootstrap 4 via CDN as above you only get css and any JS dependent component will not work. I've been facing this problems with React on Meteor.js.
What I did was to npm install:
"bootstrap": "^4.0.0-alpha.6",
"tether": "^1.4.0" // Tether is required by bootstrap.js
Import the css through the main js file:
import 'bootstrap/dist/css/bootstrap.css'
The only way I got full Bootstrap with JS was to grab a copy of bootstrap.js into my libs folder (any front end folder), modify it to import Tether at the top:
import tether from 'tether'
global.Tether = tether
For some reasons I couldn't find another way to resolve the Tether dependency.
Meteor does its own minification so I was not really bothered with the .min.js, however, you cannot import tether into a minified bootstrap.js.
Like many others I am waiting for a more "final" release of bootstrap 4 and possibly a simple npm i bootstrap --save procedure.