Home-theater-designers
Tạo giao diện front-end có thể là một thách thức nếu bạn chưa quen với ReactJS. Khung Bootstrap, cùng với các mẫu của nó, giúp việc này trở nên dễ dàng và nhanh hơn.
Bootstrap có các mẫu theo chủ đề mà bất kỳ ai cũng có thể tùy chỉnh và xuất bản miễn phí. Bạn có thể chọn từ nhiều mẫu trước khi tải xuống và sử dụng chúng trong ứng dụng của mình.
cách khôi phục tài liệu word 2010 chưa được lưu
Các mẫu giúp bạn nhanh chóng tạo các giao diện ngoại vi đáng chú ý, giúp bạn có nhiều thời gian hơn để tập trung vào các tính năng phức tạp. Bạn có thể tìm hiểu về các mẫu Bootstrap bằng cách tích hợp một mẫu với Ứng dụng ReactJS.
Tạo ứng dụng React của bạn
bắt đầu bằng tạo ứng dụng ReactJS trong một thư mục trên máy của bạn. Ngoài ra, bạn có thể theo dõi chính thức hướng dẫn phản ứng khi tạo một ứng dụng mới.
Tải xuống mẫu Bootstrap
Tải xuống một mẫu bạn chọn từ Khởi động Bootstrap trang web chủ đề hoặc trang web khác theo sở thích của bạn. Có một số trang web có mẫu Bootstrap miễn phí trực tuyến.
Đối với hướng dẫn này, hãy tải xuống chủ đề Bootstrap có tên là Cơ quan.
Sau khi tải xuống, hãy giải nén tệp thư mục để xem nội dung của nó. Bạn sẽ nhận thấy rằng bạn có các thư mục có tên là nội dung, CSS, JS và một tệp có tên là index.html.
Thêm mẫu Bootstrap vào ứng dụng ReactJS
Tiếp theo, sao chép nội dung của thư mục đã tải xuống vào thư mục có tên công cộng trong ứng dụng React của bạn. Bạn sẽ nhận thấy rằng bây giờ bạn có hai tệp index.html. Sao chép nội dung của Bootstrap index.html tệp vào ứng dụng React index.html tập tin.
Hiển thị mẫu Bootstrap
Sau khi thêm HTML Bootstrap vào index.html của Ứng dụng, hãy chạy Ứng dụng để xem quá trình tích hợp có thành công hay không. Sử dụng lệnh sau:
npm startBạn sẽ thấy mẫu trong trình duyệt của mình, như minh họa trong hình dưới đây.
Tích hợp chủ đề Bootstrap vào các thành phần ứng dụng
Để tích hợp mẫu Bootstrap vào Ứng dụng React, bạn phải sao chép các phần HTML từ index.html sang từng thành phần. Các thành phần cho phép bạn viết mã cho các phần khác nhau của Ứng dụng và sử dụng lại chúng. Điều này làm giảm sự lặp lại và cũng tổ chức cấu trúc Ứng dụng của bạn.
Tệp index.html hiện có các phần khác nhau Điều hướng, Giới thiệu về chúng tôi, Liên hệ và Chân trang. Trong thư mục src, tạo hai thư mục, thành phần và trang. Chia các phần thành các thư mục hiển thị bên dưới:
Các thành phần nên bao gồm những điều sau đây:
- Header.jsx: Phần tiêu đề.
- Navigation.jsx: Thanh điều hướng và chân trang.
Thư mục của các trang sẽ có các mục sau:
tại sao máy tính xách tay của tôi rất ồn
- AboutUs.jsx: Thông tin về chúng tôi.
- Home.jsx: Các phần Dịch vụ, Danh mục đầu tư, Khách hàng và Nhóm.
- Contacts.jsx: Thông tin liên hệ.
Sao chép HTML của từng phần từ tệp index.html và thêm nó vào từng thành phần. Cú pháp sẽ giống như vậy:
import React from 'react'
const Header = () => {
return (
<div>
<header className="masthead">
<div className="container">
<div className="masthead-subheading">Welcome To Our Studio!</div>
<div className="masthead-heading text-uppercase">
It's Nice To Meet You
</div>
<a className="btn btn-primary btn-xl text-uppercase" href="#services">
Tell Me More
</a>
</div>
</header>
</div>
);
};
export default Header
Tiếp theo, thay đổi cú pháp của HTML trong các thành phần thành JSX. Để thực hiện việc này tự động trên trình chỉnh sửa Vscode, hãy nhấp vào Ctrl + Shift + P. Nhấp vào tùy chọn HTML to JSX trên cửa sổ bật lên để thay đổi HTML thành JSX.
JSX là một phần mở rộng cú pháp cho JavaScript. Nó cho phép bạn sử dụng hỗn hợp HTML và JavaScript để viết mã trong các thành phần. Sau khi bạn sao chép tất cả các phần vào các thành phần, tệp index.html chỉ còn lại các liên kết tạo kiểu và tập lệnh.
Nó sẽ giống như vậy:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="%PUBLIC_URL%/js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
Tạo các tuyến cho các thành phần
Bây giờ bạn đã có các liên kết, tập lệnh và thành phần trong Ứng dụng, bạn phải tạo tuyến đường cho chúng trong tệp App.js. Các tuyến sẽ hiển thị các trang trên Ứng dụng để làm cho nó trở nên năng động.
Để hiển thị các trang, hãy cài đặt react-router-dom bằng lệnh sau:
npm install react-router-dom bên trong App.js tệp, nhập BrowserRouter dưới dạng Bộ định tuyến, Tuyến đường và Tuyến đường từ thư viện Reac-router-dom . Sau đó nhập tất cả các các thành phần và trang . Các tập tin sẽ giống như vậy:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";
function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Contact/>
<Router>
<Navigation>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/about" element={<About />} />
<Route exact path="/contact" element={<Contact />} />
</Routes>
</Navigation>
</Router>
</div>
);
}
export default App;
Bạn sẽ thấy các trang được hiển thị trên máy chủ lưu trữ cục bộ khi điều hướng trình duyệt. Tương tự với mẫu mà bạn đã tải về, như hình minh họa bên dưới.
Xin chúc mừng, bạn đã tích hợp thành công chủ đề Bootstrap vào Ứng dụng React của mình. Bây giờ bạn có thể tùy chỉnh các trang theo sở thích của mình.
Tại sao nên sử dụng Mẫu theo chủ đề của Bootstrap?
Các mẫu Bootstrap giúp tạo các giao diện ngoại vi đáng chú ý trong một thời gian rất ngắn. Có rất nhiều chủ đề để lựa chọn. Tất cả các chủ đề là phiên bản Bootstrap mới nhất. Chúng cũng đi kèm với giấy phép MIT và là thiết kế công nghiệp mới nhất.
Mặc dù có rất nhiều lợi thế, nhưng việc dựa vào các mẫu sẽ làm giảm tính sáng tạo. Người ta thường tìm thấy một chủ đề phổ biến được sử dụng trên các trang web trực tuyến khác. Tuy nhiên, bạn có thể tùy chỉnh một mẫu thành một thiết kế độc đáo.
Giờ đây, bạn có thể tích hợp mẫu Bootstrap với Ứng dụng React của mình. Bắt đầu xây dựng với các mẫu Bootstrap và tận hưởng các giao diện mặt trước đẹp mắt.