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

سلاااام و خدا قوت بر دوستان عزیز..

خووووب دوستان، همونطور که گفته بودم ما قصد داریم آموزش Reactjs رو بصورت تصویری و صدالبته بهمراه مقالات مرتبط ادامه بدیم، در قسمت اول از این آموزش به معرفی Reactjs و توضیح پاره ای مقدمات درباره آن پرداختیم،امروز اومدم که یک فیلم دیگه که راجع به راه اندازی Reactjs است رو برای شما عزیزان بارگذاری کنم، امیدوارم مفید واقع بشه و کمک هر چند کوچکی به دوستان پیگیر برای آموزش کرده باشیم..:)

در این بخش می خواهیم به چگونگی برپا کردن محیط جهت برنامه نویسی موفق در 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 reactApp

2- 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 -y

2- 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&quot

14- }

مرحله 2: نصب ReactJS و react dom

با توجه به این که کار اصلی ما نصب ReactJS است، جهت نصب آن و بسته های DOM آن به ترتیب از دستورات install react و react-dom متعلق به npm استفاده کنید. می توانید با گزینه ی --save بسته هایی که ما نصب کرده ایم را به فایل package.json اضافه کنید.

1- C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save

2- 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 –save

2- C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save

3- 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-dev

2- C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev

3- C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev

4- C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev

5- 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-env

2- 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.html

2- C:\Users\username\Desktop\reactApp>type nul > App.js

3- C:\Users\username\Desktop\reactApp>type nul > main.js

4- C:\Users\username\Desktop\reactApp>type nul > webpack.config.js

5- C:\Users\username\Desktop\reactApp>type nul > .babelrc

مرحله 6: تنظیم کامپایلر، سرور و لودرها برای ReactJS

فایل webpack-config.js را باز کنید و کد زیر را به آن اضافه کنید. می خواهیم نقطه ی ورودی وب پک را به گونه ای تنظیم کنیم که این نقطه main.js شود. مسیر خروجی جایی است که سرور به برنامه خدمات می رساند. همچنین سرور برنامه نویسی را بر روی پورت 8001 تنظیم می کنیم. این پورت را می توانید به صورت دلخواه نیز انتخاب کنید.
webpack.config.js

1- 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.js

1- 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.js

1- 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/src

2- 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.css

2- 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

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

تا فردا خدانگهدار..:)