React: Complex Component với React Bootstrap- Day 4.1

Trong bài viết trước, mình có hướng dẫn sử dụng React Bootstrap để xây dựng Component.

Tham khảo:  React: Complex Componnet - Day 4

Vấn đề của Bootstrap

• DOM Manipulation: Bootstrap sử dụng DOM manipulation để thay đổi giao diện. Tuy nhiên, trong React, việc thay đổi trực tiếp DOM là không khuyến khích và có thể dẫn đến vấn đề hiệu năng và khó bảo trì.
• State Management: Bootstrap không cung cấp các công cụ state management tự động được tích hợp với React. Khi bạn sử dụng Bootstrap truyền thống với React, bạn phải tự quản lý trạng thái của các thành phần và đồng bộ hóa nó với các lớp CSS.
• JavaScript Dependencies: Bootstrap truyền thống yêu cầu sử dụng thư viện jQuery và các phiên bản Bootstrap mới hơn cũng yêu cầu Popper.js. Khi sử dụng với React, việc quản lý các phụ thuộc này có thể phức tạp và có thể gây ra xung đột với các thư viện React khác.

React Bootstrap là gì?

React Bootstrap là một phiên bản Bootstrap được tối ưu hóa cho việc sử dụng với React.

• Integrates with React
• Component-based Architecture: React Bootstrap cung cấp các thành phần React phong phú và dễ sử dụng. Bạn có thể sử dụng các thành phần này như các thành phần React thông thường, hỗ trợ việc sử dụng hook và quản lý trạng thái dễ dàng.
• No jQuery Dependency
  

Cài đặt

Install React Bootstrap

yarn add react-bootstrap bootstrap

Hoặc

npm install --save react-bootstrap bootstrap // npm

Nếu bạn không muốn import từng file bootstrap vào dự án, bạn khai báo react-bootstrap vào file index.html.

<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>

react-bootstrap.min.js là file JavaScript được sử dụng để tạo các thành phần UI trong React bằng Bootstrap

Thêm Bootstrap CSS vào file App.tsx (hoặc index.tsx)

import React from 'react';
import ReactDOM from 'react-dom';
//...
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS

Thêm mới component

import React from "react";

class BootstrapDemo extends React.Component{
    constructor(props: any){
        super(props);
    }

    render() {
        return(
            <>
            </>
        )
        
    }
}

export default BootstrapDemo

Thêm BootstrapDemo vào App.tsx

import BootstrapDemo from './components/BootstrapDemo'

//...

function App() {

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <BootstrapDemo />
      </div>
    </>
  )
}

Static Assets Handling

https://vitejs.dev/guide/assets.html

https://vitejs.dev/config/shared-options.html#publicdir

Tham khảo

React-Bootstrap: Xây dựng các thành phần đơn giản nhưng hiệu quả cho web

https://www.educative.io/blog/react-bootstrap-tutorial

https://devpress.csdn.net/react/62eca28019c509286f417715.html