freeCodeCamp/guide/arabic/miscellaneous/setting-up-a-react-es6-and-webpack-project/index.md

title	localeTitle
Setting Up a React Es6 and Webpack Project	إعداد مشروع React Es6 و Webpack

سيوجهك هذا الويكي إلى كيفية إعداد مشروع عظام مكشوف يستخدم React و Webpack و ES6. سنذهب أكثر من الحصول على كل شيء في العمق.

• مساعدة: المزيد عن رد الفعل

بالنسبة لهذا المشروع ، سوف نستفيد من Webpack ، الذي هو أداة تجميع وحدات نمطية ، ويستخدم بشكل شائع في مشاريع React.

• مساعدة: المزيد عن Webpack

تفاعل بشكل جيد مع ES6 ، لذلك سنستخدم ES6 في الكود.

يعد ES6 تحديثًا مهمًا للغة ، وتم تحديث أول تحديث للغة منذ أن تم توحيد ES5 في عام 2009.
- لوكيوبان

لا يعمل ES6 في المتصفحات من تلقاء نفسه ، ولكن يمكننا أن نجعلها تعمل يدويًا باستخدام برنامج Babel لتحويلها إلى ES5.

تتمثل إحدى الميزات الرئيسية للتكنولوجيات التي نستخدمها في أن ملف index.html بنا سيشير إلى ملف واحد مجمع جافا سكريبت والذي يمكن من خلاله الرجوع إلى ملفات جافا سكريبت الأخرى ، بدلاً من الإشارة إليها من ملف HTML مع علامات script .

• مساعدة: المزيد عن ES6

المتطلبات الأساسية

يهدف هذا البرنامج التعليمي إلى إعطائك بنية عظمية مكشوفة يمكن توسيعها. يجب أن يكون نقطة انطلاق جيدة لأي شخص يريد معرفة React و ES6. إذا لم تقم بإنشاء أي شيء باستخدام JavaScript أو jQuery حتى الآن ، فيجب عليك مراجعة بعض التمارين في خريطة FreeCodeCamp أولاً.

قبل البدء ، تأكد من تثبيت NodeJS و Node Package Manager على أحدث الإصدارات.

تعليمات سريعة

فيما يلي قائمة بكل التعليمات المذكورة في هذا البرنامج التعليمي.

• npm install webpack webpack-dev-server -g
• mkdir react-webpack-example && cd $_
• touch webpack.config.js
• npm init
• npm install --save-dev react react-dom webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
• touch .gitignore
• اكتب .gitignore (استخدم https://www.gitignore.io/api/node )
• mkdir src
• mkdir dist
• mkdir src/js
• touch src/js/client.js
• touch dist/index.html
• اكتب dist/index.html
• اكتب src/js/client.js
• اكتب webpack.config.js
• webpack
• webpack-dev-server --content-base dist
• افتح طريق Webpack Dev Server في المتصفح. فعله!