آموزش React: ایجاد و میزبانی یک سایت Full-Stack

سرفصل ها و درس ها

مقدمه Introduction

• آنچه شما باید بدانید What you should know

• وب سایت فول استک خود را با استفاده از React بسازید Build your own full-stack website using React

1. ایجاد یک React Front-End 1. Creating a React Front-End

• راه اندازی یک پروژه React Setting up a React project

• ایجاد صفحه اصلی Creating the home page

• ایجاد و پیوند دادن لیست مقالات Creating and linking the articles list

• با استفاده از پیوندهای روتر React Using React Router links

• ایجاد یک صفحه 404 در React Creating a 404 page in React

• افزودن React Router به برنامه Adding React Router to an application

• چرا واکنش نشان دهیم؟ Why React?

• اضافه کردن سبک ها Adding styles

• پارامترهای URL با React Router URL parameters with React Router

2. ایجاد یک Node.js Back-End 2. Creating a Node.js Back-End

• مقالات موافق Upvoting articles

• افزودن نظرات Adding comments

• راه اندازی سرور اکسپرس Setting up an Express server

• به‌روزرسانی خودکار با Nodemon Automatically updating with Nodemon

• چرا Node.js؟ Why Node.js?

• پارامترهای مسیر در Express Route parameters in Express

• تست سرور اکسپرس با Postman Testing an Express server with Postman

3. افزودن MongoDB به Node.js 3. Adding MongoDB to Node.js

• دانلود و نصب MongoDB Downloading and installing MongoDB

• چرا MongoDB؟ Why MongoDB?

• بازنویسی نقطه پایان نظرات Rewriting the comments endpoint

• اضافه کردن MongoDB به Express Adding MongoDB to Express

• بازنویسی نقطه پایانی رأی مثبت Rewriting the upvote endpoint

4. اتصال Front-End و Back-End 4. Connecting the Front-End and Back-End

• نمایش نظرات Displaying comments

• ایجاد دکمه رأی موافق Creating an upvote button

• استفاده از پارامترهای مسیر در لودرها Using route parameters in loaders

• کتابخانه اکسیوس The Axios library

• ایجاد فرم افزودن نظر Creating an add comment form

• بارگیری داده ها برای مسیرهای روتر React Loading data For React Router routes

• با استفاده از قلاب useLoaderData Using the useLoaderData hook

5. افزودن احراز هویت کاربر با Firebase Auth 5. Adding User Authentication with Firebase Auth

• یک صفحه ایجاد حساب بسازید Build a create account page

• چرا Firebase Auth؟ Why Firebase Auth?

• افزودن Firebase Auth به React Adding Firebase Auth to React

• محافظت از نقاط پایانی با استفاده از نشانه های احراز هویت Protecting endpoints using auth tokens

• یک فرم ورود بسازید Build a login form

• ایجاد پروژه Firebase Creating a Firebase project

• افزودن Firebase Auth به Node.js Adding Firebase Auth to Node.js

• ایجاد تنظیمات رابط برای کاربران احراز هویت شده Making interface adjustments for authenticated users

• محافظت از نقاط پایانی رأی موافق و نظر Protecting the upvote and comment endpoints

• درخواست با توکن های احراز هویت Making requests with auth tokens

• ایجاد یک قلاب احراز هویت سفارشی Creating a custom auth hook

6. میزبانی یک برنامه React Full-Stack 6. Hosting a Full-Stack React Application

• تعریف متغیرهای محیطی Defining environment variables

• استقرار یک برنامه فول استک Deploying a full-stack application

• خاموش کردن پروژه Google Cloud Shutting down a Google Cloud project

• راه اندازی هاست برای MongoDB Setting up hosting for MongoDB

• در حال آماده سازی یک برنامه برای انتشار Preparing an app for release

نتیجه گیری Conclusion

• مراحل بعدی در سفر React شما Next steps in your React journey