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

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

معرفی Introduction

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

• یک وب سایت فول استک ایجاد کنید Create a full-stack website

• نصب Node.js و NPM Installing Node.js and NPM

• معرفی پروژه Project introduction

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

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

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

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

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

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

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

• ایجاد صفحات وبلاگ شما Creating your blog pages

• فهرست مقالات خود را مدولار کنید Making your articles list modular

• ایجاد مؤلفه برنامه Creating the app component

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

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

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

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

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

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

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

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

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

• در حال بازنویسی نقطه پایان رأی موافق Rewriting your upvote endpoint

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

• چرا MongoDB؟ Why MongoDB?

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

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

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

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

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

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

• فراخوانی useEffect در زمان مناسب Calling useEffect at the right time

• افزودن قلاب های React Adding React hooks

• اضافه کردن بارگذاری داده به اجزای صفحه Adding data loading to page components

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

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

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

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

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

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

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

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

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

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

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

• چرا Firebase Auth؟ Why Firebase Auth?

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

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

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

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

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

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

نتیجه Conclusion

• مراحل بعدی Next steps