نصب ری اکت با استفاده از دستور create-react-app

مرسوم ترین و ساده ترین راه برای نصب react استفاده از دستور create-react-app است.این دستور ابزاری است که توسط تیم فیسبوک نگهداری می شود.
نصب NodeJs و NPM
nodejs و npm پلتفرم هایی هستند که برای توسعه برنامه هایمان در این کتابخانه به آنها نیاز داریم.
برای نصب nodejs و npm در سیستم عامل ویندوز و لینوکس به لینک زیر مراجعه کنید:
نصب React
شما می توانید react را با استفاده از مدیریت بسته npm نصب کنید که برای انجام این کار از دستور زیر استفاده می کنیم:
laraman@root:~/>npm install -g create-react-app
ایجاد یک پروژه جدید react
بعد از نصب ری اکت شما می توانید پروژه ی خود را با استفاده از دستور create-react-app ایجاد کنید:
در اینجا ما از lrm-reactapp برای نام پروژه خود استفاده می کنیم.
create-react-app lrm-reactapp
نکته: شما می توانید دستورات دو مرحله ی قبل را با استفاده از یک دستور ایجاد کنید:
laraman@root:~/>npx create-react-app lrm-reactapp
npx: این دستور اصطلاحا "ابزار دونده بسته" نام دارد که از ورژن ۵.۲ به بالاتر npm اجرا می شود.
دستور بالا بصورت همزمان react و پروژه جدید ما را با نام lrm-react-app ایجاد می کند.
بعد از نصب react و ایجاد پروژه خود در پوشه مورد نظر، به پوشه lrm-reactapp مراجعه می کنیم:
این پوشه حاوی فایل ها و پوشه های دیگری است که توسط دستور بالا برای ما ایجاد شد.
برای شروع پوشه src را باز کرده و تغییرات مد نظر خود را اعمال کنید،محتویات پوشه src در تصویر زیر مشاهده می شود:
به عنوان مثال فایل App.js حاوی کدهای زیر است:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Welcome To Laraman.
<p>To get started, edit src/App.js and save to reload.</p>
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
برای اجرای پروژه خود در مرورگر، ابتدا وارد پوشه پروژه شده و دستور زیر را اجرا می کنیم:
laraman@root:~/Desktop>cd lrm-reactapp
laraman@root:~/Desktop/lrm-reactapp>npm start
اکنون با صفحه زیر در مرورگر مواجه می شویم:
نکته: react به صورت پیش فرض بر روی پورت ۳۰۰۰ در مرورگر اجرا می شود.
به همین راحتی توانستیم پروژه خود را با استفاده از کتابخانه reactjs نصب و اجرا کنیم.
ساختار پوشه های درون پروژه ری اکت
- node_modules: این پوشه حاوی کتابخانه ری اکت و کتابخانه های دیگری است که به آنها نیاز داریم.
- public: این پوشه حاوی فایل index.html است، جایی که کتابخانه ری اکت بر روی عنصر <div id="root"></div> اجرا می شود.
- src: این پوشه دارای فایل های App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js است و فایل App.js همیشه مسئول نمایش صفحه ی خروجی در ری اکت است.
- package-lock.json: این فایل به صورت اتوماتیک برای هرگونه عملیات در این کتابخانه تولید می شود، جایی که npm تغییرات روی پوشه ی node_modules یا package.json را اصلاح می کند.
- package.json: این فایل ابرداده های مختلف مورد نیاز برای پروژه را نگه می دارد، این فایل اطلاعاتی همچون امکان شناسایی پروژه و مدیریت وابستگی های پروژه را به npm می دهد.
- README.md: شامل مستنداتی در مورد مباحث ری اکت است.