Home-theater-designers
ReactJS を初めて使用する場合、フロントエンド インターフェイスの作成は難しい場合があります。 Bootstrap フレームワークとそのテンプレートにより、作業がより簡単かつ迅速になります。
Bootstrap には、誰でも無料でカスタマイズして公開できるテーマ テンプレートがあります。ダウンロードしてアプリで使用する前に、多くのテンプレートから選択できます。
テンプレートを使用すると、優れたフロントエンド インターフェイスをすばやく作成できるため、複雑な機能により多くの時間を割くことができます。 Bootstrap テンプレートについては、ReactJS アプリと統合することで学習できます。
React アプリを作成する
で開始 ReactJS アプリの作成 マシンのフォルダーにあります。または、公式に従うこともできます 反応ガイド 新しいアプリの作成について。
ブートストラップ テンプレートをダウンロードする
からお好きなテンプレートをダウンロードしてください。 ブートストラップを開始 テーマの Web サイトまたはお好みの別の Web サイト。無料の Bootstrap テンプレートをオンラインで提供しているサイトがいくつかあります。
このガイドでは、Agency という名前の Bootstrap テーマをダウンロードしてください。
ダウンロードしたら、フォルダ ファイルを解凍して、その内容を確認します。 assets、CSS、JS という名前のフォルダーと、index.html という名前のファイルがあることに気付くでしょう。
Bootstrap テンプレートを ReactJS アプリに追加する
次に、ダウンロードしたフォルダーの内容を次の名前のフォルダーにコピーします。 公共 React アプリで。 2 つの index.html ファイルがあることに気付くでしょう。ブートストラップの内容をコピーする index.html ファイルを React アプリの index.html ファイル。
ネットワークパスワードウィンドウを変更する方法10
ブートストラップ テンプレートの表示
Bootstrap HTML をアプリの index.html に追加した後、アプリを実行して、統合が成功したかどうかを確認します。次のコマンドを使用します。
npm start次の図に示すように、ブラウザーにテンプレートが表示されます。
Bootstrap テーマをアプリ コンポーネントに統合する
Bootstrap テンプレートを React アプリに統合するには、HTML セクションを index.html から各コンポーネントにコピーする必要があります。コンポーネントを使用すると、アプリのさまざまな部分のコードを記述して再利用できます。これにより、繰り返しが減り、アプリの構造も整理されます。
index.html ファイルには、Navigation、About us、Contact、および Footer という異なるセクションが含まれるようになりました。 src フォルダーに、2 つのフォルダー、コンポーネント、およびページを作成します。セクションを以下に示すフォルダーに分割します。
コンポーネントには、次のものが含まれている必要があります。
- Header.jsx: マストヘッド セクション。
- Navigation.jsx: ナビゲーション バーとフッター。
ページのフォルダーには次のものが含まれます。
- AboutUs.jsx: 私たちについての情報。
- Home.jsx: サービス、ポートフォリオ、クライアント、およびチームのセクション。
- Contacts.jsx: 連絡先情報。
index.html ファイルから各セクションの HTML をコピーし、各コンポーネントに追加します。構文は次のようになります。
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
次に、コンポーネント内の HTML の構文を JSX に変更します。 Vscode エディターでこれを自動的に行うには、 Ctrl + Shift + P. ポップアップ ウィンドウで [HTML to JSX] オプションをクリックして、HTML を JSX に変更します。
JSX は JavaScript の構文拡張です。 HTML と JavaScript を組み合わせて使用して、コンポーネントにコードを記述できます。すべてのセクションをコンポーネントにコピーすると、index.html ファイルにはスタイリング リンクとスクリプトのみが残ります。
次のようになります。
<!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>
コンポーネントのルートを作成する
アプリにリンク、スクリプト、およびコンポーネントを配置したので、App.js ファイルでそれらのルートを作成する必要があります。ルートはアプリのページをレンダリングして動的にします。
WindowsでiMessageを使用する方法
ページをレンダリングするには、次のコマンドで react-router-dom をインストールします。
npm install react-router-dom の中に App.js ファイルから、BrowserRouter を Router、Routes、および Route としてインポートします。 react-router-dom ライブラリ .次に、すべてをインポートします コンポーネント と ページ .ファイルは次のようになります。
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;
ブラウザーをナビゲートすると、レンダリングされたページがローカル ホストに表示されます。以下に示すように、ダウンロードしたテンプレートに似ています。
おめでとうございます。Bootstrap テーマが React アプリに正常に統合されました。ページを好みに合わせてカスタマイズできるようになりました。
Bootstrap のテーマ テンプレートを使用する理由
ブートストラップ テンプレートは、非常に短時間で優れたフロントエンド インターフェイスを作成するのに役立ちます。選択できるテーマはたくさんあります。すべてのテーマは、最新の Bootstrap バージョンのものです。また、MIT ライセンスが付属しており、最新の業界設計です。
利点はたくさんありますが、テンプレートに頼ると創造性が低下します。他のサイトで使用されている人気のあるテーマをオンラインで見つけるのはよくあることです。ただし、テンプレートを独自のデザインにカスタマイズできます。
Bootstrap テンプレートを React アプリに統合できるようになりました。 Bootstrap テンプレートを使用して構築を開始し、美しいフロントエンド インターフェイスをお楽しみください。