إعداد بيئة ReactJS

في هذا الفصل، سنعرض لك كيفية إعداد بيئة النجاح لتطوير React. يرجى ملاحظة أن هناك العديد من الخطوات، ولكن هذا سيساعد في تسريع عملية التطوير في المستقبل. سنحتاج إلى NodeJS، لذا إذا لم تكن قد قمت بتثبيتها، يرجى التحقق من الروابط في الجدول أدناه.

بعد تثبيت NodeJS بنجاح، يمكننا البدء باستخدام npm لتثبيت React-on. يمكنك تثبيت ReactJS بطرقين

• استخدام webpack和Babel.

• استخدامcreate-react-appالأمر.

استخدام webpack和Babel لتثبيت ReactJS

Webpackهو محول modules (يدير ويعتمد modules المستقلة). يأخذ modules ذات الصلة ويقوم بتحويلها إلى حزمة واحدة (ملف). يمكنك استخدام هذه الحزمة لتطوير تطبيق باستخدام سطر الأوامر أو من خلال إعداد ملف webpack.config لتطوير تطبيق.

Babel هو محول JavaScript ومحول. يتم استخدامه لتحويل ملف مصدر إلى ملف مصدر آخر. باستخدام هذه الميزة، يمكنك استخدام ميزات ES6 الجديدة في كودك، وسيقوم Babel بتحويلها إلى ES5 عادي يمكن تشغيله في جميع المتصفحات.

الخطوة 1-إنشاء مجلد جذري

استخدم الأمر mkdir لإنشاء مجلد名为 reactApp على سطح المكتب لتنزيل جميع الملفات الضرورية.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

لإنشاء أي module، يجب إنشاء ملف package.json. لذلك، بعد إنشاء المجلد، يجب إنشاء ملف package.json. من أجل ذلك، يجب عليك تشغيل الأمر npm init من سطر الأوامر.

C:\Users\username\Desktop\reactApp>npm init

يطلب هذا الأمر معلومات حول المodule، مثل اسم الحزمة، الوصف، المؤلف، إلخ. يمكنك استخدام خيار –y لتخطي هذه المعلومات.

C:\Users\username\Desktop\reactApp>npm init -y
تم كتابة إلى C:\reactApp\package.json:
{
　　　"الاسم": "reactApp",
　　　"الإصدار": "1.0.0",
　　　"الوصف": "",
　　　"الأساسي": "index.js",
　　　"السكربت": {
　　　　　　"الاختبار": "echo \
　　　},
　　　"الكلمات المفتاحية": [],
　　　"المؤلف": "",
　　　"الترخيص": "ISC"
}

الخطوة 2-تثبيت React و React dom

بما أن مهمتنا الرئيسية هي تثبيت ReactJS، يجب تثبيته وملفه DOM باستخدام أوامر npm install react و react-dom على التوالي. يمكنك استخدام خيار --save لإضافة الحزم التي قمت بتثبيتها إلى ملف package.json.

C:\Users\w3codebox\Desktop\reactApp>npm install react --save
C:\Users\w3codebox\Desktop\reactApp>npm install react-dom --save

أو يمكنك تثبيتها جميعًا في أمر واحد، مثلما هو موضح أدناه:

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

الخطوة 3-تثبيت Webpack

بما أننا نستخدم webpack لإنشاء الملفات المدمجة، يرجى تثبيت webpack،webpack-dev-server وwebpack-cli.

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

أو يمكنك تثبيت جميع هذه البرامج في أمر واحد، مثل:

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

الخطوة 4-تثبيت Babel

تثبيت babel وملحقاته babel-core،babel-loader،babel-preset-env،babel-preset-react و html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

أو يمكنك تثبيت جميع هذه البرامج في أمر واحد، مثل-

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env　
　　　babel-preset-react html-webpack-plugin --save-dev

الخطوة 5-إنشاء الملفات

لإكمال التثبيت، نحتاج إلى إنشاء بعض الملفات، وهي index.html، App.js، main.js، webpack.config.js و.babelrcيمكنك إنشاء هذه الملفات يدويًا أو باستخدام سطر الأوامر.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

الخطوة 6-إعداد المُراجع، الخادم وملحقات التحميل

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: 8001
　　　},
　　　module: {
　　　　　　rules: [
　　　　　　　　　{
　　　　　　　　　　　　test: /\.jsx?$/
　　　　　　　　　　　　exclude: /node_modules/,
　　　　　　　　　　　　loader: 'babel-loader',
　　　　　　　　　　　　query: {
　　　　　　　　　　　　　　　presets: ['es2015', 'react']
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　]
　　　},
　　　plugins:[
　　　　　　new HtmlWebpackPlugin({
　　　　　　　　　template: './index.html'
　　　　　　})
　　　]
}

افتح ملف package.json وأزيل من "scripts". "test" "echo \"Error: no test specified\" && exit 1"نحن نزيل هذا السطر لأننا لن نقوم بأي اختبارات في هذا الدرس. دعونا نضيف أوامر start و build.

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

الخطوة 7-index.html

هذا مجرد HTML عادي. سنضيفdiv id="app"للمكون الأساسي للتطبيق، وأضفindex_bundle.jsالسكرابت (ملف التطبيق المدمج).

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

الخطوة 8-App.jsx و main.js

هذا هو المكون الأول لـ React. سنوضح المكونات الخاصة بـ 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;

نحتاج إلى استيراد هذا المكون وعرضه في جذورناAppالعناصر، حتى نتمكن من رؤيتها في المتصفح.

main.js

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

أنشئ ملفًا يحمل اسمًا.babelrcوقم بتثبيت المحتوى التالي في هذا الملف.

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

الخطوة 9-تشغيل الخادم

بعد إتمام الإعداد، يمكننا تشغيل الخادم عبر تشغيل الأمر التالي.

C:\Users\username\Desktop\reactApp>npm start

سيظهر المرفق الذي يجب فتحه في المتصفح. في حالتنا، هوhttp://localhost:8001/عند فتحه، سنرى الناتج التالي.

الخطوة 10-إنشاء الحزمة

في النهاية، لإنشاء الحزمة، ستحتاج إلى تشغيل الأمر build في سطر الأوامر، كما هو موضح أدناه:

C:\Users\w3codebox\Desktop\reactApp>npm run build

سيقوم بإنشاء حزمة التطبيق في مجلد الحالي، كما هو موضح أدناه.

استخدام الأمر create-react-app

بالإضافة إلى استخدام webpack و babel، يمكنك أيضًا تثبيتcreate-react-appلتثبيت ReactJS بطريقة أكثر بساطة.

الخطوة 1-تثبيت create-react-app

استعرض سطح المكتب واستخدم سطر الأوامر لتثبيت Create React App، كما هو موضح أدناه-

C:\Users\w3codebox>cd C:\Users\w3codebox\Desktop\
C:\Users\w3codebox\Desktop>npx create-react-app my-app

سيتم إنشاء مجلد my-app على سطح المكتب ويتم تثبيت جميع الملفات الضرورية فيه.

الخطوة 2-حذف جميع ملفات المصدر

استعرض مجلد src في مجلد my-app المُنتج، وأزيل جميع الملفات الموجودة فيه، مثلما يلي-

C:\Users\w3codebox\Desktop>cd my-app/src
C:\Users\w3codebox\Desktop\my-app\src>del *
C:\Users\w3codebox\Desktop\my-app\src\*, هل أنت متأكد (Y/N)? y

الخطوة 3-إضافة ملف

أضف ملفًا يحمل الاسم في مجلد srcindex.cssوindex.jsملف الملف

C:\Users\w3codebox\Desktop\my-app\src>type nul > index.css
C:\Users\w3codebox\Desktop\my-app\src>type nul > index.js

أضف التالي في ملف index.js

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

الخطوة 4-تشغيل المشروع

في النهاية، استخدم أمر start لتشغيل المشروع.

npm start