آماده سازی محیط توسعه ReactJS – آموزش ReactJs

جمعه ۳ اسفند ۱۳۹۷
بازدید ۱,۹۹۵ نفر
یعثوب سیفی زاده
(15 امتیاز از 3 رای)
Loading...

تصویر reactjs-environment-setup_6078 آماده سازی محیط توسعه ReactJS - آموزش ReactJs

آماده سازی محیط توسعه ReactJS

در این بخش نحوه آماده سازی محیط توسعه ReactJS را بررسی خواهیم کرد. برای این کار ابتدا باید NodeJS را بر روی سیستم خود نصب کنید.

نصب NodeJS

اگر قبلا آن را بر روی سیستم خود نصب کرده اید نیاز نیست این مرحله را انجام دهید. برای بررسی نصب بودن NodeJs در خط فرمان دستور زیر را وارد کنید:

node -v

node -v

اگر نود نصب شده باشد، نسخه آن چاپ خواهد شد.

به منظور نصب NodeJS ابتدا به سایت آن بروید، سپس از بخش دانلود آن را دانلود کنید و فایل نصب کننده را اجرا کنید تا بر روی سیستم شما نصب شود.

نصب ReactJS

برای نصب ReactJS می توانید از دو روش زیر استفاده کنید (ما در این آموزش از روش اول استفاده خواهیم کرد):

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

نصب با استفاده از webpack و babel

Webpack یک ماژول bundler (بسته بندی کننده ماژول ها) است که برای مدیریت ماژول های مختلف مورد نیاز در هنگام ساخت برنامه استفاده می شود. این ابزار ماژول های مختلف را به یک ماژول تبدیل می کند و شما می توانید با استفاده از خط فرمان یا فایل webpack.config از این بسته در زمان توسعه برنامه ها استفاده کنید.

Babel یک کامپایلر زبان جاوا اسکریپت است. با استفاده از آن می توانیم از ویژگی های موجود در ES6 در کدهای خود استفاده کنیم. این کامپایلر کدهای ما را به ES5 تبدیل می کند تا در تمام مرورگرها قابل اجرا باشد.

برای نصب ReactJS با استفاده از این روش، مراحل زیر را دنبال کنید:

مرحله اول : ایجاد فولدر اصلی (root)

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

C:UsersusernameDesktop>mkdir reactApp
C:UsersusernameDesktop>cd reactApp

1 2	C:UsersusernameDesktop>mkdir reactApp C:UsersusernameDesktop>cd reactApp

برای ایجاد هر ماژولی، یک فایل package.json لازم است. بنابراین بعد از ساخت فولدر اصلی، با استفاده از npm و خط فرمان یک فایل package.json ایجاد می کنیم.

C:UsersusernameDesktopreactApp>npm init

1	C:UsersusernameDesktopreactApp>npm init

با اجرای دستور فوق، اطلاعاتی (مانند نام بسته، توضیحات، نویسنده و غیره) از شما پرسیده می شود. برای ایجاد فایل package.json با مقادیر پیشفرض گزینه –y را به دستور فوق اضافه کنید.

C:UsersusernameDesktopreactApp>npm init -y
Wrote to C:reactApppackage.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo "Error: no test specified" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

C:UsersusernameDesktopreactApp>npm init -y

Wrote to C:reactApppackage.json:

{

"name": "reactApp",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo "Error: no test specified" && exit 1"

"keywords": [],

"author": "",

"license": "ISC"

}

مرحله دوم : نصب React و React Dom

برای نصب React و React Dom می توانید از دو دستور زیر استفاده کنید (گزینه –save در انتهای هر دستور، باعث می شود تا بسته نصب شده به فایل package.json نیز اضافه شود):

C:UsersTutorialspointDesktopreactApp>npm install react --save
C:UsersTutorialspointDesktopreactApp>npm install react-dom --save

1 2	C:UsersTutorialspointDesktopreactApp>npm install react --save C:UsersTutorialspointDesktopreactApp>npm install react-dom --save

یا هر دو آن ها را با یک دستور نصب کنید:

C:UsersusernameDesktopreactApp>npm install react react-dom --save

1	C:UsersusernameDesktopreactApp>npm install react react-dom --save

مرحله سوم : نصب webpack

از آن جا که در این روش به منظور bundle کردن نرم افزار از webpack استفاده خواهیم کرد، باید آن را نصب کنیم. دستور زیر webpack، webpack-dev-server و webpack-cli را نصب می کند:

C:UsersusernameDesktopreactApp>npm install webpack –save
C:UsersusernameDesktopreactApp>npm install webpack-dev-server --save
C:UsersusernameDesktopreactApp>npm install webpack-cli --save

C:UsersusernameDesktopreactApp>npm install webpack –save

C:UsersusernameDesktopreactApp>npm install webpack-dev-server --save

C:UsersusernameDesktopreactApp>npm install webpack-cli --save

ترکیب سه دستور فوق در یک دستور:

C:UsersusernameDesktopreactApp>npm install webpack webpack-dev-server webpack-cli --save

1	C:UsersusernameDesktopreactApp>npm install webpack webpack-dev-server webpack-cli --save

مرحله چهارم : نصب babel

دستورات زیر babel و افزونه های آن را نصب می کند:

C:UsersusernameDesktopreactApp>npm install babel-core --save-dev
C:UsersusernameDesktopreactApp>npm install babel-loader --save-dev
C:UsersusernameDesktopreactApp>npm install babel-preset-env --save-dev
C:UsersusernameDesktopreactApp>npm install babel-preset-react --save-dev
C:UsersusernameDesktopreactApp>npm install html-webpack-plugin --save-dev

C:UsersusernameDesktopreactApp>npm install babel-core --save-dev

C:UsersusernameDesktopreactApp>npm install babel-loader --save-dev

C:UsersusernameDesktopreactApp>npm install babel-preset-env --save-dev

C:UsersusernameDesktopreactApp>npm install babel-preset-react --save-dev

C:UsersusernameDesktopreactApp>npm install html-webpack-plugin --save-dev

دستورات فوق در یک دستور:

C:UsersusernameDesktopreactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

1 2	C:UsersusernameDesktopreactApp>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev

مرحله پنجم : ایجاد فایل ها

برای کامل کردن فرآیند نصب، باید چند فایل با نام های مشخص (index.html، App.js، main.js، webpack.config.js و .babelrc) ایجاد کنیم. شما می توانید این فایل ها را به صورت دستی یا با استفاده از دستور زیر ایجاد کنید:

C:UsersusernameDesktopreactApp>type nul > index.html
C:UsersusernameDesktopreactApp>type nul > App.js
C:UsersusernameDesktopreactApp>type nul > main.js
C:UsersusernameDesktopreactApp>type nul > webpack.config.js
C:UsersusernameDesktopreactApp>type nul > .babelrc

C:UsersusernameDesktopreactApp>type nul > index.html

C:UsersusernameDesktopreactApp>type nul > App.js

C:UsersusernameDesktopreactApp>type nul > main.js

C:UsersusernameDesktopreactApp>type nul > webpack.config.js

C:UsersusernameDesktopreactApp>type nul > .babelrc

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

فایل webpack-config.js را باز کرده و کدهای زیر را به آن اضافه کنید. در کد زیر ما main.js را به عنوان entry (فایل اصلی برنامه) تنظیم کرده ایم.

محتوای فایل webpack-config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './main.js',

output: {

path: path.join(__dirname, '/bundle'),

filename: 'index_bundle.js'

devServer: {

inline: true,

port: 8080

module: {

rules: [

{

test: /.jsx?$/,

exclude: /node_modules/,

loader: 'babel-loader',

query: {

presets: ['es2015', 'react']

}

]

plugins:[

new HtmlWebpackPlugin({

template: './index.html'

})

]

}

فایل package.json باز کرده و عبارت “test”: “echo “Error: no test specified” && exit 1″ که در داخل شیء scripts قرار دارد را حذف کنید. این عبارت مربوط به فرآیند تست برنامه است. ما در این آموزش هیچ گونه تستی بر روی برنامه انجام نخواهیم داد. به جای آن عبارات زیر را اضافه کنید:

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

1 2	"start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production"

مرحله هفتم : فایل index.html

محتوای این فایل HTML معمولی است. در کد زیر ما یک div با ای دی app ایجاد کرده ایم که به عنوان عنصر root برنامه در نظر گرفته می شود سپس فایل index_bundle.js را اضافه کرده ایم که فایل bundle شده برنامه ماست.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

<!DOCTYPE html>

<head>

<title>React App</title>

</head>

<body>

</body>

</html>

مرحله هشتم : فایل های App.jsx و main.js

فایل App.jsx اولین کامپوننت در React است. کامپوننت ها را در بخش های بعدی بیشتر بررسی می کنیم. این کامپوننت عبارت Hello World را رندر می کند.

محتوای فایل App.js:

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

import React, { Component } from 'react';

class App extends Component{

render(){

return(

<div>

<h1>Hello World</h1>

</div>

);

}

export default App;

برای اینکه بتوانیم محتوای این کامپوننت را در مرورگر نمایش دهیم، باید آن را به فایل main.js اضافه کنیم.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

توجه! هر زمان که بخواهید از چیزی استفاده کنید، باید ابتدا آن را import کنید.

محتوای زیر را به فایل .babelrc اضافه کنید:

{
   "presets":["env", "react"]
}

{

"presets":["env", "react"]

}

مرحله نهم : اجرای سرور

تا اینجا نصب React تمام شده است و می توانیم با استفاده از دستور زیر سرور را اجرا کنیم:

C:UsersusernameDesktopreactApp>npm start

1	C:UsersusernameDesktopreactApp>npm start

بعد از اجرا دستور فوق، پورتی که باید در مرورگر باز شود، نمایش داده می شود. بعد از باز کردن آن در مرورگر خروجی زیر را مشاهده خواهید کرد:

تصویر running_the_server_6078 آماده سازی محیط توسعه ReactJS - آموزش ReactJs

مرحله دهم : تولید bundle

در نهایت، برای تولید بسته نرم افزاری (bundle)، باید دستور زیر را در خط فرمان اجرا کنید:

C:UsersTutorialspointDesktopreactApp>npm run build

1	C:UsersTutorialspointDesktopreactApp>npm run build

دستور فوق bundle را در فولدر جاری ایجاد خواهد کرد:

تصویر generating_the_bundle_6078 آماده سازی محیط توسعه ReactJS - آموزش ReactJs

نصب با دستور create-react-app

این روش نصب خیلی ساده تر از روش webpack است. برای نصب ReactJS با استفاده از این روش، مراحل زیر را دنبال کنید.

مرحله اول : ایجاد پروژه با create-react-app

مانند نمونه زیر به دسکتاپ خود رفته و با دستور create-react-app یک برنامه جدید ایجاد کنید:

C:UsersTutorialspoint>cd C:UsersTutorialspointDesktop
C:UsersTutorialspointDesktop>npx create-react-app my-app

1 2	C:UsersTutorialspoint>cd C:UsersTutorialspointDesktop C:UsersTutorialspointDesktop>npx create-react-app my-app

دستور فوق یک فولدر جدید با نام my-app در دسکتاپ شما ایجاد و سپس فایل مورد نیاز را به آن اضافه می کند.

مرحله دوم : حذف فایل ها

مانند نمونه زیر به فولدر ایجاد شده بروید و فایل های موجود در فولدر src را حذف کنید:

C:UsersTutorialspointDesktop>cd my-app/src
C:UsersTutorialspointDesktopmy-appsrc>del *
C:UsersTutorialspointDesktopmy-appsrc*, Are you sure (Y/N)? y

C:UsersTutorialspointDesktop>cd my-app/src

C:UsersTutorialspointDesktopmy-appsrc>del *

C:UsersTutorialspointDesktopmy-appsrc*, Are you sure (Y/N)? y

مرحله سوم : اضافه کردن فایل ها

دو فایل جدید با نام های index.css و index.js در همان فولدر ایجاد کنید. مانند نمونه زیر:

C:UsersTutorialspointDesktopmy-appsrc>type nul > index.css
C:UsersTutorialspointDesktopmy-appsrc>type nul > index.js

1 2	C:UsersTutorialspointDesktopmy-appsrc>type nul > index.css C:UsersTutorialspointDesktopmy-appsrc>type nul > index.js

سپس محتوای زیر را به فایل index.js اضافه کنید:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

مرحله آخر : اجرای پروژه

در آخر با استفاده از دستور start برنامه ایجاد شده را اجرا کنید. مانند نمونه زیر:

npm start

npm start

تصویر reactjs-environment-setup_6078_1 آماده سازی محیط توسعه ReactJS - آموزش ReactJs

ReactJS - استفاده از JSX ReactJS - معرفی

دسته ها: آموزش ها - فریم ورک nodeJS

آموزش هوش مصنوعی و الگوریتم های فراابتکاری با پایتون

آموزش پایتون برای یادگیری ماشین (دوره کامل برای مبتدیان)

دوره آموزش ساخت فروشگاه اینترنتی (دیجی کالا) به صورت پروژه محور با PHP

آموزش مقدماتی فریم ورک ReactJS به صورت فیلم آموزشی

آموزش برنامه نویسی PHP از مقدماتی تا پیشرفته (فیلم آموزشی)

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش سی شارپ به صورت پروژه محور (مدیریت فروشگاه)

آموزش ReactJS

مباحث پایه ReactJS