نحوه نصب بوت استرپ در React JS یک راهنمای گام به گام.
![نحوه نصب بوت استرپ در React JS یک راهنمای گام به گام. 1 نحوه نصب بوت استرپ در React JS یک راهنمای گام به گام.](https://nabfollower.com/blog/wp-content/uploads/2024/07/نحوه-نصب-بوت-استرپ-در-React-JS-یک-راهنمای-گام-780x470.jpg)
Bootstrap **یک چارچوب قدرتمند و منبع باز ** فرانت اند است طراحی شده برای سادهسازی توسعه پروژههای وب پاسخگو و اولین موبایل. این برنامه که توسط توییتر توسعه داده شده است، مجموعه ای از اجزای HTML، CSS و جاوا اسکریپت از پیش طراحی شده را ارائه می دهد که ایجاد سریع رابط های تمیز و مدرن را برای توسعه دهندگان آسان تر می کند.
مرحله 1: یک React Application بسازید
اگر قبلاً یک برنامه React ندارید، می توانید با استفاده از Create React App ایجاد کنید. ترمینال خود را باز کنید و دستور زیر را اجرا کنید:
npx create-react-app myapp
cd myapp
مرحله 2: Bootstrap را نصب کنید
دو راه اصلی برای نصب بوت استرپ در پروژه React وجود دارد: استفاده از npm (مدیر بسته نود) یا گنجاندن آن از طریق CDN (شبکه تحویل محتوا). ما هر دو روش را پوشش خواهیم داد.
npm install bootstrap
مرحله 3: فایل CSS Bootstrap را در خود وارد کنید src/App.js
:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import 'bootstrap/dist/js/bootstrap.bundle.min'; // Import Bootstrap JS
const App = () => {
return (
);
};
export default App;
مرحله 4: از اجزای بوت استرپ در برنامه React خود استفاده کنید
اکنون که Bootstrap نصب شده است، می توانید از اجزای آن در برنامه React خود استفاده کنید. در اینجا مثالی از نحوه استفاده از دکمه بوت استرپ آورده شده است:
import React from 'react';
const Home= () => {
return (
);
};
export default Home;
مرحله 5: برنامه React خود را اجرا کنید:
برنامه React خود را با اجرای:
npm start