سامح أشرف

يمكنك إستخدام جملة del لحذف أي مفتاح موجود في قاموس معين، كالتالي:
>>> a = {'a': 1, 'b': 3} >>> del a['a'] >>> a {'b': 3} >>> كما يمكن إستخدام التابع pop كالتالي:
>>> a = {'a': 1, 'b': 3} >>> a.pop('a', None) 1 >>> a {'b': 3} >>>  

يجب فقط أن تقوم بإزالة المسافة بين .search-icon .active في السطر 18 في CSS ليكون كالتالي:
.search-icon.active { width: 300px; } لأن الصنف active يتم إضافته للحاوية وليس للأيقونة التي بداخلها.
أما في الكود الخاص بك يتم تطبيق خصائص CSS على العنصر الذي يختوي على الصنف active الموجود داخل العنصر الذي لديه الصنف search-icon

يمكنك أن تقوم بعمل متغيرات من نوع static من خلال تعريف هذه المتغيرات في داخل الصنف نفسه وليس داخل أي دوال أخرى كالتالي:
>>> class Example: ... x = 9 ... >>> Example.x 9 >>> لاحظ أن هناك إختلاف بين بايثون ولغات أخرى مثل C++ في هذا الأمر وهو أن المتغير x يمكن تغير قيمته فيما بعد من داخل الـ instance نفسه ويظل بإمكانك إستعمال المتغير الثابث أيضًا كالتالي:
>>> ex = Example() >>> ex.x = 8 >>> print(ex.x, Example.x) 8 9 >>> كما بإمكانك أن تقوم بعمل دوال ثابتة static methods من خلال إضافة @staticmethod قبل تعريف الدالة كالتالي:
>>> class Example: ... @staticmethod ... def f(a,b): ... print(a, b) ... >>> ex = Example() >>> ex.f(1, 2) 1 2 >>> Example.f(1, 2) 1 2 >>> لاحظ أن الدوال الثابتة في بايثون لا تحتاج إى إضافة self كمدخل للدالة كباقي الدوال العادية.

بداية من بايثون الإصدار 3.10 (2021) يمكنك إستعمال جملة مشابهة لـ switch وهي match .. case كالتالي:
 
x = 'a' match x: case 'a': print("X is A") case 'b': print("X is B") وكبديل لهذا يمكنك إستعمال القواميس في الإصدارات السابقة كالتالي:
x = { 'a': "X is A", 'b': "X is B", } print(x['a'])  

يمكن عمل موقع بلغة JavaScript فقط (backend + frontend) لكن ستحتاج إلى إستخدام إطارات عمل مثل React.js لواجهة الموقع و express.js للـ backend بالإضافة إلى إستعمال SQL للتعامل مع قواعد البيانات (لاحظ أن SQL ليست لغة برمجة وإنما لغة تستعمل لكتابة جمل تتعامل مع قواعد البيانات لعمل عمليات الإضافة والتعديل والحذف .. إلخ).
وهذا المسار من التقنيات يعرف بـ MERN (MongoDB Express.js React.js Node.js)

يمكنك حل هذه المشكلة بأكثر من طريقة كالتالي:
يمكنك إستعمال العلمة / بدلًا من العلامة \ وسيعمل كل شيء على ما يرام في Windows و Linux و MacOS، كالتالي:
>>> x = 'C:/Users/name/Desktop' أو بإمكانك أن تستعمل علامة \\ (double backslash) كالتالي:
>>> x = 'C:\\Users\\name\\Desktop' كذلك يمكنك أن تستخدم سلسلة حروف خام raw string literals من خلال إضافة حرف r قبل النص مباشرة كالتالي:
>>> x = r'C:\Users\name\Desktop' ملاحظة: لا يمكن أن تنتهي raw string literals بعلامة \ حيث سيسبب هذا الأمر الخطأ التالي:
SyntaxError: EOL while scanning string literal  

يمكنك أن تستعمل خدمة Firebase المقدمة من جوجل حيث تسمح لك بعمل كل عمليات CRUD مجانًا ولن تحتاج لتعلم كيفية عمل Backend بلغة برمجة معينة مثل PHP أو Python أو غيرها.
من مميزات منصة Firebase
توفر Firebase قاعدة بيانات مجانية. تزامن فوري بين برنامجك وقاعدة البيانات. أقل جهد ممكن من المبرمج للحصول على تزامن. توثيق سهل لـ Firebase API نظام تسجيل دخول بطرق كثيرة (فيسبوك، تويتر، ايميل ورقم سري، الخ) API يعمل على أنظمة تشغيل ومنصات مختلفة (Android(Java), iOS(C#), Web(Javascript إحصائيات لتفاعل المستخدمين خلال ساعات اليوم. وإن أردت التدرب فقط على عمل تطبيق CRUD وتحتاج إلى  API جاهز للتجربة فيمكنك أن تستعمل موقع jsonplaceholder حيث يقدم لك API جاهز يحتوي على العديد من المسارات Routes الجاهزة للإستخدام مجانًا.

يمكنك أن تبني المشروع بالكامل في نفس مجلد لأن Laravel يأتي مجهزًا للتعامل مع الـ API، ويمكنك أن تقوم بعمل RESTful API من خلال عمل Routes في ملف routes/api.php بنفس الطريقة العادية كم اتقوم بها في ملف routes/web.php ويفضل أن تفصل المتحكمات controllers في مجلد داخلي باسم api ليكون في المسار التاليعلى سبيل المثال: 
/app/Http/Controllers/Api/UsersController.php ويمكنك تقسم الـ API إلى إصدار (V1, V2 .. إلخ) حتى إذا أردت أن تقوم بعمل تحديثات في المستقبل، تقوم بعمل إصدار جديد لذلك قم بوضع المتحكمات في مجلد باسم الإصدار أيضًا كالتالي:
/app/Http/Controllers/Api/V1/UsersController.php ويمكنك أن تستخدم التابع prefix لإستخدام الإصدار في مسارات routes الـ API أيضًا كالتالي:
Route::prefix('v1')->group(function () { Route::get('/users', [UsersController::class, 'index']); // http://localhost/api/v1/users Route::get('/posts', [PostsController::class, 'index']); // http://localhost/api/v1/posts });  

عمل رائع في تعلم كل هذه التقنيات، أعتقد أنك الآن تستطيع أن تقوم ببناء مشروع من الصفر (متجر إلكتروني أو مدونة على سبيل المثال)، وإن لم تفعل هذا بعد فقد حان الوقت لكي تقوم بالتطبيق على ما تعلمته في شكل مشروع واحد كبير يحتوي على كل التقنيات التي تعلمتها.
ليس شرطًا أساسيًا أن تتعلم الـ testing ويمكنك القيام بأي مشروع بدون إستخدامه على الإطلاق، لكنه سيسهل عليك الكثير من العمل، لأنك ستقوم بعمل ملفات صغيرة تقوم بتجربة مكونات المشروع وتوافقها مع بعضها البعض، وهذا سيوفر عليك عناء التجربة اليديوية وإصلاح الأخطاء في كل مرة وهذا الأمر يستغرق الكثير من الوقع خصوصًا في المشاريع الكبيرة، بالنسبة لأنواع الـ testing فيوجد أنواع أخرى غير unit testing و integration testing وعندما تبدأ في تعلم وإستخدام أحد المكتبات للقيام بذلم مثل jest على سبيل المثال ستتعرف على باقي الأنواع ومتى تستخدم كل نوع منهم.
الكاش أو الملفات المؤقتة هي بيانات يتم تخزينها في الذاكرة العشوائية في الغالب، لكي يتم الوصول إليها بشكل سريع بدلًا من البحث في ملايين السجلات في قاعدة البيانات على سبيل المثال، ويتم بشكل واسع في المشاريع الضخمة والمشاريع التي تحتوي على حجم بيانات كبير للغاية، ومثله مثل الـ testing ليس عليك تعليمه في البداية وليس شرطًا لكي تبدأ في عمل مشروع جديد.
جدولة المهام يقصد به تنفيذ كود معين في وقت محدد مسبقًا، على سبيل المثال، إرسال رسالة بريد إلكتروني إلى المستخدمين في أول كل شهر تذكرهم بتجديد الإشتراك.
الـ microservice أو كما يعرف بـ microservice architecture هي طريقة لتنظيم وتقسيم الكود ليكون:
يمكن صيانتها واختبارها بدرجة عالية
كل المكونات تكون المتباعدة (أي لا يعتمد بعضها على بعض)
يمكن نشر كل المكونات بشكل مستقل
 
تتيح بنية الـ microservice التسليم السريع والمتكرر والموثوق للتطبيقات الكبيرة والمعقدة. كما أنه يمكّن المنظمة أو الشركة من تطوير مجموعة التكنولوجيا والتقنيات الخاصة بها.
كل أسلفت في البداية، يمكنك أن تبدأ الآن في إنشاء مشروع جديد، لكي تطبق على ما تعليمته بشكل سليم، وبعد إنتهاء المشروع يمكنك أن تقوم بتحسينه وتطبيق مميزات أخرى مثل الـ testing والـ caching والـ task Scheduling .. إلخ

يجب أن تقوم برفع الكود الخاص بالـ backend (الجزء المختص بالـ API) على أي إستضافة (ليس شرط أن تكون إستضافة heroku ، لكنها الأسهل في التعامل وأيضُا مجانية)، وذلك لأن localhost لن يعمل على الهواتف الحقيقية أو الموجودة خارج شبكتك الخاصة وعندما تقوم برفع الكود على إستضافة heroku تحصل على رابط مثل my-app.herku.com وتقوم بإستعمال هذا الرابط بدلًا من localhost:3000 كالتالي:
 
http://localhost:3000/api/v1/products # يصبح الرابط السابق كالتالي http://my-app.heroku.com/api/v1/products بعد رفع الكود على الإستضافة والحصول على رابط مشابهة يجب أن تقوم بتعديل الكود في التطبيق ليقوم بإستعمال الرابط الجديد بدلًا من localhost

في دالة getMessages يتم إستدعاء الدالة appendMessage وهي المسئولة عن إضافة رسالة أخرى:
function getMessages() { // قبل الحصول على رسائلك. shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight; /* * احصل على رسائلك ، سنقوم بمحاكاتها من خلال إلحاق واحدة جديدة بشكل متزامن. */ // قم بحذف هذا السطر // appendMessage(); // بعد استلام رسائلك. if (!shouldScroll) { scrollToBottom(); } }  

إذا أردتِ التحقق من وجود مفتاح ما في قاموس، فيمكن إستخدام إحدى الطريقتين الآتيين:
الطريقة الأولى إستخدام التابع get كالتالي:
dict = {'Name': 'Ahmed', 'Age': 7} print ("Value : %s" % dict.get('Age')) #Output: "Value : 7" كما يمكن تعين قيمة إفتراضية في حالة عدم وجود المفتاح age في القاموس كالتالي:
dict = {'Name': 'Ahmed'} print ("Value : %s" % dict.get('Age', 18)) #Output: "Value : 18" أما إذا أردتِ التحقق من وجود قيمة value معينة في قاموس فيمكن إستخدام التابع values مع المعامل in كالتالي:
dict = {'Name': 'Ahmed', 'age': 7} print ('ahmed' in dict.values()) #Output: True  

يمكنك التأكد من وجود قيمة معينة من خلال إستخدام التابع values لجلب كل القيم الموجودة في القاموس dictionary كالتالي:
x = {'a' : 100, "b": 200, "c":300} # نقوم بتحويل كل القيم إلى قائمة values = list(x.values()) print(200 in values) # True  

سأحاول أن أوضح بعض المصطلحات لكي تستطيع أختيار الأنسب إليك:
أولًا Flutter هو إطار عمل للغة Dart يمكن تسبيهه بـ Bootstrap بالنسبة إلى CSS أو Laravel بالنسبة إلى PHP
ثانيًا لن يختلف شيء في حالة إختلاف لعة الـ Backend  وسيكون نفس الـ API بدون إختلاف على الإطلاق، فكل اللغات وإطارات العمل تتيح تحكم كامل في الـ API الذي تصنعه.
في الغالب يستعمل مطورو تطبيقات الهاتف Firebase لسهولة التعامل معه بالإضافة إلى إنخفاض تكلفته مفارنة مع شراء سيرفر خاص VPS أو إستضافة وتطوير API عليها من الصفر، لكن في حالات معينة يكون التطبيق كبير للغاية ويحتوي على الكثير من المميزات التي يجب إضافتها للتطبيق، في هذه الحالات يكون من الأفضل إستعمال خدمات أخرى غير Firebase.
بما أنك تتعلم Node.js فسيكون من الأفضل لك إستعمال إطار عمل مثل express.js.

يمكنك أن تستعمل مكتبة react-icons لإضافة كل أيقونات font awesome بالإضافة إلى مجموعة كبيرة جدًا من الأيقونات الأخرى، يمكنك تثبيت محتبة react-icons من خلال الأمر:
npm install react-icons --save ثم قم بإستخدامها كالتالي (مثال من موقع المكتبة الرسمي):
import { FaBeer } from 'react-icons/fa'; class Question extends React.Component { render() { return <h3> Lets go for a <FaBeer />? </h3> } }  

أغلب المواقع والتطبيقات تستخدم نفس الطريقة تقريبًا وهي تحديد يوم معين (أول يوم في رمضان) وحساب الوقت المتبقي حتى حلول هذا اليوم، يمكنك فعل نفس الشيء من خلال إضافة jQuery.countdown، فعلى سبيل المثال الكود التالي يقوم بحساب الوقت المتبقي على بداية شهر رمضان (بفرض أن رمضان سيبدأ في يوم 13 أبريل في الساعة 19:00) ويظهر هذا الوقت المتبقي في العنصر #getting-started:
<div id="getting-started"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/hilios/jQuery.countdown/master/dist/jquery.countdown.min.js"></script> <script type="text/javascript"> $('#getting-started').countdown('2021/04/13 19:00:00', function(event) { $(this).html(event.strftime('متبقي %D يومًا و %H:%M:%S')); }); </script> كما يوجد عشرات المكتبات والإضافات التي تقوم بمثل هذا الأمر، ويمكن الوصول إلى هذه المكتبات من خلال بحث بسيط في GitHub.

يمكنك أن توقف خاصية CSRF Token على أحد المسارات من خلال الـ Middleware الخاص بذلك وهو VerifyCsrfToken، وتم تجهيزه مسبقًا بالخاصية $except لكي يتم وضع المسارات فيه بالشكل التالي:
protected $except = [ '/users/*', // لكل المسارات التي تبدأ بـ users '/test' ]; كما يمكنك أن توقف ميزة CSRF لكل مسارات التطبيق بالشكل التالي:
protected $except = [ '*', ]; أو من خلال ملف
app/Http/Kernel.php قم بحذف الصنف التالي من web:
App\Http\Middleware\VerifyCsrfToken::class تحذير هام:
لا تقم أبدًا بتعطيل خاصية CSRF Token لأن هذا الأمر من الممكن أن يسمح لمهاجم إلى القيام بعمليات معينة على حساب مستخدم ما، كتحويل مبلغ مالي من موقع بنكي، أو تعديل اسم المستخدم أو حتى يمكن أن تصل لتغيير كلمة المرور.

يوجد نوعين من خوازرميات التشفير، الأول تشفير في إتجاه واحد، أي يتم تشفير النصوص ولا يمكن فك تشفيرها عمليًا ومن هذه الخوارزميات SHA-256 و md5 و bcrypt التي يستعملها Laravel في حفظ كلمات المرور، ويمكن إستخدامها بشكل مباشر عبر دالة bcrypt:
$password = "secret"; $hashed_password = bcrypt($password); // $2y$12$j50r.d/Db1HE.lR4TkTbP.lCGlsMjP7NMQDLP.jE1x9kqz7Ltwyr2 ويمكن التأكد من صحة كلمة المرور فيما بعد عبر Hash:check
if (Hash::check('plain-text-password', $hashed_password)) { // The passwords match... } أما النوع الثاني فهو التشفير في إتجاهين، أي يمكن تشفير النصوص وفك تشفيرها عبر كلمة سر معينة تسمى مفتاح فك التشفير وتكون هي نفسها قيمة الخاصية APP_KEY  في ملف env، يوفر Laravel خدمة تشفير Laravel's encrypter عبر OpenSSL بإستخدام الخوارزميات AES-256 وAES-128 وكل القيم التي يتم تشفيرها يتم تسجيلها بكود مصادقة MAC، بحيث لا يمكن تعديل قيمتها الأساسية أو العبث بها بمجرد تشفيرها.
ملاحظة: لا تستخدم أبدًا هذه الطريقة لتشفير كلمات المرور وذلك لأنه يمكن فك تشفيرها بمجرد معرفة قيمة APP_KEY، وقد حدثت الكثير من عمليات الإختراق في عشرات المواقع لأسباب مشابهة، وإنما تستعمل هذه الطريقة في تشفير القيم التي تحتاجها في وقت لاحق مثل API Tokens.
للبدء في تشفير القيم يمكنك أن تستخدم دالة encryptString التي يوفرها الصنف Illuminate\Support\Facades\Crypt، وهنا مثال من وثائق Laravel الرسمية:
<?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; use App\Models\User; use Illuminate\Http\Request; use Illuminate\Support\Facades\Crypt; class DigitalOceanTokenController extends Controller { /** * Store a DigitalOcean API token for the user. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function storeSecret(Request $request) { $request->user()->fill([ 'token' => Crypt::encryptString($request->token), ])->save(); } } يمكن أيضًا إستخدام دالة decryptString من نفس الصنف لفك تشفير النصوص، وفي حالة حدوث خطأ سيتم إطلاق خطأ من نوع Illuminate\Contracts\Encryption\DecryptException، مثال:
use Illuminate\Contracts\Encryption\DecryptException; use Illuminate\Support\Facades\Crypt; try { $decrypted = Crypt::decryptString($encryptedValue); } catch (DecryptException $e) { return Redirect::back()->withErrors(['msg', 'Invalid decryption key']); } بالتوفيق.

أول قم بإنشاء مشروع React إن لم يكن لديك واحد بالفعل:
npx create-react-app react-tailwindcss && cd react-tailwindcss لكي تستطيع تثبيت وإستخدام tailwind بشكل جيد وعملي سنقوم بتثبيت كل من tailwindcss و postcss-cli  و autoprefixer:
npm install tailwindcss postcss-cli autoprefixer -D PostCSS هي أداة لتحويل تنسيقات CSS باستخدام إضافات JS. يمكن لهذه المكونات الإضافات فحص CSS، ودعم المتغيرات وmixins، وتحويل بنية CSS الحديثة، وتصمين الصور، إلخ.
بينما autoprefixer تقوم بإضافة prefix لبعض خصائص CSS لكي تدعم بعض الإصدارات القديمة من متصفحات الويب.
ثم نقوم بعمل ملف tailwind config من خلال الأمر:
npx tailwind init tailwind.js --full ثم سنحتاج إلى ملف postcss.config.js لضبط إعدادات postcss حتى يعمل مع tailwind:
touch postcss.config.js وسنقوم بكتابة التالي فيه:
const tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss('./tailwind.js'), require('autoprefixer') ], }; بعد ذلك عليك عمل ملف tailwind.css ووضعه في أي مكان تريد وضع فيه مكوانات tailwdind:
@tailwind base; @tailwind components; @tailwind utilities; وإستدعائه في مكونات React أو في داخل ملف scss بشكل عادي، وستحتاج أيضًا تعديل scripts في ملف package.json:
"scripts": { "start": "npm run watch:css && react-scripts start", "build": "npm run watch:css && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css" } بهذا سيكون tailwind قد تم تثبيته بنجاه ويمكنك أستعمال كل classes الخاصة به.
بالتوفيق.

يتم عرض مكون App الخاص بك داخل React.StrictMode وهو ما يؤدي إلى تشغيل الدوال الخاصة بك في وضع التطوير Development Mode وفي هذا الوضع تظهر النتيجة في الـ Console مرتين لأن كل دالة يتم تشغيلها مرتين في وضع التطوير.
وحسب وثائق React الرسيمة:
 
لا يمكن لوضع التطوير Development Mode كتشف الآثار الجانبية تلقائيًا، ولكن يمكن أن يساعدك في تحديدها بجعلها أكثر حتمية. يتم ذلك عن طريق الاستدعاء المزدوج للدوال التالية:
في المكون من نوع Class:  constructor render shouldComponentUpdate الدالة الثابتة getDerivedStateFromProps المكونات من نوع Function: جسم الدالة نفسها دوال تحديث الحالة setState useState useMemo useReducer لاحظ أنه هذا ينطبق فقط على وضع التطوير. لن يتم استدعاء دوال Lifecycles مرتين في وضع الإنتاج.
يمكنك أن تمنع حدوث مثل هذا الأمر من خلال حذف React.StrictMode من التابع render:
ReactDOM.render( <App />, document.getElementById('root') );  

في الحقيقة Bootstrap و Tailwind ليسا متشابهين وذلك لأن كل منهم له مهمة محددة ومختلفة عن الآخر فـ Bootstrap قام بتطويره كل من  Mark Otto و Jacob Thornton لكي يسهل على المطورين لتصميم الصفحات عبر إستخدام مكونات جاهزة مثل Navbar و Footer و Card إلخ، بينما إن زرت موقع Tailwind ستجد أنه يعرفه على أنه إطار لكي تستخدم الأصناف Classes بدلًا من خواص CSS، فتقوم بإستخدام الصنف text-center لكي تصيف للعنصر الخاصية text-algin:center;
في البداية بدء Laravel في إستعمال Bootstrap لبناء بعض المكونات والصفحات الرئيسية مثل صفحة تسجيل الدخول أو تسجيل حساب جديد أو عمل ترقيم للصفحات Pagination، ولكن في أشهر الأخيرة أنتقل Laravel لإستخدام Tailwind CSS حيث يوفر للمطور تخصيص المكونات كما يرغب بشكل سهل عكس Bootstrap الذي تكون مكونات أصعب قليل في التعديل.
لاحظ أنه يمكنك أن تستعمل كل من Bootstrap و Tailwind معًا في نفس المشروع لكن لا ينصح بذلك لكي لا يكون حجم المشروع كبير ولكي لا يحدث تعارض بين أصناف CSS المستخدمه في كلا الإطارين.
في النهاية الأمر راجع للمطور نفسه ولمعاير  وطبيعة المشروع ليختار أي إطار يريد أن يعمل به.

يمكن حل هذه المشكلة بأكثر من طريقة، ومنها:
إذا كان لديك ملف واحد فقط يستخدام جملة require، يمكنك تحديد require في الجزء العلوي من الملف بهذا الشكل: declare var require: any بهذه الطريقة ستعمل جملة require في هذا الملف فقط، لكن ستظل المشكلة قائمة في أي ملف TypeScript آخر.
إن كنت تستخدم TypeScript الإصدار الثاني فيمكنك فقط تثبيت حزمة types/node وستحل المشكلة على الفور في كل ملفات المشروع، يمكنك تثبيت الحزمة عبر الأمر: npm install @types/node --save-dev ثم عليك بتعديل ملف src/tsconfig.app.json أو إنشاءه إن لم يكن موجود وإضافة التالي:
{ "types": [ "node" ], "typeRoots": [ "../node_modules/@types" ] } في الغالب لن تضطر إلى تعديل الملف src/tsconfig.app.json وهذا لأنه يتم تعديله بشكل تلقائي من قبل node.
إن كنت تستخدم TypeScript الإصدار الأول أو أقل فيجب تثبيت حزمة typings بالشكل التالي: npm install typings -g --save-dev // ثم نفذ الأمر التالي typings install dt~node --save --global  
في حالة إستخدامك لـ Webpack لبناء ملفات مشروعك، فيجب أن تقوم بتثبيت حزمة @types/webpack-env التي ستعالج هذه المشكلة في كل ملفات المشروع، ويمكنك تثبيت الحزمة من خلال الأمر: npm install --save-dev @types/webpack-env ثم يجب تعديل ملف tsconfig.json (في مجلد المشروع الرئيسي بجانب ملف package.json) بهذا الشكل:
"compilerOptions": { // إعدادات أخرى "types": [ "webpack-env" ] }  
بالتوفيق، تحياتي.

هناك أكثر من قاعدة لترتيب الأولويات في CSS وليس فقط ترتيب الأسطر في ملف CSS، فعندما يتم وضع خاصية CSS لعنصر ما أكثر من مرة -كما في السؤال- يتم ترتيب أولوية الخواص حسب أي خاصية هي الأكثر تحديدًا للعنصر، وهذا حسب موقع W3:
وهنا مثال للتوضيح:
<style> div .box { color: green } .two { color: red } </style> <div> <div class="box">One</div> <div class="box two">Two</div> <div class="box">Three</div> <div class="box">Four</div> </div> المثال السابق سيظهر كل العناصر باللون الأخضر (حتى العنصر two) وذلك لأن div .box تقوم بتحديد العنصر بشكل أكثر تفصيلًا (بعبارة أخرى العنصر محدد أكثر).

أما إن أردت أن يتم تطبيق الخاصية الثانية (two.) فيمكن ذلك بأكثر من طريقة منها إستخدام id بدلًا من class بالشكل التالي:
<style> div .box { color: green } #two { color: red } </style> <div> <div class="box">One</div> <div class="box" id="two">Two</div> <div class="box">Three</div> <div class="box">Four</div> </div> المثال السابق سوف يظهر العنصر two بلون أحمر وباقي العناصر يتظل خضراء كما هي:

أو يمكنك جعل العنصر محدد أكثر من بإستخدام div.two بدلًا من .two فقط، أو يمكنك إستخدام جملة !important في مثل هذه الحالات. يمكنك أن تطبق نفس الأمثلة السابقة في مشروعك وستظهر لديك نفس النتيجة.
بالتوفيق، تحياتي.

لا توجد مشكلة في الكود في حد ذاته فالكود يعمل بشكل صحيح، لكن يخبرك مترجم Typescript أن هناك خطأ في السطر 12 لأنه لا يفهم صيغة JSX وذلك لأن JSX ليست معتمدة في لغة Typescript بشكل تلقائي، ويمكنك أن تلاحظ ذلك من صيغة الملف auth.ts والذي من المفترض أن يحتوي على كود Typescript فقط لكنك أضفت كود JSX، ولحل هذه المشكلة يجب تحويل اسم الملف إلى auth.tsx لكي يفهم المترجم صيغة كود JSX.

يقوم لارافيل بفصل ملفات CSS و JavaScript في جزمة منفصلة laravel/ui، لكي يتم تثبيتها عند الحاجة لها فقط، ويمكن تثبيت هذه الحزمة عن طريق الأمر التالي كما وضح الأستاذ @بلال زيادة
composer require laravel/ui:^2.4 بعد تثبيت الحزمة يجب أن يتم إستخراج ملفات CSS و JavaScript منها إلى مجلد المشروع نفسه وذلك عن طريق الأمر
// في حالة إستخدام Bootstrap php artisan ui bootstrap // في حالة عمل تطبيق ب Vue.js php artisan ui vue // في حالة عمل تطبيق React.js php artisan ui react // لتوليد ملفات login / registration يتم إضافة --auth للأمر php artisan ui bootstrap --auth php artisan ui vue --auth php artisan ui react --auth بعد تنفيذ الأمر السابق يجب تثبيت كل الحزم الموجودة في ملف package.json عن طريق الأمر
npm i بمجرد إنتهاء الأمر السابق يمكن تحويل ملفات SCSS إلى CSS وتجميعها في ملف واحد وهو public/css/app.css، ونفس الشيء بالنسبة لملفات js عن طريق تنفيذ الأمر:
npm run dev لاحظ أن ملف public/css/app.css ,وملف public/js/app.js لن يكونا مضغوطين وستظهر أي أخطاء js في الـ console لتسهل عملية التطوير، لكن بعد الإنتهاء من المشروع يجب ضغط هذه الملفات وإخفاء كل رسائل الخطأ عن طريق تنفيذ الأمر:
npm run prod  بالتوفيق.