آموزش Reactjs - آموزش تصویری راه اندازی Reactjs

سلاااام و خدا قوت بر دوستان عزیز..خووووب دوستان، همونطور که گفته بودم ما قصد داریم آموزش Reactjs رو بصورت تصویری و صدالبته بهمراه مقالات مرتبط ادامه بدیم، در قسمت اول از این آموزش به معرفی Reactjs و توضیح پاره ای مقدمات درباره آن پرداختیم،امروز اومدم که یک فیلم دیگه که راجع به راه اندازی Reactjs است رو برای شما عزیزان بارگذاری کنم، امیدوارم مفید واقع بشه و کمک هر چند کوچکی به دوستان پیگیر برای آموزش کرده باشیم..:) https://www.aparat.com/v/b1yF4# در این بخش می خواهیم به چگونگی برپا کردن محیط جهت برنامه نویسی موفق در ReactJS بپردازیم. توجه داشته باشید که برای انجام این کار مراحل زیادی نیاز است، اما این کارها در آینده فرآیند برنامه نویسی را سرعت می بخشند. برای انجام این کار به NodeJS نیاز خواهیم داشت. بنابراین اگر آن را نصب نکرده اید، به لینک جدول زیر مراجعه کنید.پس از نصب موفق NodeJS می توانیم با استفاده از npm ، React را نصب کنیم. به دو صورت زیر می توانید NodeJS را نصب کنید:استفاده از webpack و babel.استفاده از دستور create-react-appنصب ReactJS با استفاده از webpack و babelوب پک یک ماژول مجموعه ای است (ماژول های مستقل را مدیریت کرده و آن ها را بارگیری می کند). وب پک ماژول های وابسته را گرفته و آن ها را به یک فایل واحد کامپایل می کند. طی برنامه نویسی با استفاده از خط فرمان یا با پیکربندی آن با استفاده از فایل webpack.config می توانید از وب پک استفاده کنید.بابل یک کامپایلر و ترنسپایلر جاوا اسکریپت است. Babel در تبدیل یک سورس کد به سورس کد دیگر کاربرد دارد. با استفاده از این قابلیت می توانید در کد خود از امکانات جدید ES6 استفاده کنید، به گونه ای که بابل این امکانات را به ES5 قدیمی و ساده تبدیل می کند تا بتوان از آن ها در تمامی مرورگرها استفاده کرد.مرحله 1: ایجاد پوشه ی اصلی برای ReactJSدر دسکتاپ پوشه ای با نام reactApp ایجاد کنید تا بتوانید با استفاده از دستور mkdir فایل های مورد نیاز را نصب کنید.1- C:\Users\username\Desktop>mkdir reactApp2- C:\Users\username\Desktop>cd reactAppبرای این که بتوانید هر ماژولی را ایجاد کنید، نیاز است که فایل package.json را تولید کنید. بنابراین پس از ایجاد این پوشه ما باید یک فایل package.json را ایجاد کنیم. برای انجام این کار از cmd دستور npm init را وارد کنید.3- C:\Users\username\Desktop\reactApp>npm initاین دستور اطلاعاتی در رابطه با ماژول را درخواست می کند؛ اطلاعاتی مانند اسم بسته، توضیحات، ناشر و ... . با استفاده از گزینه ی –y می توانید از این مرحله عبور کنید.1- C:\Users\username\Desktop\reactApp>npm init -y2- Wrote to C:\reactApp\package.json:3- { 4- &quotname&quot: &quotreactApp&quot, 5- &quotversion&quot: &quot1.0.0&quot, 6- &quotdescription&quot: &quot&quot, 7- &quotmain&quot: &quotindex.js&quot, 8- &quotscripts&quot: { 9- &quottest&quot: &quotecho \&quotError: no test specified\&quot && exit 1&quot 10- }, 11- &quotkeywords&quot: [], 12- &quotauthor&quot: &quot&quot, 13- &quotlicense&quot: &quotISC&quot14- }مرحله 2: نصب ReactJS و react domبا توجه به این که کار اصلی ما نصب ReactJS است، جهت نصب آن و بسته های DOM آن به ترتیب از دستورات install react و react-dom متعلق به npm استفاده کنید. می توانید با گزینه ی --save بسته هایی که ما نصب کرده ایم را به فایل package.json اضافه کنید.1- C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save2- C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --saveیا می توانید تمامی آن ها را مانند زیر در یک دستور واحد نصب کنید.1- C:\Users\username\Desktop\reactApp>npm install react react-dom --saveمرحله 3: نصب وب پک برای ReactJSبا توجه به این که ما جهت تولید این مجموعه در حال استفاده از وب پک هستیم، webpack-dev-server و webpack-cli را نصب کنید.1- C:\Users\username\Desktop\reactApp>npm install webpack –save2- C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save3- C:\Users\username\Desktop\reactApp>npm install webpack-cli --saveیا می توانید تمامی آن ها را مانند زیر در یک دستور واحد نصب کنید.1- C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --saveمرحله 4: نصب Babel برای ReactJSبابل و پلاگین های babel-core، babel-loader، babel-preset-env، babel-preset-react و html-webpack-plugin را نصب کنید.1- C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev2- C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev3- C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev4- C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev5- C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-devیا می توانید مانند زیر تمامی آن ها را در یک دستور واحد نصب کنید.1- C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env2- babel-preset-react html-webpack-plugin --save-devمرحله 5: ایجاد فایل ها برای ReactJSجهت تکمیل نصب باید برخی از فایل های خاص را مانند index.html، App.js، main.js، webpack.config.js و .babelrc ایجاد کنیم. می توانید این فایل ها را یا به صورت دستی و یا با استفاده از cmd ایجاد کنید.1- C:\Users\username\Desktop\reactApp>type nul > index.html2- C:\Users\username\Desktop\reactApp>type nul > App.js3- C:\Users\username\Desktop\reactApp>type nul > main.js4- C:\Users\username\Desktop\reactApp>type nul > webpack.config.js5- C:\Users\username\Desktop\reactApp>type nul > .babelrcمرحله 6: تنظیم کامپایلر، سرور و لودرها برای ReactJSفایل webpack-config.js را باز کنید و کد زیر را به آن اضافه کنید. می خواهیم نقطه ی ورودی وب پک را به گونه ای تنظیم کنیم که این نقطه main.js شود. مسیر خروجی جایی است که سرور به برنامه خدمات می رساند. همچنین سرور برنامه نویسی را بر روی پورت 8001 تنظیم می کنیم. این پورت را می توانید به صورت دلخواه نیز انتخاب کنید.webpack.config.js1- const path = require('path');2- const HtmlWebpackPlugin = require('html-webpack-plugin');3- module.exports = { 4- entry: './main.js', 5- output: { 6- path: path.join(__dirname, '/bundle'), 7- filename: 'index_bundle.js' 8- }, 9- devServer: { 10- inline: true, 11- port: 8080 12- }, 13- module: { 14- rules: [ 15- { 16- test: /\.jsx?$/, 17- exclude: /node_modules/, 18- loader: 'babel-loader', 19- query: { 20- presets: ['es2015', 'react'] 21- } 22- } 23- ] 24- }, 25- plugins:[ 26- new HtmlWebpackPlugin({ 27- template: './index.html' 28- }) 29- ]30- }پکیج جیسون (package.json) را باز کنید و "test" "echo \"Error: no test specified\" && exit 1" را از داخل شیء "scripts" پاک کنید. دلیل پاک کردن این خط این است که ما در این آموزش نیازی به آزمایش نخواهیم داشت. بیایید در عوض دستورات start و build را اضافه کنیم.1- &quotstart&quot: &quotwebpack-dev-server --mode development --open --hot&quot,2- &quotbuild&quot: &quotwebpack --mode production&quotمرحله 7: index.htmlاین مرحله صرفا یک HTML معمولی است. div id = "app" را به عنوان عنصر اصلی برنامه تنظیم می کنیم و اسکریپت index_bundle.js که در واقع فایل برنامه ی ما است را اضافه می کنیم.1- < !DOCTYPE html >2- < html lang = &quoten&quot > 3- < head > 4- < meta charset = &quotUTF-8&quot > 5- < title >React App< /title > 6- < /head > 7- < body > 8- < div id = &quotapp&quot >< /div > 9- < script src = 'index_bundle.js' >< /script > 10- < /body >11- < /html >مرحله 8: App.jsx و main.js برای ReactJSاین مرحله اولین جزء ReactJS را دربر می گیرد. در یکی از بخش های بعدی به صورت مفصل به اجزای ReactJS خواهیم پرداخت. این جزء باعث می شود Hello World رندر شود.App.js1- import React, { Component } from 'react';2- class App extends Component{ 3- render(){ 4- return( 5- < div > 6- < h1 >Hello World< /h1 > 7- < /div > 8- ); 9- }10- }11- export default App;باید این جزء را ایمپورت کنیم و آن را در عنصر اصلی برنامه ی خود رندر کنیم تا بتوانیم آن را در مرورگر ببینیم.main.js1- import React from 'react';2- import ReactDOM from 'react-dom';3- import App from './App.js';4- ReactDOM.render(< App />, document.getElementById('app')); نکته : هر زمان که بخواهید از چیزی استفاده کنید، باید آن را در مرحله ی اول ایمپورت کنید. اگر می خواهید این جزء در بخش های دیگر برنامه قابل استفاده باشد، باید آن را پس از ایجاد export کنید و آن را در فایلی که می خواهید از آن استفاده کنید، import کنید.فایلی را با نام .babelrc ایجاد کنید و محتوای زیر را در آن کپی کنید.} -1 2- &quotpresets&quot:[&quotenv&quot, &quotreact&quot]3- }مرحله 9: اجرای سرور برای ReactJSعملیات برپا کردن محیط تمام شده است و می توانیم با اجرای دستور زیر سرور را راه اندازی کنیم.1- C:\Users\username\Desktop\reactApp>npm startبا اجرای این کار پورتی که ما می خواهیم در مرورگر باز شود، نمایش داده می شود. این پورت برای ما http://localhost:8001/ است. بعد از این که این پورت را باز کنیم، نتیجه ی زیر نمایش داده می شود.مرحله 10: تولید نرم افزار برای ReactJSدر نهایت برای آن که بتوانید نرم افزار را تولید کنید، باید دستور build را در cmd مانند زیر اجرا کنید.1- C:\Users\Tutorialspoint\Desktop\reactApp>npm run buildاین کار باعث می شود این نرم افزار مانند زیر در پوشه ی فعلی تولید شود.استفاده از دستور create-react-app برای ReactJSبه جای استفاده از وب پک و بابل می توانید به صورت ساده تریReactJS را با نصب create-react-app نصب کنید.مرحله 1: نصب create-react-appبه دسکتاپ بروید و با استفاده از cmd مانند زیر Create React App نصب کنید.1- C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\2- C:\Users\Tutorialspoint\Desktop>npx create-react-app my-appاین کار باعث می شود، در دسکتاپ پوشه ای به نام my-app ایجاد شود و تمامی فایل های مورد نیاز در آن نصب شود.مرحله 2: حذف تمامی فایل های منبع برای ReactJSبه پوشه ی src موجود در پوشه ی my-app تولید شده بروید و مانند زیر تمامی فایل ها را حذف کنید.1- C:\Users\Tutorialspoint\Desktop>cd my-app/src2- C:\Users\Tutorialspoint\Desktop\my-app\src>del *3- C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? yمرحله 3: اضافه کردن فایل ها برای ReactJSبا استفاده از نام های index.css و index.js موجود در پوشه ی src فایل ها را اضافه کنید.1- C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css2- C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.jsکد زیر را به فایل index.js اضافه کنید.1- import React from 'react';2- import ReactDOM from 'react-dom';3- import './index.css';مرحله 4: اجرای پروژه برای ReactJSدر نهایت با استفاده از دستور start پروژه را اجرا کنید.1- npm startهر روز با یک قسمت جدید با شما هستیم..تا فردا خدانگهدار..:)