Todos conocemos la popularidad de React y cómo esta biblioteca ha facilitado las tareas de desarrollo para los desarrolladores frontend. React es la biblioteca front-end más popular para construir la interfaz de usuario de la aplicación. Las industrias están reduciendo lentamente el uso de las bibliotecas jQuery y DOM para crear su aplicación.
Cuando se trata de crear una aplicación receptiva, los marcos CSS son útiles en el mercado. Si trabaja como desarrollador front-end, entonces los marcos de trabajo Bootstrap, Foundation y Bulma no son nuevos para usted. La mayoría de las industrias utilizan el marco Bootstrap. Millones de sitios web se ejecutan en bootstrap.
Aquí en este blog, vamos a discutir cómo usar React y Bootstrap, cómo agregar bootstrap a la aplicación React. Cómo instalar el paquete de arranque de React y cómo usarlo en la aplicación React. Comencemos con eso…
Método para agregar Bootstrap para reaccionar
Hay principalmente tres formas de agregar Bootstrap a la aplicación React. Los discutiremos uno por uno.
- Usando Bootstrap CDN.
- Importar Bootstrap en React como una dependencia
- Instale el paquete React Bootstrap (como bootstrap-react o reactstrap).
1. Usando Bootstrap CDN
Esta es una de las formas más fáciles de usar bootstrap en su aplicación React. Lo mejor de Bootstrap CDN es que no requiere instalación ni descargas. Solo necesita copiar y pegar un enlace en la sección principal de su aplicación para que funcione. A continuación se muestra el enlace que usted necesita.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
En caso de que su aplicación necesite componentes de JavaScript junto con el arranque, en la parte inferior de la página coloque la etiqueta <script>, justo antes de la etiqueta de cierre </body>.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
Estos fragmentos se agregarán a la página public/index.html.
2. Importar Bootstrap como dependencia
Es posible que haya utilizado algún paquete de módulos o paquete web en su aplicación o que haya escuchado estos nombres. Esta es otra opción para agregar bootstrap a su aplicación React. Puede ejecutar el comando que se proporciona a continuación e instalar bootstrap como una dependencia en su aplicación.
npm install bootstrap
Después de la instalación, agregue esto en el archivo JavaScript de la entrada de su aplicación. A continuación se muestra el archivo index.js dentro de la carpeta src.
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
En el código anterior en la línea superior, hemos importado CSS minimizado de Bootstrap como la primera dependencia. Con esto, podemos usar clases Bootstrap en nuestros componentes React. También necesita instalar jQuery y popper.js junto con esto. A continuación se muestra el comando para instalar ambos.
npm install jquery popper.js
Realice los cambios siguientes en el archivo index.js para agregar nuevas dependencias.
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();
3. Instale el paquete React Bootstrap
El otro método para agregar bootstrap en su componente React es agregar un paquete con el componente bootstrap incorporado. Estos están diseñados para funcionar con los componentes de su aplicación React. A continuación se muestra el nombre de dos paquetes populares.
Ambas son buenas opciones para usar Bootstrap con aplicaciones React.
Crear aplicación React con Bootstrap
Use el comando que se proporciona a continuación para crear una aplicación React en su máquina.
create-react-app my-app
Ahora, ejecute el comando que se proporciona a continuación para instalar las dependencias como se indica a continuación.
yarn add axios bootstrap reactstrap
Aquí hemos instalado Axiosas, una dependencia que es una biblioteca de JavaScript utilizada para realizar la solicitud HTTP desde node.js o XMLHttpRequests desde el navegador. Axios le permite obtener publicaciones de la API JSON de BaconIpsum .
Ahora para usar este archivo CSS minimizado de Bootstrap. necesita hacer algunas modificaciones en el archivo src/index.js para incluirlo. Se verá como se indica a continuación…
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Ahora cree un componente de carpeta en el directorio src de su proyecto. Cree un nuevo archivo Header.js, en él y escriba el código que se indica a continuación.
import React from 'react';
import logo from '../logo.svg';
import {
Container, Row, Col, Form, Input, Button, Navbar, Nav,
NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';
const AVATAR = 'https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg';
const Header = () => (
<header>
<Navbar fixed="top" color="light" light expand="xs" className="border-bottom border-gray bg-white" style={{ height: 80 }}>
<Container>
<Row noGutters className="position-relative w-100 align-items-center">
<Col className="d-none d-lg-flex justify-content-start">
<Nav className="mrx-auto" navbar>
<NavItem className="d-flex align-items-center">
<NavLink className="font-weight-bold" href="/">
<img src={AVATAR} alt="avatar" className="img-fluid rounded-circle" style={{ width: 36 }} />
</NavLink>
</NavItem>
<NavItem className="d-flex align-items-center">
<NavLink className="font-weight-bold" href="/">Home</NavLink>
</NavItem>
<NavItem className="d-flex align-items-center">
<NavLink className="font-weight-bold" href="/">Electronics</NavLink>
</NavItem>
<UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
<DropdownToggle className="font-weight-bold" nav caret>fashion</DropdownToggle>
<DropdownMenu right>
<DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
<DropdownItem divider />
<DropdownItem>Men</DropdownItem>
<DropdownItem>Women</DropdownItem>
<DropdownItem>Baby and Kids</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Col>
<Col className="d-flex justify-content-xs-start justify-content-lg-center">
<NavbarBrand className="d-inline-block p-0" href="/" style={{ width: 80 }}>
<img src={logo} alt="logo" className="position-relative img-fluid" />
</NavbarBrand>
</Col>
<Col className="d-none d-lg-flex justify-content-end">
<Form inline>
<Input type="search" className="mr-3" placeholder="Search React Courses" />
<Button type="submit" color="info" outline>Search</Button>
</Form>
</Col>
</Row>
</Container>
</Navbar>
</header>
);
export default Header;
En el código anterior, hemos incluido el menú de navegación. Ahora vamos a crear un archivo LeftCard.js en el directorio del componente con el siguiente contenido:
import React, { Fragment } from 'react';
import {
Button, UncontrolledAlert, Card, CardImg, CardBody,
CardTitle, CardSubtitle, CardText
} from 'reactstrap';
const BANNER = 'https://i.imgur.com/CaKdFMq.jpg';
const LeftCard = () => (
<Fragment>
<UncontrolledAlert color="danger" className="d-none d-lg-block">
<strong>Account not activated.</strong>
</UncontrolledAlert>
<Card>
<CardImg top width="100%" src={BANNER} alt="banner" />
<CardBody>
<CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">Lorem Ipsum</CardTitle>
<CardSubtitle className="text-secondary mb-3 font-weight-light text-uppercase" style={{ fontSize: '0.8rem' }}>Lorem Ipsum, Lagos</CardSubtitle>
<CardText className="text-secondary mb-4" style={{ fontSize: '0.75rem' }}>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book</CardText>
<Button color="success" className="font-weight-bold">Lorem Ipsum</Button>
</CardBody>
</Card>
</Fragment>
);
export default LeftCard;
Ahora cree un archivo Post.js en el directorio de componentes y agregue los fragmentos que se indican a continuación…
import React, { Component, Fragment } from 'react';
import axios from 'axios';
import { Badge } from 'reactstrap';
class Post extends Component {
state = { post: null }
componentDidMount() {
axios.get('https://baconipsum.com/api/?type=meat-and-filler¶s=4&format=text')
.then(response => this.setState({ post: response.data }));
}
render() {
return (
<Fragment>
{ this.state.post && <div className="position-relative">
<span className="d-block pb-2 mb-0 h6 text-uppercase text-info font-weight-bold">
Editor's Pick
<Badge pill color="success" className="text-uppercase px-2 py-1 ml-3 mb-1 align-middle" style={{ fontSize: '0.75rem' }}>New</Badge>
</span>
<span className="d-block pb-4 h2 text-dark border-bottom border-gray">React Tutorial</span>
<article className="pt-5 text-secondary text-justify" style={{ fontSize: '0.9rem', whiteSpace: 'pre-line' }}>{this.state.post}</article>
</div> }
</Fragment>
);
}
}
export default Post;
El fragmento anterior representa las publicaciones en la página. En el código anterior, el estado de la publicación se inicializará en nulo. Cuando la página de React se renderice y el componente se monte, buscamos los cuatro párrafos de la API JSON de BaconIpsum usando Axios. Después de ese estado, se cambiará la propiedad de la publicación.
Realice la modificación final en el archivo src/App.js que se muestra a continuación…
import React, { Fragment } from 'react';
import axios from 'axios';
import { Container, Row, Col } from 'reactstrap';
import Post from './components/Post';
import Header from './components/Header';
import LeftCard from './components/LeftCard';
const App = () => (
<Fragment>
<Header />
<main className="my-5 py-5">
<Container className="px-0">
<Row noGutters className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative">
<Col xs={{ order: 2 }} md={{ size: 4, order: 1 }} tag="aside" className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0">
<SideCard />
</Col>
<Col xs={{ order: 1 }} md={{ size: 7, offset: 1 }} tag="section" className="py-5 mb-5 py-md-0 mb-md-0">
<Post />
</Col>
</Row>
</Container>
</main>
</Fragment>
);
export default App;
Conclusión
Así que hemos discutido varias formas de incluir bootstrap en la aplicación React. También hemos discutido el uso de la biblioteca react-bootstrap. Alerta, insignia, barra de navegación, menú desplegable, botón, tarjeta, navegación, formulario, etc. son los componentes comunes de la biblioteca de arranque en React que usará con frecuencia. Otros componentes útiles son tablas, modales, información sobre herramientas, carrusel, jumbotron, paginación, pestañas, etc. React bootstrap es muy útil para proporcionar el diseño y la interfaz de usuario de su sitio web. Una vez que comience a usarlo, conocerá los usos de sus componentes.
Publicación traducida automáticamente
Artículo escrito por anuupadhyay y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA