What we will learn

• React

The source of this summary The First link

The source of this summary The Second link

---

ES6 Syntax and Feature Overview

ES6 brought significant changes to the JavaScript language. It introduces several new features such as, block-scoped variables, new loop for iterating over arrays and objects, template literals, and many other enhancements to make JavaScript programming easier and more fun.

Tailwind CSS

• Tailwind’s flexbox and padding utilities (flex, flex-shrink-0, and p-6) to control the overall card layout
• The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
• The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-md) to style the card’s appearance
• The width and height utilities (w-12 and h-12) to size the logo image
• The space-between utilities (space-x-4) to handle the spacing between the logo and the text
• The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

Next.js

To build a complete web application with React from scratch, there are many important details you need to consider:

• Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.
• You need to do production optimizations such as code splitting.
• You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering.
• You might have to write some server-side code to connect your React app to your data store.

Next.js: The React Framework

Next.js aims to have best-in-class developer experience and many built-in features, such as:

• An intuitive page-based routing system (with support for dynamic routes)
• Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
• Automatic code splitting for faster page loads
• Client-side routing with optimized prefetching
• Built-in CSS and Sass support, and support for any CSS-in-JS library
• Development environment with Fast Refresh support
• API routes to build API endpoints with - Serverless Functions
• Fully extendable