بخش های اصلی

آموزش ReactJS

ReactJS – تنظیمات محیط

در این بخش، برای طراحی و توسعه ی موفقیت آمیز با ReactJS، نحوه ی تنظیم کردن محیط را به شما آموزش میدیم. به خاطر داشته باشین که برای این کار باید مراحل زیادی را انجام بدین ولی انجام این کار در آینده به بالا رفتن سرعت طراحی و توسعه کمک می کنه.  برای انجام تنظیمات، به NodeJS نیاز داریم، اگه ندارین، به جدول زیر مراجعه کنین.

شماره

نرم افزار

توضیحات

1

NodeJS و NPM

NodeJS پلتفرمیِه که برای طراحی و توسعه ی Cordova  لازمِه. 

مرحله ی 1 – نصب پکیج های سراسری (Global)

باید تعدادی پکیج را هم نصب کنین. به تعدادی از پلاگین های babel نیز احتیاج پیدا خواهیم کرد، بنابراین ابتدا با اجرای کد زیر در پنجره ی اعلان فرمان (command prompt)، babel را نصب کنین.

C:Usersusername>npm install -g babel
C:Usersusername>npm install -g babel-cli

مرحله ی 2 – ایجاد پوشه ی ریشه

نام این پوشه را reactApp میذاریم و آن را روی دسکتاپ قرار میدیم. بعد از ایجاد پوشه آن را باز میکنیم و با اجرای دستور npm init در اعلان فرمان (command prommpt)، یک فایل خالی به نام package.json در آن ایجاد می کنیم و بقیه مراحل را ادامه میدیم.

C:UsersusernameDesktop>mkdir reactApp
C:UsersusernameDesktopreactApp>npm init

مرحله ی 3 – اضافه کردن وابسته ها و پلاگین ها

در این آموزش از weback bundler استفاده خواهیم کرد، بنابراین webpack و webpack-dev-server را هم نصب کنین.

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

از آنجایی که میخوایم از React استفاده کنیم، باید اول آن را نصب کنیم. دستورِ --save، این پکیج ها را به فایلِ package.json، اضافه خواهد کرد.

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

همانطور که پیش تر هم گفتیم، به پلاگین های bubel، نیاز پیدا خواهیم کرد بنابراین، باید آن را هم نصب کنیم.

C:UsersusernameDesktopreactApp>npm install babel-core
C:UsersusernameDesktopreactApp>npm install babel-loader
C:UsersusernameDesktopreactApp>npm install babel-preset-react
C:UsersusernameDesktopreactApp>npm install babel-preset-es2015

مرحله ی 4 – ایجاد فایل ها

در این قسمت تعدادی از فایل هایی که نیاز داریم را ایجاد می کنیم. می توانید این فایل ها را دستی اضافه کنین یا با خط فرمان (command prompt).

C:UsersusernameDesktopreactApp>touch index.html
C:UsersusernameDesktopreactApp>touch App.jsx
C:UsersusernameDesktopreactApp>touch main.js
C:UsersusernameDesktopreactApp>touch webpack.config.js

مرحله ی 5 – تنظیم کامپایلر، sever و loaderها

فایلِ webpack-config.js، را باز کنین و کد زیر را در آن وارد کنین. با این کار، نقطه ی ورودی webpack را main.js قرار میدیم. مسیر خروجی، جاییِه که برنامه ی همراه (bundled)، در آن جا خدمت دهی خواهد کرد. همچنین سرور توسعه را هم روی پورت 8080 تنظیم می کنیم. می توانید هر پورتی که بخواین رو انتخاب کنین. در پایان، babel loaderها را برای جستجوی فایل های js و استفاده از پیش تنظیماتِ es2015 و react که پیش تر نصب کردیم، تنظیم می کنیم.

webpack.config.js

var config = {
   entry: './main.js',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [
         {
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
				
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

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

"start": "webpack-dev-server --hot"

اکنون می توانیم برای روشن کردن سرور، از دستورِ npm start، استفاده کنیم. دستورِ –-hot، هر وقتی چیزی در فایل تغییر کنه، بصورت همزمان بارگذاری مجدد انجام میده، به این ترتیب با هر بار تغییر کد، نیازی به تازه سازی (refresh) کردن مرورگر نداریم.

مرحله ی 6 - index.html

این فایل فقط HTML معمولیِه. div id = "app" را بعنوان عنصر ریشه ی برنامه تنظیم می کنیم و index.js را هم که فایل برنامه ی همراه (bundled) است، اضافه می کنیم.

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

مرحله ی 7 - App.jsx  و  main.js

این اولین کامپوننتِ react است. در آموزش های بعدی، کامپوننت های React را بصورت کامل توضیح میدیم. کامپوننت زیر Hello World!!! را رِندِر (render)، میکنه.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

برای این که بتوانیم نتیجه ی این کامپوننت را در مرورگر ببینیم، باید آن را در ریشه ی App، import و رِندِر (render) کنیم.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

نکته

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

مرحله ی 8 – اجرای سرور

اکنون تنظیمات تکمیل شدن و می توانیم سرور را روشن کنیم:

C:UsersusernameDesktopreactApp>npm start

با اجرای این کد، پورتی که برای باز کردن مرورگر به آن احتیاج دارید، به شما نشان داده میشه، در مثال ما، http://localhost:7777/ است.

react hello world

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد