a crescente popularidade de aplicações de uma única página ao longo dos últimos anos levou a um influxo de frameworks JavaScript, incluindo Angular, React, Vue.js, Ember, a lista continua. Como resultado, não é mais necessário usar uma biblioteca DOM, como a jQuery, para construir aplicativos web.
isto coincidiu com o surgimento de frameworks CSS projetados para ajudar os desenvolvedores a construir aplicativos Web Responsivos., Se você é um desenvolvedor frontend, você quase certamente usou ou pelo menos ouviu falar sobre Bootstrap, Foundation e Bulma, todos os frameworks CSS responsivos (mobile-first) com recursos robustos e utilitários incorporados. Se React é o framework JavaScript mais usado para construir aplicações web, Bootstrap é o framework CSS mais popular, alimentando milhões de sites na internet.,
neste tutorial, vamos mostrar-lhe como usar Reagir e Bootstrap, como adicionar Bootstrap para Reagir aplicativo, como instalar Reagir de Inicialização de pacotes como o react-bootstrap (com exemplos), e, finalmente, como criar um Reagir aplicativo com Bootstrap.se você está apenas começando com estes frameworks, eu sugeriria folhear a documentação oficial Reat e Bootstrap. Eu também encorajaria você a assistir o vídeo tutorial abrangente abaixo para um mergulho mais profundo.,
Adicionar iniciador para Reagir
As três maneiras mais comuns para adicionar Bootstrap para a sua Reagir app são:
- Use BootstrapCDN
- Importar Bootstrap em Reagir como uma dependência
- Instalar um Reage de Inicialização de pacotes (como
bootstrap-reactoureactstrap)
Usando BootstrapCDN
BootstrapCDN é a maneira mais fácil de adicionar Bootstrap para a sua Reagir app. Não são necessárias instalações ou transferências. Simply put a <link> into the <head> section of your app, as shown in the following snippet.,
Se estiver interessado em usar os componentes de JavaScript que enviam com Bootstrap, terá de colocar as seguintes etiquetas <script> perto do fim das suas páginas, imediatamente antes do fecho </body> tag, para as activar.
Como você pode ver, Bootstrap 4 requer jQuery e Popper.js para os seus componentes JavaScript. No trecho acima, usamos a versão slim da jQuery, embora você possa usar a versão completa também.
para a sua aplicação React, estes excertos de código serão normalmente adicionados à página de índice da sua aplicação., Se usou o create-react-app para criar a sua aplicação, então o seu public/index.html page deverá parecer o seguinte excerto:
agora pode começar a usar as classes de Bootstrap e componentes de JavaScript nos seus componentes Reat.
importar o Bootstrap como uma dependência
Se estiver a usar uma ferramenta de compilação ou um pacote de módulos como o webpack, então esta é a opção preferida para adicionar o Bootstrap à sua aplicação React. Terá de instalar o Bootstrap como uma dependência do seu aplicativo.,
npm install bootstrap
ou se estiver a utilizar fios:
yarn add bootstrap
Uma vez que tenha o Bootstrap instalado, vá em frente e inclua-o no ficheiro JavaScript de entrada da sua aplicação. Se estiver habituado a create-react-app, este deve ser o seu src/index.js ficheiro.
Notice that we have imported the Bootstrap minified CSS as the first dependency. Com isso, podemos ir em frente usando as classes de Bootstrap built-in em nossos componentes Reat app., No entanto, antes de poder usar os componentes JavaScript do Bootstrap na sua aplicação, terá de instalar jquery e popper.js se ainda não estiverem instalados.
npm install jquery popper.js
a seguir, fará alterações adicionais ao src/index.js ficheiro para adicionar as novas dependências, como mostrado no seguinte excerto.
aqui adicionamos as importações para $ePopper. Nós também importamos o arquivo de pacote de JavaScript de Bootstrap minified. Agora você pode usar componentes de JavaScript Bootstrap em sua aplicação Reat.,
instale um pacote React Bootstrap
a terceira forma de adicionar Bootstrap a uma aplicação React é usar um pacote que reconstruiu componentes Bootstrap concebidos para funcionar como componentes React. Os dois pacotes mais populares são:
react-bootstrapreactstrap
Ambos os pacotes são ótimas opções para usar o Bootstrap com Reagem apps embora não necessariamente obrigados a usá-los. Eles compartilham características muito semelhantes.,
usando classes e componentes de Bootstrap incorporados
pode usar o Bootstrap directamente nos elementos e Componentes da sua aplicação React, aplicando as classes incorporadas tal como qualquer outra classe. Vamos construir um componente Reat switcher de tema simples para demonstrar usando classes e componentes de Bootstrap.,
Como mostrado nesta versão de demonstração, estamos usando uma lista suspensa de componente disponível no Bootstrap para implementar o nosso tema switcher. Também usamos as classes de botões embutidos para definir o tamanho e a cor do botão.
vamos em frente para escrever o código para o nosso componente ThemeSwitcher. Certifique-se de que tem uma aplicação React já configurada., Criar um novo arquivo para o componente e adicione o seguinte trecho de código para isso:
Aqui temos construído um tema muito simples switcher componente aproveitando Bootstrap suspensa componente e um par de classes internas. Você pode aprender mais sobre o uso de Bootstrap dropdown aqui.
primeiramente, nós configuramos o estado do componente com um id
propriedade e inicializamos paranull., Em seguida, definimos dois click manipuladores de eventosresetTheme()echooseTheme()na classe de componentes para escolher um tema e redefinir o tema, respectivamente.
no método render(), rendemos um menu dividido com três temas. a saber: Primary Danger e Success. Cada item de menu é anexado a um manipulador de eventos para a ação apropriada. Observe como usamos theme.toLowerCase() para obter a classe de cor do tema tanto para os botões de largada como para o texto., Nós padrão para usar secondary como a cor do tema Se nenhum tema está definido.
neste exemplo, vimos como é fácil usar as classes e componentes do Bootstrap na nossa aplicação React. Verifique a documentação do Bootstrap para saber mais sobre as classes e componentes incorporados.
react-bootstrap example
Now, we will rebuild our theme switcher using react-bootstrap. Usaremos a ferramenta create-react-app linha de comandos para criar o nosso aplicativo. Certifique-se de que tem a ferramenta create-react-app instalada na sua máquina.,
Criar um novo Reagir aplicativo usando create-react-app da seguinte forma:
create-react-app react-bootstrap-app
em seguida, vá em frente e instale as dependências da seguinte forma:
yarn add bootstrap@3 react-bootstrap
react-bootstrap atualmente metas Bootstrap v3. No entanto, está em curso um trabalho activo para fornecer suporte de Bootstrap v4.
crie um novo ficheiro chamado ThemeSwitcher.jsnosrc directório do seu projecto e coloque o seguinte conteúdo nele.
Aqui nós tentamos imitar o nosso exemplo inicial tanto quanto possível usando react-bootstrap., Importamos dois componentes do pacote react-bootstrap, nomeadamente SplitButton e MenuItem. Veja a documentação react-bootstrap Dropdown para saber mais.
primeiramente, nós configuramos o estado do componente com um id
propriedade e inicializamos paranull. Em seguida, definimos umchooseTheme()carregue em manipulador de eventos para escolher um tema ou redefinir o tema.
desde que estamos usando Bootstrap 3.3.,7, criamos alguns estilos de contêineres no método render() para nos ajudar a alcançar o centro horizontal e vertical.
Notice how we specify the button size on the SplitButton component using thebsSize prop. Além disso, observe como estamos passando o themeClass para o bsStyle prop para alterar dinamicamente a cor do botão com base no tema do estado.
passamos o nome do tema para o componente eventKey prop de cada componente MenuItem , Também definimos oonSelect handler parathis.chooseTheme(), que definimos anteriormente. MenuItem componente passa o eventKey e o event próprio para o onSelect manipulador da seguinte forma:
(eventKey: any, event: Object) => any
Finalmente, vamos modificar o src/index.js arquivo para olhar como o trecho a seguir:
Aqui, temos a primeira importação de Bootstrap minified arquivos CSS. Nós também importamos nosso componente ThemeSwitcher e rendê-lo ao DOM.,se executar a aplicação agora com o comando yarn start ou npm start. Seu aplicativo deve iniciar na porta 3000 e deve assemelhar-se a seguinte demonstração:
react-bootstrap demonstração. reactstrap exemplo
Vamos ir em frente e reconstruir o nosso tema switcher usando reactstrap neste momento., Usaremos a ferramenta create-react-app linha de comandos para criar o nosso aplicativo. Certifique-se de que tem a ferramenta create-react-app instalada na sua máquina.
Criar um novo Reagir aplicativo usando create-react-app da seguinte forma:
create-react-app reactstrap-app
em seguida, vá em frente e instale as dependências da seguinte forma:
yarn add bootstrap reactstra
Crie um novo arquivo chamado ThemeSwitcher.js src diretório do seu projeto e colocar o seguinte conteúdo nele:
Aqui temos reconstruído nosso exemplo inicial, usando o reactstrap., Importamos alguns componentes de reactstrap. Veja a documentação do botão reactstrap para saber mais.
Primeiro, podemos configurar o estado do componente com duas propriedades:
-
themepropriedade inicializada comnull -
dropdownOpeninicializada comfalse. Esta propriedade será usada noButtonDropdowncomponente dereactstrappara manter o estado de comutação da lista.,
também definimos um método toggleDropdown() para comutar o estado aberto da lista. Isto também será usado no componente ButtonDropdown.reactstrap também fornece uma descontrolada componente UncontrolledButtonDropdown que não exige o isOpen prop ou toggle processador de prop para o trabalho. Na maioria dos casos, isso pode ser usado em vez de usar ButtonDropdown.
cada item do menu é representado usando o componente
., Notice how we specify the button size on theDropdownTogglecomponent using thesizeprop. Também observe como estamos passando othemeClasscolorprop tanto oButtoneDropdownTogglecomponentes para alterar dinamicamente o botão de cor de acordo com o estado do tema.
também onClick processador em cada DropdownItem assim como fizemos antes, usando o chooseTheme() e resetTheme() manipuladores de nós definidos anteriormente.,
finalmente, iremos modificar o id
ficheiro para se parecer com o seguinte excerto:
aqui, primeiro importamos o ficheiro CSS minificado do Bootstrap. Nós também importamos nosso componente ThemeSwitcher e rendê-lo ao DOM.se executar a aplicação agora com o comando yarn start ou npm start., Seu aplicativo deve iniciar na porta 3000 e deve assemelhar-se a seguinte demonstração:
Criar um Reagir aplicativo com Bootstrap
Vamos empurrar um pouco mais para criar um app com mais alguns detalhes. Vamos tentar usar o máximo de classes e componentes Bootstrap possível. Usaremos também reactstrap para integrar Bootstrap com React, uma vez que suporta Bootstrap 4.,
usaremos a ferramenta de linha de comando create-react-app para criar o nosso aplicativo. Certifique-se de que tem a ferramenta create-react-app instalada na sua máquina. Aqui está uma imagem do que estaremos criando.,
Criar um novo Reagir aplicativo usando create-react-app da seguinte forma:
create-react-app sample-app
em seguida, vá em frente e instale as dependências da seguinte forma:
yarn add axios bootstrap reactstrap
Observe-se aqui que vamos instalar o axios como uma dependência. Axios é um cliente HTTP baseado em promessas para o navegador e nó.js. Ele nos permitirá obter posts da API BaconIpsum JSON.,
fazer uma pequena modificação para o src/index.js ficheiro para incluir o ficheiro CSS minificado de Bootstrap. Deve ser parecido com o seguinte excerto:
crie uma nova pasta chamada components na src directório do seu projecto. Criar um novo arquivo, Header.js, no recém-criado components diretório com o seguinte conteúdo:
O componente recém criado neste trecho é o Header componente que contém o menu de navegação., Em seguida, vamos criar um novo arquivo chamado SideCard.js components diretório com o seguinte conteúdo:
em seguida, crie um novo arquivo chamado Post.js components diretório e adicionar o seguinte trecho de código para isso:
Aqui nós criamos uma Post componente que compõe um post na página. Inicializamos o estado do componente com um post propriedade definida paranull., Quando o componente monta, usamos axiospara obter um post aleatório de quatro parágrafos da API BaconIpsum JSON e atualizar a propriedade post no estado.
Finalmente, modificar o src/App.js arquivo para olhar como o trecho a seguir:
Aqui nós basta incluir a tag Header SideCard e Post componentes de App componente. Observe como usamos um par de classes de utilitários responsivos fornecidos pelo Bootstrap para adaptar o nosso aplicativo a diferentes tamanhos de tela.,
Se executar a aplicação agora com o comando yarn startou npm start, a sua aplicação deverá começar no Porto 3000 e deverá ser exactamente igual à imagem que vimos anteriormente.
conclusão
neste tutorial, exploramos algumas maneiras diferentes em que podemos integrar o Bootstrap com os nossos aplicativos Reat. Também vimos como podemos usar duas das bibliotecas de Bootstrap React mais populares, nomeadamente react-bootstrape reactstrap.,
Nós só temos usado alguns componentes Bootstrap neste tutorial, tais como alerta, badge, dropdown, navbar, nav, form, button, card, etc. Ainda há um par de componentes Bootstrap que você pode experimentar, tais como tabelas, modais, dicas, Carrossel, jumbotron, paginação, tabs, etc.
pode verificar a documentação dos pacotes que usamos neste tutorial para descobrir mais formas de os utilizar. O código fonte para todos os aplicativos de demonstração neste tutorial pode ser encontrado no GitHub.,
visibilidade Total sobre a produção de Reagir aplicativos
Depuração de Reagir aplicações pode ser difícil, especialmente quando os usuários enfrentam problemas que são difíceis de reproduzir. Se você está interessado em monitorar e rastrear o estado de Redux, emergindo automaticamente erros de JavaScript, e rastreando pedidos de rede lentos e tempo de carga de componentes, tente LogRocket. 
LogRocket é como um DVR para aplicações web, gravação, literalmente, tudo o que acontece no seu Reagem app., Em vez de adivinhar por que os problemas acontecem, você pode agregar e relatar em que estado sua aplicação estava quando um problema ocorreu. LogRocket também monitora o desempenho do seu aplicativo, relatando com métricas como carga de CPU cliente, uso de memória do cliente, e muito mais.
O Pacote LogRocket Redux middleware adiciona uma camada extra de visibilidade às suas sessões de utilizador. LogRocket regista todas as acções e estado das suas lojas Redux. Modernize a forma como depura as suas aplicações React — inicie a monitorização gratuitamente.