Skip to content

Commit 35b5bcf

Browse files
markeriksonmarkerikson
authored
Create the Redux Essentials page, take 2 (reduxjs#3740)
* Port admonition and code block CSS from RTK site * Restructure sidebars to add "Tutorials" section * Add empty "Quick Start" tutorial page * Bump Docusaurus to alpha.48 * Fix text color in admonitions * Add blockquote styling for other pages * Add DetailedExplanation component * Initial Quick Start intro content * Quick Start: add "What is Redux" and "Terms" sections * Quick Start: add "play with app" content * Quick Start: create nested folder and rename file * Store setup * Quick Start: add slice, reducer, immutability, and thunk sections * Quick start: Add React-Redux section * Quick start: emphasize immutability, highlight JSX * Tweak "know more?" and explanation styles * Fix typo and add thunk usage mention * Bump Docusaurus to alpha.50 * Temporarily rename files to .md to work around DS bug See facebook/docusaurus#2551 * Add border color for highlight lines * Add code block titles and test line highlights * Initial project setup section * Add reducer and data flow explanations * Tweak wording * Link example repo and sandbox * Update Docusaurus * Fill out "Basic Data Flow" page * Add additional phrasing * Add intro and summary content for part 3 * Shrink code block file header padding * Finish writing Part 3 * Link to Immer docs * Add initial Part 4 content * Finish Quick Start part 4 * Remove unnecessary uses of "just" * Add Part 5 outline * Update page titles * Half of part 5 * Finish Quick Start content. Yay!!!!!! * Clean up tutorial part 1 based on review feedback - Reworded several explanations - Added "Immutability" section under "concepts" - Added data flow diagram - Removed leftover example code block * Add "What You've Learned" to part 1 * Rename part 5 -> 6 * Rename part 4 -> 5 * Rename part 3 -> 4 * Rename part 2 -> 3 * Add new Part 2 * Fix up TODO comments and broken links * Swap to new dataflow diagram * Assorted edits and link fixes * Rename "Quick Start" to "Redux Essentials" * Fix links and rename images * Update example app repo/sandbox links * Clarify random seed behavior * Rework introduction content - Redid "Getting Started" page by moving RTK first and removing most of the external tutorial links, - Added RTK to "Installation" page - Added description and "Best Practices" phrase to style guide - Added external links to prereq concepts - Fixed one-way data flow image - Added "Tutorial" link to header/footer, pointing to Essentials * Remove unwanted colors from pagination buttons * Emphasize recommended tutorial * Clean up README * Fix PR preview redirect * Clarify "smallest amount" wording * Try to fix redirects Former-commit-id: af8c8ea
1 parent fa1ab00 commit 35b5bcf

34 files changed

+141
-162
lines changed

‎README.md.REMOVED.git-id

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
c6206af164afffc7f7cc75f060a2329fcb8d213c
1+
06c2c8fd1f8d1d3e11232d26f91223eccec1d8f3

‎docs/components/DetailedExplanation.jsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
export const DetailedExplanation = ({
4+
children,
5+
title = 'Detailed Explanation'
6+
}) => {
7+
return (
8+
<details className="detailed-explanation">
9+
<summary>
10+
<h4>{title}</h4>
11+
</summary>
12+
{children}
13+
</details>
14+
)
15+
}

‎docs/introduction/GettingStarted.md.REMOVED.git-id

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
c1009f22843241280a4c6e9a9064536491e11266
1+
73670ac005460e36ca5978f3a82499a22bffc84a

‎docs/introduction/Installation.md

+22-2
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,33 @@ hide_title: true
77

88
# Installation
99

10+
## Redux Toolkit
11+
12+
Redux Toolkit includes the Redux core, as well as other key packages we feel are essential for building Redux applications (such as Redux Thunk and Reselect).
13+
14+
It's available as a package on NPM for use with a module bundler or in a Node application:
15+
16+
```bash
17+
# NPM
18+
npm install @reduxjs/toolkit
19+
20+
# Yarn
21+
yarn add @reduxjs/toolkit
22+
```
23+
24+
It's also available as a UMD build, which can be loaded from [the `dist` folder on unpkg](https://unpkg.com/@reduxjs/toolkit/dist/). The UMD builds make Redux Toolkit available as a `window.RTK` global variable.
25+
26+
## Redux Core
27+
1028
To install the stable version:
1129

1230
```bash
31+
# NPM
1332
npm install redux
14-
```
1533

16-
This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
34+
# Yarn
35+
yarn add redux
36+
```
1737

1838
If you're not, you can [access these files on unpkg](https://unpkg.com/redux/), download them, or point your package manager to them.
1939

‎docs/style-guide/style-guide.md.REMOVED.git-id

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
a0c4ec513de343fe7c98730e3b0fdd21b4b088ef
1+
d626d6f8aad44259d58ad4e5ade603beaa539c1d

‎docs/tutorials/essentials/part-1-overview-concepts.md.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
a4df5f1f297652579e324e960d423e8e9faccb7d

‎docs/tutorials/essentials/part-2-app-structure.md.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
4ad20f607ad7d35a63efbfa3bf75682b9f12f83a

‎docs/tutorials/essentials/part-3-data-flow.md.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
9e5e5f39071f0105c5fea3cdfe1bde6ced91e665

‎docs/tutorials/essentials/part-4-using-data.md.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
f9216d2a79b0c05ee2ebfecbdcf786c786b680ca

‎docs/tutorials/essentials/part-5-async-logic.md.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
fd931e4cc77ef0873cf2616f67470c9dc34fb93c

‎docs/tutorials/essentials/part-6-performance-normalization.md.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
e90eca8cefc46ad15cd427e86c450e8053756ac9

‎docs/tutorials/tutorials-index.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
id: tutorials-index
3+
slug: index
4+
title: 'Redux Tutorials Index'
5+
sidebar_label: 'Tutorials Index'
6+
hide_title: true
7+
description: 'Overview of the Redux tutorial pages'
8+
---
9+
10+
# Redux Tutorials Index
11+
12+
We have two different sets of tutorials:
13+
14+
- The [**Redux Essentials tutorial**](./essentials/part-1-overview-concepts) is a "top-down" tutorial that teaches how to use Redux the right way, using our latest recommended APIs and best practices.
15+
- The [**Basic tutorial**](../basics/README.md) and [**Advanced tutorial**](../advanced/README.md) are a "bottom-up" tutorial that teaches how Redux works, starting from first principles.
16+
17+
:::tip
18+
19+
**We recommend starting with the [Redux Essentials tutorial](./essentials/part-1-overview-concepts)**, since it covers the key points you need to know about how to get started using Redux to write actual applications.
20+
21+
:::
22+
23+
:::info
24+
25+
While the concepts in the "Basic" and "Advanced" tutorials are still valid, those pages are some of the oldest parts of our docs. We'll be updating those tutorials soon to improve the explanations and show some patterns that are simpler and easier to use. Keep an eye out for those updates. We'll also be reorganizing our docs to make it easier to find information.
26+
27+
:::

‎netlify.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
[build]
22
base = "website"
33
publish = "website/build"
4-
command = "npm run build"
4+
command = "npm run build && cp _redirects ./build"

‎website/_redirects.REMOVED.git-id

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
264d61e663e772ec5e15704bcb7223de2694e923
1+
52175f9b303200d7f9a2942b11f405b53a3570d5

‎website/docusaurus.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ module.exports = {
2424
to: 'introduction/getting-started',
2525
position: 'right'
2626
},
27+
{
28+
label: 'Tutorial',
29+
to: 'tutorials/essentials/part-1-overview-concepts',
30+
position: 'right'
31+
},
2732
{ label: 'API', to: 'api/api-reference', position: 'right' },
2833
{ label: 'FAQ', to: 'faq', position: 'right' },
2934
{
@@ -48,6 +53,10 @@ module.exports = {
4853
label: 'Getting Started',
4954
to: 'introduction/getting-started'
5055
},
56+
{
57+
label: 'Tutorial',
58+
to: 'tutorials/essentials/part-1-overview-concepts'
59+
},
5160
{
5261
label: 'FAQ',
5362
to: 'faq'

‎website/sidebars.js

+40-17
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,46 @@ module.exports = {
1111
'introduction/ecosystem',
1212
'introduction/examples'
1313
],
14-
'Basic Tutorial': [
15-
'basics/basic-tutorial',
16-
'basics/actions',
17-
'basics/reducers',
18-
'basics/store',
19-
'basics/data-flow',
20-
'basics/usage-with-react',
21-
'basics/example'
22-
],
23-
'Advanced Tutorial': [
24-
'advanced/advanced-tutorial',
25-
'advanced/async-actions',
26-
'advanced/async-flow',
27-
'advanced/middleware',
28-
'advanced/usage-with-react-router',
29-
'advanced/example-reddit-api',
30-
'advanced/next-steps'
14+
Tutorials: [
15+
'tutorials/tutorials-index',
16+
{
17+
type: 'category',
18+
label: 'Redux Essentials',
19+
items: [
20+
'tutorials/essentials/part-1-overview-concepts',
21+
'tutorials/essentials/part-2-app-structure',
22+
'tutorials/essentials/part-3-data-flow',
23+
'tutorials/essentials/part-4-using-data',
24+
'tutorials/essentials/part-5-async-logic',
25+
'tutorials/essentials/part-6-performance-normalization'
26+
]
27+
},
28+
{
29+
type: 'category',
30+
label: 'Basic Tutorial',
31+
items: [
32+
'basics/basic-tutorial',
33+
'basics/actions',
34+
'basics/reducers',
35+
'basics/store',
36+
'basics/data-flow',
37+
'basics/usage-with-react',
38+
'basics/example'
39+
]
40+
},
41+
{
42+
type: 'category',
43+
label: 'Advanced Tutorial',
44+
items: [
45+
'advanced/advanced-tutorial',
46+
'advanced/async-actions',
47+
'advanced/async-flow',
48+
'advanced/middleware',
49+
'advanced/usage-with-react-router',
50+
'advanced/example-reddit-api',
51+
'advanced/next-steps'
52+
]
53+
}
3154
],
3255
Recipes: [
3356
'recipes/recipe-index',

‎website/src/css/custom.css

-138
This file was deleted.

‎website/src/css/custom.css.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
52d1a5e8aa62637c2360b892ad7ac37595ad73a6

‎website/static/img/tutorials/essentials/ReduxDataFlowDiagram.gif.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
1960d04496daa72c9cfe37315fdeaed5f80e72b0

‎website/static/img/tutorials/essentials/devtools-done-clicking.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
5e5d405f709b53ba0e105e8cf91b310c1b2bd0c1

‎website/static/img/tutorials/essentials/devtools-first-action.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
7be869667b0198178501aaeeb936a70512c63800

‎website/static/img/tutorials/essentials/devtools-initial.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
088138480a88c76ec45b2fb85550633019aae409

‎website/static/img/tutorials/essentials/devtools-posts-fulfilled.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
e75c221535eeb86f9c1cca9f03f7ad24c788729c

‎website/static/img/tutorials/essentials/devtools-posts-pending.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bc331533459bee46bc45af55cd1d6fad1b408908

‎website/static/img/tutorials/essentials/example-initial-posts-list.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
677efdff0fb008dcefc79742bf056782c30a7c07

‎website/static/img/tutorials/essentials/example-initial-posts.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
72ca72046a0136575d3293117965893773302078

‎website/static/img/tutorials/essentials/example-postAdded-action.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
124d54cff880f8042d64187eacf549a1e4227925

‎website/static/img/tutorials/essentials/notifications-initial.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
965bdb26a864418447ca854bfb59918568b99ba0

‎website/static/img/tutorials/essentials/notifications-new.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
376e2e6f54c7337b09b2f07370b785730d288d13

‎website/static/img/tutorials/essentials/one-way-data-flow.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
8a18b59cfef504c0549154a17f369cb3e3671b38

‎website/static/img/tutorials/essentials/posts-unknownAuthor.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
d4701ae8ccf910a89c8b334203fe01dc7f907477

‎website/static/img/tutorials/essentials/postslist-optimized.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
6427298f4dedc840d46ca9dd801c0f5f44539cbc

‎website/static/img/tutorials/essentials/postslist-rerender.png.REMOVED.git-id

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
973d54c8b9ea648bf2914620eb88d66eced0095f

0 commit comments

Comments
 (0)