مرجع مقالات رسمي اپليكيشن

توليد يك اينترنت نرم افزار با 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 مي سازيم و همگي كامپوننت را در آن قرار مي دهيم.


مي‌خواي يه مغازه به وسعت وب داشته باشي؟ما فن‌اي‌ترين مغازه آنلاين رو برات پباده سازي ميكنيم.



براي توليد كامپونت شما ميتوانيد به دو نحوه اين عمل را انجام دهيد.
به طور دستي 
يك پوشه به اسم js در فولدر components بسازيد.
با ترمينال (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 (




);}export default App;خروج پروژه تا اينجابعداز تايپ كردن كدها، شما مي بايست npm start را در cmd فولدر و خروجي پايين بايستي در مرورگر شما اكران داده شوددرون هر كامپوننت
استايل كامپوننتدر هر كامپوننت يك پوشه css موجود هست كه شما ميتوانيد استايل‌هاي خاص به عبارتي كامپوننت را براي آن بزنيد. براي اينكه كامپوننت‌ها بتوانند از استايل خويش به كار گيري نمايند بايستي در خويش پوشه component.js در بالاي كاغذ كد آن را بيشتر فرمائيد ‘import ‘./component.cssبراي افزودن كلاس بايستي از واژه className به كارگيري نمائيد
HEADER

به كار گيري از 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() از آن استعمال فرماييد. مانند صورت ذيل: