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

مرسوم ترین و ساده ترین راه برای نصب react استفاده از دستور create-react-app است.این دستور ابزاری است که توسط تیم فیسبوک نگهداری می شود.

نصب NodeJs و NPM

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: شامل مستنداتی در مورد مباحث ری اکت است.