ساخت یک وب اپلیکیشن با ری اکت

ساخت یک وب اپلیکیشن با ری اکت

ساخت یک وب اپلیکیشن با ری اکت 1621 736 پرویز امامی

ساخت یک وب اپلیکیشن با ReactJS (ری اکت جی اس)

در این مقاله با شما همراه هستیم تا یک وب اپلیکیشن ری اکت جی اس را از پایه ایجاد کنید.

نصب ( Node.js وNPM و NPX )

در این گام ٬ باید node.js را بر روی سیستم خود نصب کنید. که در مقاله گذشته توضیح داده شد اگر فراموش کرده اید می‌توانید از اینجا مطالعه فرمایید.

شاید برای شما هم پیش آمده باشد که خب تفاوت NPM و NPX در چیست؟

NPM : node package manager  که از نام کامل آن هم مشخص است این که شما با NPM  هر پکیجی که می‌خواهید را نصب می‌کنید مانند  npm install some-package

NPX : node package exact یک ابزار برای اجرای پکیچ‌ها از این دستور استفاده می‌کنند یکی دیگر از مزیت‌های عمده npx این است که توانایی اجرای یک بسته را که قبلا نصب نشده است را اجرا می‌کنید مانند npx some-package

ساخت پروژه

پس از نصب و راه‌اندازی نود جی اس، ترمینال (CMD) را در پوشه‌ای که قصد ایجاد پروژه را دارید باز کرده و دستور زیر را وارد کنید:

npx create-react-app my-app

این را هم به شما بگویم که my-app نام پروژه شما است شما می‌توانید به جای آن هر نام دلخواهی بنویسید.

بعد از دستور بالا کافی است به پوشه ساخته شده بروید و دستور npm start را در آن پوشه اجرا کنید. این دستور برنامه Node.js ای را اجرا می‌کند.

و در مرورگر خود به صورت اتوماتیک نمایش داده می‌شود اگر نمایش داده نشد خودتان به صورت دستی آدرس http://localhost:3000/ را در مرورگر خود وارد کنید درصورت درست بود مراحل شما باید خروجی همانند شکل زیر ببینید.

و در پوشه پروژه خود باید همانند شکل زیر پوشه‌ها و فایل‌ها پروژه اضافه شده باشند.

ساخت کامپوننت

یکی از بزرگترین مزیت ری اکت این است که شما می‌توانید از کامپوننت‌ها استفاده کنید، کامپوننت‌ها شما را قادر می‌سازند تا به راحتی رابط‌های کاربری پیچیده را خرد کنید، برای مثال شما صفحه را به چند قسمت تقسیم می‌کنید بخش headet-main-footer

خب حالا یک فولد به صورت دستی به نام Componentes در پوشه SRC می‌سازیم و همه کامپوننت را در آن قرار می‌دهیم.

 

می‌خوای یه فروشگاه به وسعت اینترنت داشته باشی؟

ما حرفه‌ای‌ترین فروشگاه آنلاین رو برات طراحی می‌کنیم.

 

برای ساخت کامپونت شما می‌توانید به دو روش این کار را انجام دهید.

  1. به صورت دستی 

    یک فایل به نام js در پوشه components بسازید.

  2. با ترمینال (CMD)

    برای این کار به پوشه مورد نظر رفته و دستور زیر را وارد کنید.

npm install –save-dev create-react-component-foldernpx crcf footer

footer نام کامپونتی است که من با دستور بالا ساختم شما هم می‌توانید نام کامپوننت خود را بجای footer  قرار دهید و با فشردن دکمه ENTER  ساختار شما به صورت زیر می‌شود.

داخل پوشه کامپوننت

داخل هر کامپوننت

استفاده از کامپوننت‌ها

برای استفاده از کامپوننت‌ها باید کد :

 import Footer from ‘./components/footer/footer’;

در کامپوننت app.js  که کامپوننت اصلی می‌باشد قرار دهید در تک کامپوننت را در return() قرار دهید به شکل زیر.

 

import React from 'react';
import logo from './logo.svg';import './App.css';import Header from './components/header/header';
import Footer from './components/footer/footer';import Main from './components/main/main';
function App() {
return (
<div className="App">
<Header/>
<Main/>
<Footer/>
</div>
);}
export default App;

خروج پروژه تا اینجا

بعد از نوشتن کدها، شما باید npm start را در cmd پوشه و خروجی زیر باید در مرورگر شما نمایش داده شود

داخل هر کامپوننت

استایل کامپوننت

در هر کامپوننت یک فایل css  وجود دارد که شما می‌توانید استایل‌های مختص همان کامپوننت را برای آن بزنید. برای اینکه کامپوننت‌ها بتوانند از استایل خود استفاده کنند باید در خود فایل component.js در بالای صفحه کد آن را اضافه کنید ‘import ‘./component.css

برای اضافه کردن کلاس باید از کلمه className استفاده کنید

<h1 className=”title”>HEADER</h1>

استفاده از Semantic UI React در پروژه

Semantic UI React یک کتابخانه قدرتمند است که شرکت‌های همچون Amazon – Netflix – Microsoft  از آن برای پروژه‌های خود استفاده کردن  این کتابخانه شامل یکسری از کامپوننت‌های ری‌ اکت است. می‌توانید کامپوننت‌های بسیار مفیدی را در این قسمت مشاهده کنید، کتابخانه‌هایی مانند App Bars، Auto Complete، Badges, Buttons، Cards، Dialog Boxes، Icons، Menus، Sliders و موارد دیگری که در ری‌اکت می‌توانید مشاهده نمایید.

برای اضافه کردن این کتابخانه شما باید دستور زیر را در پوشه اصلی پروژه بزنید تا پکیج آن در پکیج‌های پروژه دانلود شود .

$  yarn add semantic-ui-react

$  yarn add semantic-ui-css

بعد از اضافه شدن پکیج شما می‌توانید از تمام کامپوننت‌های آماده آن در پروژه خود اسفاده کنید، برای مثال می‌خواهیم یه دکمه Semantic به پروژه اضافه کنیم برای این کار شما کد را در کامپوننت مورد نظر اضافه می کنید و در render() از آن استفاده کنید. مانند شکل زیر:

 

 

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

این مقاله مفید بود ؟
چرا از این پست راضی نبودید ؟
تصویر کپچا

Subscribe for free resources and news updates.