Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Como importar jQuery e Bootstrap ?

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp

por Edson Martins
| 165.6k xp | 21 posts
Developer

Qual a melhor forma de importar o Bootstrap e jQuery em um project React?

Nos exemplos com purecss foi feito o import da seguinte forma:

import './css/pure-min.css';
import './css/side-menu.css';

Eu fiz da seguinte forma e obtive erro:

App.js

import React, { Component } from 'react';
import './js/jquery-1.12.2.min.js';
import './js/bootstrap.min.js';
import './css/bootstrap-theme.min.css';
import './css/bootstrap.min.css';
import './App.css';
./src/js/bootstrap.min.js
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 6:  'jQuery' is not defined  no-undef
  Line 7:  'jQuery' is not defined  no-undef
  Line 7:  'jQuery' is not defined  no-undef
  Line 7:  'jQuery' is not defined  no-undef

Este é o meu código:

https://github.com/eapmartins/toborrowlend-app/blob/master/src/App.js

Gostaria de adicionar o bootstrap.min.js e jquery-1.12.2.min.js para utilizar alguns componentes.

Abraços,

Edson Martins

5 respostas
por Edson Martins
| 165.6k xp | 21 posts
Developer

Tentei instalando os pacotes e também não tive sucesso.

npm install jquery bootstrap

App.js

import React, { Component } from 'react';

import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import './App.css';

Passo receber a seguinte mensagem de erro:

Error: Bootstrap's JavaScript requires jQuery
solução!
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Acho que nao é uma boa ideia fazer isso. O React nao foi feito pra conversar com o jQuery.

Existem projetos especificos pra portar o Bootstrap pro React. Nunca usei, mas acho que vale testar:

https://react-bootstrap.github.io/

https://reactstrap.github.io/

por Edson Martins
| 165.6k xp | 21 posts
Developer

Obrigado Sérgio pela resposta, reescrevi usando essa lib e agora estou entendendo melhor a proposta do React para trabalhar com componentes. O código ficou muito mais claro agora, mas ainda vou separar em outros componentes.

Para mim não ficou claro quando você disse que " o React não foi feito para conversar com o jQuery". Nas aulas está sendo utilizado o jQuery, poderia explicar um pouco sobre isso e qual a boa prática?

Abraços,

Edson Martins

por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Hahaha nem sabia (não vi o curso).

Bom, o React manipula o DOM por si só, atraves do seu algoritmo, montando sua arvore de componentes etc. O jQuery manipula o DOM tbm; muito provavelmente os dois vão brigar.

Claro, isso usando jQuery com DOM (como o Bootstrap faz). Se usar só pra Ajax e outras coisas sem mexer no DOM, ai nao teria problema.

por Edson Martins
| 165.6k xp | 21 posts
Developer

Beleza. rs

No curso usa apenas para chamadas Ajax (até onde eu vi).

Valeu Sérgio!