برنامج تعليمي متكامل للتفاعل - من الصفر إلى البطل

عندما نبدأ في تعلم React ، لإنشاء مشاريعنا ، نحتاج إلى إنشاء نموذج معياري من الصفر أو استخدام بعض ما يوفره المجتمع. في جميع الأوقات تقريبًا ، يكون تطبيق create-react-app الذي نستخدمه لإنشاء تطبيق بدون تكوين بنية. أو نصنع نموذجنا المعياري البسيط من الصفر.

من هذا يتبادر إلى الذهن: لماذا لا نصنع نموذجًا معياريًا مع كل التبعيات التي أستخدمها دائمًا وأتركها جاهزة؟ لقد فكر المجتمع أيضًا بهذه الطريقة ، لذلك لدينا الآن العديد من النماذج المعيارية التي أنشأها المجتمع. بعضها أكثر تعقيدًا من البعض الآخر ، لكن لديهم دائمًا نفس الهدف المتمثل في توفير أقصى قدر من الوقت.

ستعلمك هذه المقالة كيف يمكنك بناء النموذج المعياري الخاص بك من البداية باستخدام التبعيات الرئيسية المستخدمة في مجتمع React اليوم. سنستخدم بعض الميزات الحديثة الأكثر شيوعًا هذه الأيام ومن هناك يمكنك تخصيصها بالطريقة التي تريدها.

سيكون النموذج المعياري الذي تم إنشاؤه بواسطة هذه المقالة متاحًا هنا!

ابدء

بادئ ذي بدء ، سننشئ مجلدًا لبدء نموذجنا المعياري. يمكنك تسميته كما تريد ، سأقوم بتسمية رد فعل بولت .

افتح الجهاز الخاص بك وقم بإنشائه على النحو التالي:

mkdir react-bolt

الآن ، انتقل إلى المجلد الذي تم إنشاؤه ، واكتب الأمر التالي:

npm init -y

سيقوم NPM بإنشاء package.jsonملف لك ، وستكون جميع التبعيات التي قمت بتثبيتها وأوامرك هناك.

الآن ، سنقوم بإنشاء بنية المجلد الأساسية الخاصة بنا. سيكون الأمر على هذا النحو في الوقت الحالي:

react-bolt |--config |--src |--tests

حزمة الويب

يعد Webpack أشهر برنامج تجميع للوحدات لتطبيقات JavaScript في الوقت الحاضر. في الأساس ، يقوم بتجميع كل التعليمات البرمجية الخاصة بك وإنشاء حزمة واحدة أو أكثر. يمكنك معرفة المزيد عن ذلك هنا.

في هذا النموذج المعياري ، سنستخدمه ، لذا قم بتثبيت كل هذه التبعيات:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader 

الآن في configمجلدنا ، سننشئ مجلدًا آخر يسمى webpack، ثم داخل هذا webpackالمجلد ، أنشئ 5 ملفات.

قم بإنشاء ملف يسمى paths.js. داخل هذا الملف سيكون الدليل الهدف لجميع ملفات الإخراج الخاصة بك.

بداخله ، ضع كل هذا الرمز:

الآن ، قم بإنشاء ملف آخر يسمى rules.js، ووضع الكود التالي هناك:

بعد ذلك ، سننشئ 3 ملفات أخرى:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

بشكل أساسي ، في webpack.common.babel.jsملفنا ، قمنا بإعداد تكوين الإدخال والإخراج الخاص بنا وقمنا بتضمين أي مكونات إضافية مطلوبة أيضًا. في webpack.dev.babel.jsالملف ، قمنا بتعيين الوضع على التطوير. وفي webpack.prod.babel.jsملفنا ، قمنا بضبط الوضع على الإنتاج.

بعد ذلك ، في المجلد الجذر الخاص بنا ، سننشئ آخر ملف webpack يسمى webpack.config.jsونضع الكود التالي:

تكوين حزمة الويب الخاص بنا جاهز ، لذا سنعمل الآن على أجزاء أخرى من النموذج المعياري باستخدام Babel و ESLint و Prettier ، إلخ.

بابل

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

سنستخدم مجموعة من مكونات Babel الإضافية ، لذا في المجلد الجذر الخاص بنا ، قم بتثبيت:

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader [email protected]

بعد ذلك ، سننشئ ملفًا في المجلد الجذر يسمى .babelrcوداخل هذا الملف ، سنضع الكود التالي:

الآن تم تجميع مشروعنا بواسطة Babel ، ويمكننا استخدام الجيل التالي من بناء جملة JavaScript دون أي مشاكل.

ESLint

الأداة الأكثر استخدامًا لفحص المشاريع في الوقت الحاضر هي ESLint. من المفيد حقًا العثور على فئات معينة من الأخطاء ، مثل تلك المتعلقة بالنطاق المتغير ، والتخصيص للمتغيرات غير المعلنة ، وما إلى ذلك.

أولاً ، قم بتثبيت التبعيات التالية:

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react 

ثم ، في المجلد الجذر الخاص بنا ، قم بإنشاء ملف يسمى .eslintrc ووضع الكود التالي هناك:

أجمل

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

تحتاج فقط إلى تثبيته:

npm install --save-dev prettier

وفي المجلد الجذر الخاص بنا ، قم بإنشاء ملف يسمى .prettierrc ووضع الكود التالي هناك:

تتفاعل

React هي مكتبة تطبيقات JavaScript مفتوحة المصدر لبناء واجهات مستخدم. تم تطويره بواسطة Facebook ولديه مجتمع ضخم وراءه. إذا كنت تقرأ هذا المقال ، أفترض أنك تعرف بالفعل عن React ، ولكن إذا كنت تريد معرفة المزيد عنها ، فيمكنك القراءة هنا.

سنقوم بتثبيت التبعيات التالية:

npm install --save react react-dom cross-env

وداخل srcمجلدنا ، سننشئ ملف HTML بسيطًا index.htmlونضع الكود التالي:

After that, we’re going to create a simple React project. Inside our src folder, create a index.js file like this:

Inside our src folder we’re going to have the following structure:

src |--actions |--components |--reducers |--reducers |--store

Create a file called App.js inside the components folder, and put in the following code:

Redux

Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.

First, we’re going to install some dependencies:

npm install --save redux react-redux redux-thunk

Then, we’re going to create our Redux store, and put some state there. In our store folder, create an index.js file and put that following code there:

Now, inside our reducers folder create an index.js and put the following code:

Last, we’re gonna to our index.js in our src folder, and wrap the code with the /> and pas s our store as props to make it available to our application.

It’s going to be like this:

All done. Our Redux store is configured and ready to go.

React Router

React Router is the standard routing library for React. Basically, itkeeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:

npm install --save react-router-dom

After that, go to our index.js in our src folder and wrap all the code there with the

r>.

Our index.js in our src folder it’s going to end up like this:

Styled Components

Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.

First, install it:

npm install --save styled-components

Then, in our App.js file inside our components folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:

And inside our file, we need to import styled components, so our file is going to end up like this:

Jest & React Testing Library

Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.

Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.

First, we’re gonna install both:

npm install --save-dev jest jest-dom react-testing-library

After that, go to our package.json and put the following after all:

Then, go to our config folder, and inside it created another folder called tests and inside that folder, create 2 files.

First, create a file called jest.config.js and put in the following code:

Then, create a file called rtl.setup.js and put in the following code:

All done. Our boilerplate is ready to go and you can use it now.

Now go to our file package.json and put in the following code:

Now, if you run the command npm start and go to localhost:8080, we should see our application working fine!

If you want to see my final code, the boilerplate created by this article is available here!

I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!

? Follow me on Twitter!

Follow me on GitHub!

I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!