از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در این بایت ما شما را از طریق آن راهنمایی می کنیم process ایجاد یک برنامه React، از راه‌اندازی محیط شما تا ایجاد واقعی برنامه. ما سعی خواهیم کرد که process تا حد امکان ساده باشد، حتی اگر تازه وارد React هستید 🙂
پیش نیازها
قبل از شروع، به چند چیز نیاز دارید:
- دانش اولیه جاوا اسکریپت و React. اگر با React تازه کار هستید، آنها را بررسی کنید آموزش شروع سریع.
- Node.js و npm نصب شده است روی سیستم شما می توانید Node.js/npm را از سایت دانلود کنید وب سایت رسمی یا استفاده کنید nvm.
تنظیم محیط
اکنون که Node.js و npm را نصب کرده اید، بیایید محیط خود را تنظیم کنیم. خودت را باز کن terminal و به دایرکتوری که می خواهید برنامه React خود را ایجاد کنید بروید.
$ cd /path/to/your/directory
بعد، باید نصب کنید create-react-app، ابزاری است که با اجرای یک فرمان یک برنامه وب مدرن را راه اندازی می کند.
$ npx create-react-app my-app
npx یک ابزار اجرا کننده بسته است که با npm ارائه می شود. وقتی می دوی create-react-app، npx آخرین نسخه ابزار را دانلود کرده و اجرا می کند.
ایجاد اپلیکیشن React
پس از اجرای create-react-app دستور، برنامه جدید React شما در دایرکتوری به نام ایجاد می شود my-app داخل فهرست فعلی شما
$ ls
my-app
درون my-app دایرکتوری، ساختار اولیه پروژه و چند فایل را پیدا خواهید کرد. مهمترین فایل این است src/App.js، جایی که می توانید شروع به ساخت برنامه React خود کنید.
$ cd my-app
$ ls
README.md node_modules package.json public src yarn.lock
را public پوشه حاوی فایل HTML است که برنامه React شما به آن تزریق می شود. را src پوشه محل زندگی کد React شما است.
برای راه‌اندازی برنامه React، به این قسمت بروید my-app دایرکتوری و سرور توسعه را راه اندازی کنید:
$ npm start
پس از اجرای این دستور، باید خروجی مشابه زیر را مشاهده کنید:
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
روی Your Network: http://192.168.1.8:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
تبریک میگم شما به تازگی اولین برنامه React خود را ایجاد کرده اید. اکنون می توانید مرورگر خود را باز کرده و از آن بازدید کنید http://localhost:3000 تا برنامه خود را در عمل ببینید.
پروژه React جدید خود را شروع کنید
هنگامی که برنامه React خود را ایجاد کردید، وقت آن است که وارد آن شوید و پروژه جدید خود را شروع کنید. با استفاده از مسیر به دایرکتوری پروژه خود بروید cd دستور به دنبال آن نام پروژه شما. اگر پروژه شما “my-react-app” نام دارد، به این صورت به آن بروید:
$ cd my-react-app
در حال حاضر، شما در root دایرکتوری پروژه شما برای شروع برنامه React خود، از npm start دستور:
$ npm start
این دستور یک سرور توسعه را راه اندازی می کند و یک پنجره مرورگر را برای نمایش برنامه شما باز می کند. اگر همه چیز به درستی تنظیم شده باشد، باید “Welcome to React” را ببینید. روی صفحه نمایش شما
مسائل رایج
در حین کار با React، ممکن است با یکی از معدود مشکلات رایج روبرو شوید. بیایید به چند مورد از آنها و راه حل های آنها بپردازیم.
اگر برنامه شما شروع نشد، مطمئن شوید که در دایرکتوری صحیح قرار دارید (در root دایرکتوری پروژه خود) و تمام وابستگی های لازم را با آن نصب کرده اید npm install.
$ npm install
اگر پیام خطایی در مورد یک ماژول از دست رفته می‌بینید، احتمالاً فراموش کرده‌اید که یک وابستگی را نصب کنید. می توانید با آن نصب کنید npm install (module-name).
اگر در مشاهده برنامه خود در مرورگر مشکل دارید، مطمئن شوید که سرور توسعه شما در حال اجرا است (npm start) و اینکه به URL صحیح نگاه می کنید (معمولاً http://localhost:3000).
نتیجه
در این بایت، ما از طریق آن قدم زدیم process از شروع یک پروژه React جدید و برخی از مشکلات رایجی که ممکن است با آن روبرو شوید را برطرف کرد. React یک ابزار قدرتمند برای ایجاد رابط های کاربری است و درک روش راه اندازی و عیب یابی یک پروژه React یک مهارت کلیدی برای هر توسعه دهنده وب مدرن است.
منتشر شده در 1403-01-01 17:50:03
