با توجه به اینکه React یک سیستم متشکل از کامپوننت‌های کوچک و بزرگ است و از JSX جهت کدنویسی استفاده میکند و یک قالب HTML، متشکل از تمام عناصر به صورت درهم ریخته میباشد و بخش‌های مختلفی دارد، امکان استفاده‌ی مستقیم از قالب HTML در آن وجود ندارد و باید با فرمت React همخوانی داشته باشد. من در اینجا از قالب رایگان و راستچین شده AdminLTE که بر پایه بوت استرپ 4 میباشد استفاده کرده‌ام.
همانطور که میدانید React پوشه‌ای را به نام public، مهیا کرده‌است که برای استفاده‌ی عمومی از فایل‌های استاتیک ایجاد شده‌است. پس ابتدا فایل‌های js,css، تصاویر و دیگر فایل‌های استاتیک را به پوشه‌ی public منتقل میکنیم. سپس فایل index قالب را باز کرده و به تگ header فایل مراجعه کنید. تگ‌های لینک‌های معرفی فایل‌های css و script ای را که در آن تعریف شده‌اند، کپی کرده به هدر فایل index.html که در پوشه‌ی public قرار دارد، منتقل کنید. همچنین از فایل‌های اسکرپیت دیگر که در پایین تگ Body قرار گرفته‌اند، غافل نگردید.
در اینجا باید بخش‌های اساسی قالب، همانند navbar و sidebar را به صورت کامپوننت ایجاد کنیم.
پس ابتدا یک کامپوننت NavBar.jsx را ایجاد کرده و کدهای همین قسمت را در متد render قرار میدهیم:
import React, { Component } from "react";
class NavBar extends Component {
state = {};
render() {
return (
<React.Fragment>
<nav>
<!-- Left navbar links -->
<ul>
<li>
<a data-widget="pushmenu" href="#"><i></i></a>
</li>
<li>
<a href="index3.html">خانه</a>
</li>
<li>
<a href="#">تماس</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form>
<div>
<input type="search" placeholder="جستجو" aria-label="Search">
<div>
<button type="submit">
<i></i>
</button>
</div>
</div>
</form>
...
</nav>
</React.Fragment>
);
}
}
export default NavBar; - تمامی کامنت‌های موجود در فایل را حذف کنید.
- تمام تگ‌ها که شامل خصوصیت class هستند را با استفاده از ابزار جستجو، یافته و با عبارت className جایگزین کنید.
- در صورتیکه روی تگ‌ها از خصوصیت style استفاده کرده‌اید، به شکل زیر ویرایش کرده و قالب jsx را روی آن پیاده کنید.
style="opacity:0.8;"
style={{ opacity: "0.8" }} - در صورتیکه از تگ‌های img و یا input استفاده میکنید، حتما باید انتها تگ‌ها به شکل زیر بسته شده باشند:
<input type="search" placeholder="جستجو" aria-label="Search">
<input
className="form-control form-control-navbar"
type="search"
placeholder="جستجو"
aria-label="Search"
/> import React, { Component } from "react";
class NavBar extends Component {
state = {};
render() {
return (
<React.Fragment>
<nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" data-widget="pushmenu" href="#">
<i className="fa fa-bars"></i>
</a>
</li>
<li className="nav-item d-none d-sm-inline-block">
<a href="index3.html" className="nav-link">
خانه
</a>
</li>
<li className="nav-item d-none d-sm-inline-block">
<a href="#" className="nav-link">
تماس
</a>
</li>
</ul>
<form className="form-inline ml-3">
<div className="input-group input-group-sm">
<input
className="form-control form-control-navbar"
type="search"
placeholder="جستجو"
aria-label="Search"
/>
<div className="input-group-append">
<button className="btn btn-navbar" type="submit">
<i className="fa fa-search"></i>
</button>
</div>
</div>
</form>
...
</nav>
</React.Fragment>
);
}
}
export default NavBar; return (
<React.Fragment>
<NavBar />
<SideBar />
<div className="content-wrapper" style={{ marginTop: "20px" }}>
<DomainList />
</div>
<Footer />
</React.Fragment>
)