آموزش استفاده از بوت استرپ (bootstrap) در ری اکت (react.js)

یکی از فریم ورک‌های محبوب فرانت Bootstrap که این روزها بسیار طرفدار دارد و کار کد نویسی را برای برنامه نویسان راحت‌تر کرده است. اینجا بهتون یاد میدم که چه طور شما هم از تم ها ، استایل‌های بوت استرپ استفاده کنید.

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

178

پرسش و پاسخ

0
آموزش استفاده از بوت استرپ (bootstrap) در ری اکت (react.js)

خیلی از دوستان تازه به دنیای ری اکت وارد و از بوت استرپ برای استایل دهی استفاده میکنند ، اما به بن بست میرسن و کدهاشون اجرا نمیشه.  ارور های متعدد در کنسول مرورگر دریافت میکنند. 

شروع مکنیم ؛ ابتدا پروژه خود را با ادیتور خود VS-CODE یا Phpstorm  و یا هر ادیتور دیگری که استفاده میکنید باز کنید، سپس ترمینال ادیتور را باز کنید. برای نصب و راه اندازی پکیج ها در ری‌اکت از دستور npm استفاده میکنیم . دستور زیر را وارد کنید

npm install bootstrap

توجه داشته باشید کد بالا زمانی استفاده میشود که سیستم عامل شما ویندوز است. در غیر این صورت باید از دستور زیر استفاده نمایید:

yarn install bootstrap

منتظر باشید فرایند نصب و راه اندازی به پایان برسد.  پس از اتمام نصب، پوشه index.html  را در فولدر public باز کنید ، در بخش هدر آدرس بوت استرپ را در لینک قرار دهید .

<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.main.css">

اگر نیاز به بوت استرپ فارسی دارید میتونید از فایل rtl آن استفاده کنید. بوت استرپ یک فایل js نیز دارد که میتواند به راحتی آن را هم در فایل PUBLIC  خود فراخوانی کنید.