MDN React tutorials #2: Todo list beginning by mxmason · Pull Request #30453 · mdn/content

mxmason · 2023-11-22T15:57:45Z

Description

Continuing from #30177, this PR rewrites some content in the second page of the "Learn React" tutorial.

Do not merge this until #30177 has been merged and you have updated this PR with mdn main and checked for breakages.

github-actions · 2023-11-22T16:00:31Z

Preview URLs

/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning

(comment last updated: 2023-12-21 11:03:13)

mxmason

Hello, @chrisdavidmills. This is ready for you!

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md

pepelsbey

I noticed that in the “Implementing our styles” sections only 4 lines were intentionally changed (replacing :focus with :focus-within), but the number of changes in the diff is much higher because the CSS properties got sorted by some formatter. It’s a bit harder to review now.

chrisdavidmills

@mxmason. OK, I've gone through this one, and it's mostly looking fine. Very little to report ;-)

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md

chrisdavidmills · 2023-11-23T10:13:07Z

I noticed that in the “Implementing our styles” sections only 4 lines were intentionally changed (replacing :focus with :focus-within), but the number of changes in the diff is much higher because the CSS properties got sorted by some formatter. It’s a bit harder to review now.

@pepelsbey I think it's fine in this case. The code was reviewed thoroughly during the previous app iteration, and the small changes look OK to me (see #30453 (comment) for the explanation of the reordering).

Co-authored-by: Chris Mills <[email protected]>

mxmason

Back to you, @chrisdavidmills!

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md

mxmason · 2023-11-23T22:17:34Z

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md

-Let's say that we've been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic `App` component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
+Let's say that we've been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through the basic structure and styling of such an application, ready for individual component definition and interactivity, which we'll add later.

 > **Note:** If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see <https://mdn.github.io/todo-react/>.


❓ Would you like me to migrate the example implementation of the app to match these instructions as well?

Yes please, that would be super helpful.

chrisdavidmills

@mxmason VERY nearly there! Lovely work, this is looking great.

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md

Co-authored-by: Chris Mills <[email protected]>

mxmason

Annnd back to you!

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md

chrisdavidmills

@mxmason Ding ding, another level passed! Great work.

On to the next one ;-)

mxmason · 2023-11-27T21:24:16Z

heya @chrisdavidmills! In case you missed it in your notifications, just wanted to let you know that I've continued this work in some other PRs:

chrisdavidmills · 2023-11-28T08:06:56Z

heya @chrisdavidmills! In case you missed it in your notifications, just wanted to let you know that I've continued this work in some other PRs:

* [DO NOT MERGE: MDN React Tutorials #3: Componentizing #30514](https://github.com/mdn/content/pull/30514), and

* [MDN intro to client-side frameworks update: intro & framework main features #30515](https://github.com/mdn/content/pull/30515)

@mxmason Yup, I saw them, don't worry! I have just been busy on other things since I saw them. I'll make some time to look at these today, so you are not blocked.

github-actions · 2023-11-28T20:53:06Z

This pull request has merge conflicts that must be resolved before it can be merged.

* chore: rewrite housekeeping * chore: clean up app jsx * chore: write boolean attributes section * chore: alphabetize css rules * chore: apply suggestions from code review Co-authored-by: Chris Mills <[email protected]> * chore: normalize CSS comments * chore: fix index file instructions * chore: clean up housekeeping * chore: terminology nits * chore: remove explicit true from large code block * chore: clarify boolean attributes * chore: clean up css comments again * chore: apply suggestions from code review Co-authored-by: Chris Mills <[email protected]> * chore: add fence for todo item styles * chore: use false in truthy warning * chore: fix invalid reference to existing css * small fix * Small update --------- Co-authored-by: Chris Mills <[email protected]>

mxmason added 5 commits November 22, 2023 07:53

chore: rewrite housekeeping

f5e1038

chore: clean up app jsx

60bf977

chore: write boolean attributes section

2e2e3d8

chore: alphabetize css rules

0f14cc2

Merge remote-tracking branch 'upstream/main' into ej/react-rewrite-2

cf7d9da

github-actions bot added the Content:Learn:Client-side Content under “Client-side JavaScript frameworks” (Svelte, React, Angular, Vue) and related subtrees label Nov 22, 2023

mxmason commented Nov 22, 2023

View reviewed changes

mxmason marked this pull request as ready for review November 22, 2023 16:02

mxmason requested a review from a team as a code owner November 22, 2023 16:02

mxmason requested review from hamishwillee and removed request for a team November 22, 2023 16:02

chrisdavidmills mentioned this pull request Nov 23, 2023

[PROJECT]: Modernize React tutorials mdn/mdn#474

Closed

10 tasks

chrisdavidmills changed the title ~~Learn React update 2: The updatening~~ DO NOT MERGE: MDN React tutorials #2: Todo list beginning Nov 23, 2023

chrisdavidmills requested review from chrisdavidmills and removed request for hamishwillee November 23, 2023 08:35

Merge branch 'main' into ej/react-rewrite-2

489e285

bsmth added the do not merge [PR only] Not ready to land label Nov 23, 2023

pepelsbey reviewed Nov 23, 2023

View reviewed changes

chrisdavidmills requested changes Nov 23, 2023

View reviewed changes

mxmason and others added 8 commits November 23, 2023 13:42

chore: apply suggestions from code review

364f521

Co-authored-by: Chris Mills <[email protected]>

chore: normalize CSS comments

8469d91

chore: fix index file instructions

a249ee1

chore: clean up housekeeping

b21c759

chore: terminology nits

06dc0be

chore: remove explicit true from large code block

1a1e6da

chore: clarify boolean attributes

d62e95c

chore: clean up css comments again

da461df

mxmason commented Nov 23, 2023

View reviewed changes

mxmason requested a review from chrisdavidmills November 23, 2023 22:18

chrisdavidmills requested changes Nov 24, 2023

View reviewed changes

chrisdavidmills and others added 4 commits November 24, 2023 14:32

Merge branch 'main' into ej/react-rewrite-2

bf1ff84

chore: apply suggestions from code review

3608535

Co-authored-by: Chris Mills <[email protected]>

chore: add fence for todo item styles

4fd5f91

chore: use false in truthy warning

4afbf1e

mxmason commented Nov 24, 2023

View reviewed changes

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md Show resolved Hide resolved

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md Show resolved Hide resolved

mxmason requested a review from chrisdavidmills November 24, 2023 15:47

chore: fix invalid reference to existing css

7a6a2b3

mxmason commented Nov 24, 2023

View reviewed changes

...learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md Show resolved Hide resolved

chrisdavidmills added 3 commits November 24, 2023 18:35

small fix

39376c5

Small update

6ae4f32

Merge branch 'main' into ej/react-rewrite-2

88efcd6

chrisdavidmills approved these changes Nov 24, 2023

View reviewed changes

mxmason mentioned this pull request Nov 24, 2023

MDN React Tutorials #3: Componentizing #30514

Merged

github-actions bot added the merge conflicts 🚧 [PR only] label Nov 28, 2023

Merge branch 'main' into ej/react-rewrite-2

0236e66

github-actions bot removed the merge conflicts 🚧 [PR only] label Nov 29, 2023

chrisdavidmills removed the do not merge [PR only] Not ready to land label Dec 21, 2023

chrisdavidmills changed the title ~~DO NOT MERGE: MDN React tutorials #2: Todo list beginning~~ MDN React tutorials #2: Todo list beginning Dec 21, 2023

Merge branch 'main' into ej/react-rewrite-2

6618f13

chrisdavidmills merged commit 951fa8a into mdn:main Dec 21, 2023

Comments

Conversation

mxmason commented Nov 22, 2023 • edited by chrisdavidmills Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

github-actions bot commented Nov 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mxmason left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pepelsbey left a comment

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chrisdavidmills commented Nov 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mxmason left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mxmason Nov 23, 2023

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills Nov 24, 2023

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mxmason left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

mxmason commented Nov 27, 2023

Uh oh!

chrisdavidmills commented Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mxmason commented Nov 22, 2023 •

edited by chrisdavidmills

Loading

github-actions bot commented Nov 22, 2023 •

edited

Loading

chrisdavidmills commented Nov 23, 2023 •

edited

Loading

chrisdavidmills commented Nov 28, 2023 •

edited

Loading