reactjs / reactjs/react.dev

Improve local development instructions in the tutorial

Open
#1,658 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

I'm trying to get started with the easiest example from the tutorial at https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial for some hours now. I desperately looking for the location where to put the ShoppingList, Square`, etc. classes. I invested some time in understanding the terms, but it always falls back to the contradiction in the instructions

Delete all files in the src/ folder of the new project

and

Note:
Don’t delete the entire src folder, just the original source files inside it. We’ll replace the default source files with examples for this project in the next step.

This is the same as

Delete the original source files in src.

right (where the attribute original is still unclear because all files are original after creating the app with npx)? If not, I'm not getting it after reading it the fifth time.

Furthermore, I don't find any instructions where to put the code in the tutorial. My only guess is src/index.js, but that doesn't lead to the code being displayed after npm start.

I think that creating the app with content and then deleting it is a worse approach than build the application from scratch. Unfortunately, dependencies and tools like package managers seem to be already designed more as soon-to-be outdated rather than doing one good job for a long time in the "frontend world" - which is why most other tutorials on React going the way to build from scratch are outdated these days. The solution for this problem would be to simply put the tutorial commands in a CI script and test them periodically.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the tutorial's “Setup for the Tutorial” section at the linked URL and compare the instructions about deleting files in src with the later code examples. Verify the documented placement of ShoppingList and Square and the npm start flow; the work is done when a new app can follow the instructions and display the tutorial code without guessing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.