Sono un principiante di reactjs, voglio includere bootstrap nella mia app react
Ho installato bootstrap da npm install bootstrap --save
Ora, voglio caricare bootstrap css e js nella mia app react.
Sto usando webpack.
webpack.config.js
var config = {
entry: './src/index',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
contentBase:'./src'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
module.exports = config;
Il mio problema è "come includere css e js di bootstrap nell'app reactjs da node_modules? " Come impostare il bootstrap da includere nella mia app react?
Se sei nuovo di React e usi il setup create-react-app cli. Quindi eseguire il seguente comando NPM per includere l'ultima versione di bootstrap.
npm install --save bootstrap
o
npm install --save [email protected]
Poi aggiungi la seguente dichiarazione di importazione al file index.js
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
o
import 'bootstrap/dist/css/bootstrap.min.css';
non dimenticare di usare className come attributo (react usa className come attributo invece di class)
Non è possibile utilizzare componenti Javascript basati su Bootstrap Jquery in un'app React, poiché tutto ciò che cerca di manipolare il DOM al di fuori di React è considerato una cattiva pratica. Qui puoi leggere maggiori informazioni a riguardo.
Raccomandato. Puoi includere i file CSS grezzi di Bootstrap come specificano le altre risposte.
Dai un'occhiata alla libreria react-bootstrap. È scritta esclusivamente per React.
Per Bootstrap 4 c'è reactstrap
In questi giorni generalmente evito le librerie Bootstrap che forniscono componenti pronti all'uso (i già citati react-bootstrap o reactstrap e così via). Poiché si diventa dipendenti dai puntelli che prendono (non si può aggiungere un comportamento personalizzato al loro interno) e si perde il controllo sul DOM che questi componenti producono.
Quindi o usi solo Bootstrap CSS o lasci perdere Bootstrap. Una regola generale è: se non sei sicuro di averne bisogno, non ne hai bisogno. Ho visto un sacco di applicazioni che includono Bootstrap, ma usando solo una piccola quantità di CSS di esso e a volte la maggior parte di questo CSS è sovrascritto da stili personalizzati.
Puoi semplicemente importare
il file css dove vuoi. Webpack si prenderà cura di fare il bundle dei css se hai configurato il caricatore come richiesto.
Qualcosa come,
import 'bootstrap/dist/css/bootstrap.css';
E la configurazione di webpack come,
loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }]
Nota: devi aggiungere anche i caricatori di font, altrimenti otterresti un errore.