آموزش ساخت برنامه های React ارائه شده در سمت سرور برای مبتدیان

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

چرا رندر از سمت سرور مهم است؟ Why Is Server-side Rendering Important?

• چرا ارائه در سمت سرور بسیار مهم است Why Server-side Rendering Is so Important

• منبع کد Demos در GitHub Source Code for Demos on GitHub

مبانی ساختمان با React و سمت سرور رندر Fundamentals of Building with React and Server-side Rendering

• ساخت یک برنامه واکنش ساده بدون سیستم ساخت Building a Simple React App with No Build System

• با استفاده از روش های DOM برای نوشتن به یک مرورگر Using DOM Methods to Write to a Browser

• جایگزینی روش های DOM با React Calls Replacing DOM Methods with React Calls

• ایجاد یک م Reلفه عملکردی React Creating a React Functional Component

• انتقال لوازم به یک م Compلفه Passing Props to a Component

• تبدیل م Funلفه عملکردی به م Classلفه کلاس Converting a Functional Component to a Class Component

• درک اینکه چگونه JSX در چارچوب Next.js متناسب است Understanding How JSX Fits into the Next.js Framework

• ساخت یک برنامه با Next.js و نحو JSX Building an App with Next.js and JSX Syntax

• ادغام یک فایل CSS در پروژه Next.js Integrating a CSS File into the Next.js Project

• خلاصه ای از آنچه آموخته ایم Summary of What We Have Learned

REST Data in Server-Rendering و getInitialProps REST Data in Server-side Rendering and getInitialProps

• حل معمای ما و آنچه پیش می آید Solving Our Puzzle and What Is Coming Up

• مروری بر رندر سمت سرور و مشتری Overview of Server and Client-side Rendering

• کدگذاری سرور و راه حل ارائه سمت مشتری Coding a Server and Client-side Rendering Solution

• گرفتن Next’s getInitialProps به Async با برگرداندن یک وعده Taking Next’s getInitialProps to Async by Returning a Promise

• ارائه Async Rest Data Server و سمت Client Rendering Async Rest Data Server and Client-side

• مسیریابی صفحه سمت مشتری با عنصر پیوند Next را یاد بگیرید Learn Client-side Page Routing with Next's Link Element

• خلاصه ای از آنچه آموخته ایم Summary of What We Have Learned

گسترش برنامه ارائه شده از سمت سرور به دنیای واقعی Extending Your Server-side Rendered App to the Real World

• مقدمه Introduction

• ادغام بوت استرپ 4 Integrate Bootstrap 4

• Refactoring بوت استرپ استاتیک برای واکنش دادن به اجزا Refactoring Static Bootstrap to React Components

• صفحه Layout را با پرونده Next.js _app.js اضافه کنید Add a Layout Page with the Next.js _app.js File

• Refactoring با جزئیات بیشتر از جمله کارتهای Bootstrap More Detailed Refactoring Including to Bootstrap Cards

• افزودن صفحه جزئیات بلندگو که فقط در سمت مشتری کار می کند Adding a Speaker Detail Page That Works Client-side Only

• ارائه سمت سرور از یک صفحه فرود با پارامترهای پرس و جو Server-side Rendering of a Landing Page with Query Parameters

• غذاهای آماده Takeaways

استقرار برنامه شما در یک سرور و تولید Node Deploying Your App to a Node Server and Production

• بررسی اجمالی مبانی استقرار Deployment Basics Overview

• تنظیم و استفاده از متغیرهای محیطی Setting up and Using Environmental Variables

• پیکربندی متغیرهای پیش فرض محیطی Configuring Default Environmental Variables

• انتشار در نمای کلی Docker Publishing to Docker Overview

• ایجاد یک تصویر و کانتینر Docker Creating a Docker Image and Container

• میزبانی یک کانتینر در اقیانوس دیجیتال Hosting a Container on Digital Ocean

• غذاهای آماده Takeaways

اطمینان از عملکرد برنامه سمت سرور Ensuring Your Server-side App Performs

• اطمینان از عملکرد وب وب سمت سرور Ensuring Server-side Web App Performance

• مدیریت بهتر تصویر با تصاویر بعدی Better Image Handling with next-images

• افزودن حافظه پنهان صفحه به سرور Node Express Adding Page Caching to the Node Express Server

• استفاده از CDN برای جاوا اسکریپت ، CSS و تصاویر Using a CDN for JavaScript, CSS, and Images

• استفاده از تصاویر مکان یاب هنگام انتظار برای بارگیری داده ها Using Placeholder Images While Waiting for Data to Download

• غذاهای آماده Takeaways