React

Tutorial: Intro to React

https://reactjs.org/tutorial/tutorial.html

React Component

React.createElement()

State

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

props(properties)

In JavaScript classes, you need to always call super when defining the constructor of a subclass. All React component classes that have a constructor should start with a super(props) call.

To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.

Immutability Is Important

concat(), map() 的经常使用。

Each child in an array or iterator should have a unique "key" prop.

关于教程的进一步练习：

Display the location for each move in the format (col, row) in the move history list.

Bold the currently selected item in the move list.

Rewrite Board to use two loops to make the squares instead of hardcoding them.

Add a toggle button that lets you sort the moves in either ascending or descending order.

When someone wins, highlight the three squares that caused the win.

When no one wins, display a message about the result being a draw.

React Next.js

{' '} adds an empty space, which is used to divide text over multiple lines.

from https://nextjs.org/learn/basics/navigate-between-pages/link-component

The Link component enables client-side navigation between two pages in the same Next.js app.

Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser.

Note: If you need to link to an external page outside the Next.js app, just use an <a> tag without Link.

If you need to add attributes like, for example, className, add it to the a tag, not to the Link tag.

from https://nextjs.org/learn/basics/navigate-between-pages/client-side

Why are CSS Modules useful? They scope styles at the component level.

Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)

Pre-rendering

There are two forms of Pre-rendering: Static Generation and Server-side Rendering.

In development mode (when you run npm run dev or yarn dev), every page is pre-rendered on each request — even for pages that use Static Generation.

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request. In that case, you can use Server-side Rendering. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate frequently updated data.

Implement getStaticProps

Note: In Next.js, the lib folder does not have an assigned name like the pages folder, so you can name it anything. It's usually convention to use lib or utils.

Dynamic Routes

Important: We added the async keyword to getPostData because we need to use await for remark. async/await allow you to fetch data asynchronously.

Fetch External API or Query Database
Fallback
Router

API Routes

Do Not Fetch an API Route from getStaticProps or getStaticPaths

错误

把 () 打成了 {} ，结果就是该出现的内容，不能显示在页面上

React InstantSearch

参考资料