第1章 初识React
第2章 JavaScript新特性
第3章 JavaScript函数式编程
第4章 React进阶
第5章 React与JSX
第6章 Props、State和组件树
第7章 组件扩展
第8章 Redux
第9章 React Redux
第10章 测试
第11章 React Router
第12章 React服务器端应用
# Chapter 1 : Introduction第1章：简介
The widespread use of React on large websites shows that it is stable enough to use at scale. React is ready.
React的广泛应用在大型网站上表明它已经足够稳定以应对大比例尺。React准备好了。
## Installing Node.js and NPM
When working with Node and React, you will need to use the command line. On the Mac, this is called the Terminal. On a PC,
it is called the Command Prompt. Run the following commands to check your current version on node and npm. If needed,
instructions on how to install or upgrade are below.
First, check to see if you have Node.js installed:
```
$ node -v
```
If this returns a version number, Node.js is installed. If the command is not found, you'll need to [install Node.js](https://nodejs.org/en/) from the Node.js website. Download the installer, run it, and follow the instructions.
---
Next, check your version of npm:
```
$ npm -v
```
Then, if you are running anything less than version 8, you will need to update npm:
### Update npm on Mac
```
$ sudo npm update -g npm
```
### Update npm on PC
Make sure to run the Command Prompt with administrator privileges:
```
$ npm update -g npm
```
##### Optionally install Yarn
Yarn is a package manager created at Facebook. It is a compatible alternative to npm. Yarn's use is not required,
but you can optionally install it if you like:
```
$ sudo npm install -g yarn
```
Finally, there are some nice options for switching Node versions. This is not required, but you can
optionally install one of these version mangers:
- [Install Node Version Manager - mac only (optional)](https://github.com/creationix/nvm)
- [Install NVM-Windows - pc only (optional)](https://github.com/coreybutler/nvm-windows)
---
## Installing the React Tools
Next, install the React developer tools:
- Development Tools ([Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) |
[Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/))
## Working with the Files
This repository links to samples hosted on various platforms, so that you can immediately begin interacting with the files. For smaller samples, we've linked to JSBins to allow you to run the sample with limited overhead. We also have links to CodeSandboxes and other repos if the samples are more in-depth.
## React Resources
Finally, we have some links to resources and official documentation for the libraries that we will be using:
- [React Documentation](https://facebook.github.io/react/index.html)
- [React Source](https://github.com/facebook/react)
- [React Blog](https://facebook.github.io/react/blog/)
- [React NPM](https://www.npmjs.com/package/react)
- [webpack Documentation](https://webpack.js.org/)
- [Jest Documentation](https://facebook.github.io/jest/)
- [React Router Documentation](https://reacttraining.com/react-router/)
# Chapter 2 : Emerging JavaScript第2章：新型的JavaScript
If you haven't made the switch to the latest JavaScript syntax yet, now is a good time to get started.
如果您还没有切换到最新的JavaScript语法，那么现在是开始的好时机。
## Samples
### Declaring Variables in ES6
#### const
1. Without const ([run it](http://jsbin.com/gapoxa/1/edit?js,console))
2. With const ❌ ([run it](https://jsbin.com/gapoxa/2/edit?js,console))
#### let
3. Without let ([run it](https://jsbin.com/gapoxa/3/edit?js,console))
4. With let ([run it](https://jsbin.com/gapoxa/4/edit?js,console))
5. Loops with var ([run it](http://jsbin.com/gapoxa/5/edit?js,output))
6. Loops with let ([run it](http://jsbin.com/gapoxa/6/edit?js,output))
#### template strings
7. Without Template Strings - Simple Concatenation ([run it](https://jsbin.com/gapoxa/7/edit?js,console))
8. With Template Strings - Simple concatenation ([run it](https://jsbin.com/gapoxa/8/edit?js,console))
9. Template Strings - Email ([run it](https://output.jsbin.com/gapoxa/9))
10. Template Strings - HTML ([run it](https://jsbin.com/gapoxa/10/edit?js,output))
### Default Parameters
1. Default Parameters ([run it](http://jsbin.com/yeqexu/1/edit?js,console))
2. Default Parameters with Objects ([run it](http://jsbin.com/yeqexu/2/edit?js,console))
### Arrow functions
1. Regular Function
([run it](http://jsbin.com/tegefa/1/edit?js,console))
2. Arrow Function ([run it](http://jsbin.com/tegefa/2/edit?js,console))
3. Arrow Function - Multiple Args ([run it](http://jsbin.com/tegefa/3/edit?js,console))
4. Multiple Args - One Line ([run it](http://jsbin.com/tegefa/4/edit?js,console))
5. Arrow Functions with if statements ❌ ([run it](http://jsbin.com/tegefa/5/edit?js,console))
6. Arrow Functions with errors ❌ ([run it](http://jsbin.com/tegefa/6/edit?js,console))
7. setTimeout ❌ ([run it](http://jsbin.com/tegefa/7/edit?js,console))
8. setTimeout with .bind ([run it](http://jsbin.com/tegefa/8/edit?js,console))
9. setTimeout with Arrow Function ([run it](http://jsbin.com/tegefa/9/edit?js,console))
10. setTimeout with 'this' problem ❌ ([run it](http://jsbin.com/tegefa/10/edit?js,console))
11. Showing 'this' problem ([run it](http://jsbin.com/tegefa/11/edit?js,console))
### Objects and Arrays
#### Destructuring Assignment
1. Destructuring Assignment ([run it](http://jsbin.com/jukokaf/1/edit?js,console))
2. Destructuring with Arguments ([run it](http://jsbin.com/jukokaf/2/edit?js,console))
3. Destructured Object Arguments ([run it](http://jsbin.com/jukokaf/3/edit?js,console))
4. Destructuring Arrays ([run it](http://jsbin.com/jukokaf/4/edit?js,console))
5. Destructuring with Comma Placeholders ([run it](http://jsbin.com/jukokaf/5/edit?js,console))
#### Object Literal Enhancement
6. Object Literal Enhancement ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/6/edit?js,console))
7. Object Literal Enhancements with Functions ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/7/edit?js,console))
8. Literal Enhancements: The Old Way ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/8/edit?js,console))
9. Literal Enhancements Now ([demo](https://rawgit.com/MoonHighway/learning-react/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [code](http://github.com/MoonHighway/learning-react/blob/master/chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html), [bin](http://jsbin.com/jukokaf/9/edit?js,console))
#### The Spread Operator
10. Spread Operator with Arrays ([run it](http://jsbin.com/jukokaf/10/edit?js,console))
11. Array Destructuring with .reverse() ([run it](http://jsbin.com/jukokaf/11/edit?js,console))
12. Spread Operator with Destructuring and .reverse() ([run it](http://jsbin.com/jukokaf/12/edit?js,console))
13. Destructuring and the Spread Operator ([run it](http://jsbin.com/jukokaf/13/edit?js,console))
14. Directions Functions ([run it](http://jsbin.com/jukokaf/14/edit?js,console))
15. Spread Operator with Objects ([run it](http://jsbin.com/jukokaf/15/edit?js,console))
### Promises
1. getFakeMembers ([run it](http://jsbin.com/pupojik/1/edit?js,console))
2. fetch members ([run it](http://jsbin.com/haguhe/1/edit?js,console))
### ES6 Class Syntax
1. The Constructor and the Prototype ([run it](http://jsbin.com/hoqileh/1/edit?js,console))
2. Classes ([run it](http://jsbin.com/hoqileh/2/edit?js,console))
3. Class Inheritance ([run it](http://jsbin.com/hoqileh/3/edit?js,console))
# Chapter 3 : Functional Programming with JavaScript第3章：函数式JavaScript编程
Many techniques in React follow the functional JavaScript paradigm. Understanding the basic concepts of functional programming will make you better at structuring React applications.
React中的许多技术都遵循函数式JavaScript范式。理解函数式编程的基本概念将使您更好地构造React应用程序。
## Samples
### Introduction
#### What it means to be Functional
1. Functions as Variables ([run it](https://jsbin.com/hopomod/1/edit?js,console))
2. Arrow Functions ([run it](https://jsbin.com/hopomod/3/edit?js,console))
3. Object Methods ([run it](https://jsbin.com/lamujat/edit?js,console))
4. Functions within Arrays ([run it](https://jsbin.com/qoparag/edit?js,console))
5. Functions as Arguments ([run it](https://jsbin.com/hopomod/5/edit?js,console))
6. Returned Functions ([run it](https://jsbin.com/boyihum/1/edit?js,console))
7. ES6 Enhancements ([run it](https://jsbin.com/boyihum/2/edit?js,console))
#### Imperative vs. Declarative
1. Imperative ([run it](https://jsbin.com/cuqapu/1/edit?js,console))
2. Declarative ([run it](http://jsbin.com/cuqapu/2/edit?js,console))
### Immutability
1. Mutations ([run it](http://jsbin.com/kemimi/1/edit?js,console))
2. Object.assign() ([run it](http://jsbin.com/kemimi/2/edit?js,console))
3. Spread Operator with Objects ([run it](http://jsbin.com/kemimi/3/edit?js,console))
4. Array.push() ([run it](http://jsbin.com/kemimi/4/edit?js,console))
5. Array.concat() ([run it](http://jsbin.com/kemimi/5/edit?js,console))
6. Spread Operator with Arrays ([run it](http://jsbin.com/kemimi/6/edit?js,console))
### Pure Functions
1. Impure Function ([run it](http://jsbin.com/kosogo/1/edit?js,console))
2. Object Mutation ([run it](http://jsbin.com/kosogo/2/edit?js,console))
3. Pure Function ([run it](http://jsbin.com/kosogo/3/edit?js,console))
4. Side Effects ([run it](http://jsbin.com/kosogo/4/edit?js,console))
5. React Component ([run it](http://jsbin.com/kosogo/5/edit?js,console))
### Transforming Data
1. Joining Array Items ([run it](http://jsbin.com/qehige/1/edit?js,console))
2. Filtering Arrays ([run it](http://jsbin.com/qehige/2/edit?js,console))
3. Filtering Array Function ([run it](http://jsbin.com/qehige/3/edit?js,console))
4. Mapping Arrays ([run it](http://jsbin.com/qehige/4/edit?js,console))
5. Creating Objects with .map() ([run it](http://jsbin.com/qehige/5/edit?js,console))
6. Updating Array of Objects ([run it](http://jsbin.com/qehige/6/edit?js,console))
7. Editing Arrays of Objects ([run it](http://jsbin.com/qehige/7/edit?js,console))
8. Object.keys() ([run it](http://jsbin.com/qehige/8/edit?js,console))
9. Reducing Arrays ([run it](http://jsbin.com/qehige/9/edit?js,console))
10. Array.reduce() Shorter Syntax ([run it](http://jsbin.com/qehige/10/edit?js,console))
11. Colors Hash ([run it](http://jsbin.com/qehige/11/edit?js,console))
12. distinctColors() ([run it](http://jsbin.com/qehige/12/edit?js,console))
### Higher Order Functions
1. invokeIf ([run it](http://jsbin.com/raxuyew/1/edit?js,console))
2. userLogs ([run it](http://jsbin.com/raxuyew/2/edit?js,console))
### Recursion
1. Countdown ([run it](http://jsbin.com/romezi/1/edit?js,console))
2. Countdown with setTimeout ([run it](http://jsbin.com/romezi/2/edit?js,console))
3. deepPick() ([run it](http://jsbin.com/romezi/3/edit?js,console))
### Composition
1. Clock Template with .replace() ([run it](http://jsbin.com/zivevu/1/edit?js,console))
2. Clock with Composition ([run it](http://jsbin.com/zivevu/2/edit?js,console))
3. Click with Compose Function ([run it](http://jsbin.com/zivevu/3/edit?js,console))
# Chapter 4 : Pure React第4章：纯React
If you take the time to understand what is going on behind the scenes you will be more efficient, especially when
it comes time to debug.
## Samples
### Page Setup
1. HTML Document Setup ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/01-page-setup.html))
2. HTML for a Recipe ([run it](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/02-baked-salmon.html))
### React Elements
1. Rendering an Element ([run it](http://jsbin.com/polufak/1/edit?js,output))
2. Rendering an Element with Properties ([run it](http://jsbin.com/polufak/2/edit?js,output))
3. Rendering Lists ([run it](http://jsbin.com/polufak/3/edit?js,output))
4. Mapping over Elements ([run it](http://jsbin.com/polufak/4/edit?js,output))
5. Adding Keys ([run it](http://jsbin.com/polufak/5/edit?js,output))
### React Components
1. Rendering createElement ([run it](https://jsbin.com/dizifem/1/edit?js,output))
2. List Items as props ([run it](https://jsbin.com/sedovap/1/edit?js,output))
《React学习手册》笔记：https://www.cnblogs.com/2008nmj/p/14602732.html
# Chapter 5 : React with JSX第5章：使用JSX编写React
The alternative to typing out verbose React.createElement calls is JSX, a JavaScript extension that allows
us to define React elements using syntax that looks similar to HTML.
## Samples
### Recipes App with JSX
- Single HTML Page ([run it](https://codesandbox.io/s/focused-dream-3c95d?file=/src/index.js))
### Code Sandbox Recipe App
- Recipe App ([run it](https://3c95d.csb.app/)) ([code](https://codesandbox.io/s/learning-react-recipe-app-3c95d?file=/src/components/Menu.css:0-536))
# Chapter 6 : React State Management第6章：React状态管理
State and properties have a relationship with each other. When we work with React applications, we gracefully compose components that are tied together based on this relationship. When the state of a component tree changes, so do the properties. The new data flows through the tree, causing specific leaves and branches to render to reflect the new content.
## Samples
### Star Rating
- Five Stars Rendered - ([run it](https://codesandbox.io/s/learning-react-star-rating-1-h7byq?file=/src/StarRating.js))
- Star Component with Props - ([run it](https://codesandbox.io/s/learning-react-star-rating-2-zbkuu?file=/src/App.js))
- Star Component with State - ([run it](https://codesandbox.io/s/learning-react-star-rating-3-tpmr9?file=/src/StarRating.js))
- Completed Star Component - ([run it](https://codesandbox.io/s/learning-react-star-rating-4-gxvb5?file=/src/Star.js))
- Advanced Star Component - ([run it](https://codesandbox.io/s/learning-react-star-rating-5-86ngm?file=/src/StarRating.js))
### Color Organizer
- Feature: Display Color Data - ([run it](https://codesandbox.io/s/learning-react-color-organizer-1-5r8tr?file=/src/App.js))
- Features: Remove Color, Rate Color - ([run it](https://codesandbox.io/s/learning-react-color-organizer-2-iytxb?file=/src/App.js))
- Feature: Add Color Component with Refs - ([run it](https://codesandbox.io/s/learning-react-color-organizer-3-kkyn0?file=/src/AddColorForm.js))
- Refactor: Add Color Controlled Component - ([run it](https://codesandbox.io/s/learning-react-color-organizer-4-sudge?file=/src/AddColorForm.js))
- Refactor: `useInput` hook - ([run it](https://codesandbox.io/s/learning-react-color-organizer-5-umj5q?file=/src/hooks.js))
- Feature: Adding a Color to State - ([run it](https://codesandbox.io/s/learning-react-color-organizer-6-ewxpp?file=/src/App.js))
- Refactor: Colors In Context - ([run it](https://codesandbox.io/s/learning-react-color-organizer-7-lg9y3?file=/src/index.js))
- Refactor: `useColors` hook - ([run it](https://codesandbox.io/s/learning-react-color-organizer-8-jqchd?file=/src/ColorProvider.js))
- BONUS: Color Organizer App (with emotion css)- ([run it](https://codesandbox.io/s/learning-react-color-organizer-9-ypf8r?file=/src/ColorList.js))
# Chapter 7 : Enhancing Components with Hooks第7章：使用Hooks钩子增强组件
## Samples
### `useEffect` hook
- Blocking Alert Call - ([run it](https://codesandbox.io/s/learning-react-useeffect-1-yu7f6?file=/src/App.js));
- Unreachable Code - ([run it](https://codesandbox.io/s/learning-react-useeffect-2-orpoq?file=/src/App.js));
- The `useEffect` hook - ([run it](https://codesandbox.io/s/learning-react-useeffect-3-flshw?file=/src/App.js));
### The Dependency Array
- Too many effects - ([run it](https://codesandbox.io/s/learning-react-useeffect-4-w723e?file=/src/App.js))
- Effect Dependencies - ([run it](https://codesandbox.io/s/learning-react-useeffect-5-uqol2?file=/src/App.js))
- Any Key to Render - ([run it](https://codesandbox.io/s/learning-react-useeffect-6-eg5w4?file=/src/App.js))
- Array Dependency issue - ([run it](https://codesandbox.io/s/learning-react-useeffect-7-3xo59?file=/src/App.js))
- `useMemo` - ([run it](https://codesandbox.io/s/learning-react-useeffect-8-w62wg?file=/src/App.js))
- Function Dependency issue - ([run it](https://codesandbox.io/s/learning-react-useeffect-9-yil9d?file=/src/App.js))
- `useCallback` - ([run it](https://codesandbox.io/s/learning-react-useeffect-10-e9im3?file=/src/App.js))
### When to useLayoutEffect
- Basic `useLayoutEffect` - ([run it](https://codesandbox.io/s/learning-react-uselayouteffect-1-bmxqw?file=/src/App.js))
- Custom: `useWindowSize` - ([run it](https://codesandbox.io/s/learning-react-uselayouteffect-2-vuir1?file=/src/App.js))
- Custom: `useMousePosition` - ([run it](https://codesandbox.io/s/learning-react-uselayouteffect-3-6ks6x?file=/src/App.js))
### useReducer
- Checkbox with `useState` - ([run it](https://codesandbox.io/s/learning-react-usereducer-1-ef229?file=/src/App.js))
- Checkbox with `toggle` - ([run it](https://codesandbox.io/s/learning-react-usereducer-2-oqy23?file=/src/App.js))
- Checkbox with `useReducer` - ([run it](https://codesandbox.io/s/learning-react-usereducer-3-mht63?file=/src/App.js))
- Increment number with `useReducer` - ([run it](https://codesandbox.io/s/learning-react-usereducer-4-b1yxs?file=/src/App.js))
### useReducer to handle Complex State
- `useState` with objects - ([run it](https://codesandbox.io/s/learning-react-usereducer-complex-1-k7ibz?file=/src/App.js))
- `useReducer` with objects - ([run it](https://codesandbox.io/s/learning-react-usereducer-complex-2-ewue8?file=/src/App.js))
- legacy `setState` with `useReducer` - ([run it](https://codesandbox.io/s/learning-react-usereducer-complex-3-2wldd?file=/src/App.js))
# Chapter 8: Incorporating Data第8章：引入数据
Data is the lifeblood of our applications. It flows like water, and it nourishes our components with value. The user interface components we've composed are vessels for data. We fill our applications with data from the internet. We collect, create, and send new data to the internet. The value of our applications is not the components themselves—it's the data that flows through those components.
## Samples
### Requesting Data
1. Fetch ([run it](https://codesandbox.io/s/dry-sea-wmw8w?file=/src/index.js))
2. requestGithubUser ([run it](https://codesandbox.io/s/happy-hypatia-hu6e6?file=/src/index.js))
### Authorized Requests
1. Fetching with the GitHubUser Component ([run it](https://codesandbox.io/s/crazy-borg-xyw0m?file=/src/App.js))
2. GitHubUser Component with localStorage ([run it](https://codesandbox.io/s/brave-water-w7knz?file=/src/App.js))
### Handling Promise States
1. Handling States ([run it](https://codesandbox.io/s/funny-architecture-9hwg4?file=/src/App.js))
### Render Props
1. Displaying a List ([run it](https://codesandbox.io/s/great-knuth-iq8qu?file=/src/App.js))
2. Empty List ([run it](https://codesandbox.io/s/eager-http-zgou9?file=/src/App.js))
3. List with Data ([run it](https://codesandbox.io/s/affectionate-tdd-0mucp?file=/src/App.js))
4. Conditional Render Prop Function ([run it](https://codesandbox.io/s/suspicious-sara-3dtyy?file=/src/App.js))
### Virtualized Lists
1. Rendering a List with faker ([run it](https://codesandbox.io/s/holy-shape-634jj?file=/src/App.js))
2. Rendering a Virtualized List with react-window ([run it](https://codesandbox.io/s/keen-star-dfb08?file=/src/App.js))
### Fetch Hooks
1. Fetch Component ([run it](https://codesandbox.io/s/zen-cloud-7nin3?file=/src/App.js))
2. Customizing Loading ([run it](https://codesandbox.io/s/agitated-raman-46dzb?file=/src/App.js))
3. Scrolling through Repos with useIterator ([run it](https://codesandbox.io/s/mystifying-cookies-nn1xl?file=/src/App.js))
4. Incorporating React Markdown ([run it](https://codesandbox.io/s/cocky-fog-h6xde?file=/src/App.js))
# Chapter 9: Suspense第9章：悬挂
Suspense is an experimental feature of React that's used to handle loading states. In this chapter, we'll take a closer look at some of the stable features, some experimental features, and the React reconciliation algorithm.
1. Suspense with Error Boundaries ([run it](https://codesandbox.io/s/cool-glade-xg1cm?file=/src/Main.js))
2. Status Component Rendering with Suspense ([run it](https://codesandbox.io/s/stupefied-fast-ortev?file=/src/App.js))
## Resources
- [React Suspense Docs](https://reactjs.org/docs/concurrent-mode-suspense.html): Read up on the latest with React Suspense
- [Understanding Fiber](https://github.com/acdlite/react-fiber-architecture): This doc from Andrew Clark on the React team does a deep dive on Fiber's design
# Chapter 10 : Testing第10章：测试
In order to keep up with our competitors, we must move quickly and ensure quality. One vital tool in our arsenal that
allows us to move quickly while ensuring quality is testing. Testing can mean a lot of things, from linting and typechecking to actually writing tests.
## Typechecking
1. PropTypes Error ([run it](https://codesandbox.io/s/stoic-bogdan-v62tk?file=/src/index.js))
2. PropTypes Required Values ([run it](https://codesandbox.io/s/vigorous-matsumoto-ozm55?file=/src/index.js))
3. PropTypes OneOf ([run it](https://codesandbox.io/s/modest-jennings-wy40n?file=/src/index.js))
4. Flow Project ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/in-the-flow))
5. TypeScript Project ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/my-type))
## TDD with React
1. Testing Introduction ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/testing))
2. Testing React Components ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/star-testing))
# Chapter 11 : React Router第11章：React Router
In this chapter, we cover the most recent version of the React Router, v6.
## Starter Website with Router
- Company Website ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-11/company-website/))
- Color Organizer with Routing ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-11/color-organizer/))
## React Router Docs & Repo
- [Website](https://reacttraining.com/react-router/)
- [Repo](https://github.com/ReactTraining/react-router)
# Chapter 12 : React & the Server第12章：React和服务器端
In this chapter, we'll talk about React with Server Side Rendering, and the various tools in the ecosystem like Gatsby and Next.js.
## Client & Server Domains
- Client Fetching ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/client-fetching))
- Node Fetching ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/node-fetching)): Run `node index` in the `node-fetching` folder.
## Server Rendered Recipes App
- Recipes ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/node-fetching))
- Recipes with Next.js ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/node-fetching))
扫一扫
3361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
