Tại sao viết React có sử dụng bootstrap mà bị lỗi css?

#1

Em đang học React Js làm theo hướng dẫn, những boostrap của em có vấn đề nó vẫn chạy nhưng css của nó lại không có

image
image.jpg1920×1080 275 KB
mặc dù em đã cài thư viện
image
image.jpg1920×1080 275 KB
Làm thế nào để fix lại à.

import React, { Component } from 'react';
import './App.css';
import Product from './components/Product'
class App extends Component {

  onClick(){
    console.log('DAY LA APP COMPONENTS');

  }
  onClick2(text){
    console.log(text);

  }



  render() {
      var products = [ 
          {
            id: 1,
            name: "Apple Iphone 6 Plus 16GB",
            price: "5000000",
            image: 'https://cdn.tgdd.vn/Products/Images/42/92962/iphone-6-32gb-gold-hh-600x600-600x600-600x600.jpg',
            status: true
          },
          {
            id: 2,
            name: "Apple Iphone 7 Plus 16GB",
            price: "8900000",
            image: "data:image/jpeg;base64,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",
            status: true
          },
          {
            id: 3,
            name: "Apple Iphone 8 Plus 32GB",
            price: "5200000",
            image: "data:image/jpeg;base64,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",

            status: true
          },


      ];
      let elements = products.map((product, index) => { 
        let result = '';

        if( product.status) {
            result= 
                      <Product 

                          key={ product.id }
                          price={ product.price }
                          image={ product.image }
                      >
                          { product.name }

                      </Product>

           }
           return result;
      });




        return(
  <div>
         
          <nav className="navbar navbar-inverse">
               <div className="container-fluid">
                 <a className="navbar-brand">Props</a>

               </div>
           </nav>
           <div className="container">
              <div className="row">
                  <div className="row">
                    <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                   
                    
                      <div className="form-group">
                        <label for="">label</label>
                        <input type="text" className="form-control" />
                      </div>
                    
                      
                    
                      <button type="submit" className="btn btn-primary">Luu</button>
                
                    </div>
                    <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                       { elements  }
                     </div>
                  <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <button type="button" className="btn btn-warning" onClick={ this.onClick }>
                         Click me! 
                    </button>
                    <button type="button" className="btn btn-warning" onClick={ () => {this.onClick2('ABC')} }>
                         Click me 2 ! 
                    </button>
                    
                  </div>
                  
                </div>
              </div>
              
            </div> 
        </div>  

       );
  }
}

export default App;
#2

Vậy bạn làm thế nào mà gọi là “có sử dụng bootstrap”?

3 Likes
#3

Cài thư viện thì phải sài component của thư viện đấy như này chứ như bạn viết là đang sài bootstrap như code html rồi.

import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';

export default class Example extends React.Component {
  render() {
    return (
      <div>
        <p>List Based</p>
        <Nav vertical>
          <NavItem>
            <NavLink href="#">Link</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#">Link</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#">Another Link</NavLink>
          </NavItem>
          <NavItem>
            <NavLink disabled href="#">Disabled Link</NavLink>
          </NavItem>
        </Nav>
        <hr />
        <p>Link based</p>
        <Nav vertical>
          <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
        </Nav>
      </div>
    );
  }
}
5 Likes
#4

Có thể bạn thiếu import bootstrap vào file index.js rồi nhé.Adding Bootstrap

4 Likes
#5

em chưa nhúng boostrap vào file index.html hihi. thanks các anh ạ, em fix đc rồi

3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?