چگونه با React Typical افکت های تایپ را به برنامه React خود اضافه کنید

آیا همیشه به این فکر کرده اید که چگونه یک افکت تایپ در وب سایت خود ایجاد کنید؟ من هم در تعجب بودم من یاد گرفتم که یک افکت تایپ پویا را با استفاده از React پیاده سازی کنم react-typical کتابخانه این اثر می تواند طراحی وب سایت شما را تغییر دهد، به خصوص در بخش قهرمان شما که نقشی حیاتی در جذب بازدیدکنندگان شما دارد.

پیش نیازها

قبل از شروع، مطمئن شوید که دانش اولیه React را دارید و Node را در سیستم خود نصب کرده اید.

همچنین به تنظیم پروژه React نیاز دارید. اگر هنوز یکی را ندارید، می توانید آن را با استفاده از Create React App ایجاد کنید.

من همچنین از Tailwind CSS برای یک ظاهر طراحی استفاده خواهم کرد.

مرحله 1: پروژه React خود را راه اندازی کنید

اگر قبلاً پروژه React ندارید، می توانید با استفاده از Create React App به سرعت آن را راه اندازی کنید:

استفاده كردن npx:

npx create-react-app my-app

یا اگر با نخ آشنایی دارید.

استفاده كردن نخ

yarn create react-app my-app 

پس از اینکه برنامه react خود را نصب کردید، با استفاده از سی دی وارد پروژه خود شوید

cd my-app

مرحله 2: React-typical را نصب کنید

استفاده كردن npm

npm install react-typical --save

استفاده كردن نخ

yarn add react-typical

مرحله 3: Tailwind CSS را نصب کنید

tailwindcss را از طریق npm یا yarn نصب کنید و فایل tailwind.config.js خود را ایجاد کنید.

استفاده كردن npm

npm install -D tailwindcss
npx tailwindcss init

استفاده كردن نخ

yarn add tailwindcss --dev
npx tailwindcss init

مرحله 4: قالب خود را پیکربندی کنید…

Source link