reactjs / reactjs/react.dev

Intro to react for BEGINNERS revision

Offen
#1,015 0 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

An exchange of tweets with super friendly @gaearon lead me to convert one of my replies into this ticket. To improve what is on the overview section for beginners here: https://reactjs.org/tutorial/tutorial.html

screen shot 2018-06-28 at 01 58 36

I suggest the "Overview" section is dedicated to the following and flows like this:

  • Explain what a component is (type, class) and that ES6 syntax which for someone with little JS experience looks like a normal JS syntax but it is not. With that hint outline what each term mean.

screen shot 2018-06-28 at 02 11 43

  • Explain a component's lifecycle briefly before touching on render and constructor methods. I think React lifecycle is inspired/affected by iOS/Android lifecycles so why not touch on those, for people like me who came from mobile world. Learning by association is one of the learning methods (I think).

  • Now feel free to explain what render is and why it must return something (including null).

  • Now is time to show Hello World not a shopping list:

class HelloWorld extends React.Component {
  render() { //compulsory React method/fucntion
    return (
      <p className="cssclass"> // a <p> element is also a component, className is a property
         Hello World!
      </p>
    );
  }
} 
  • (Optional) link to Thinking in React early on and that coloured component hierarchy of the stock list.

screen shot 2018-06-28 at 02 11 43

Its not easy to think like a beginner once you are a pro. Hope this is an improvement suggestion and not a cause for confusion.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem Abschnitt Overview des verlinkten React-Tutorials und vergleiche ihn mit dem vorgeschlagenen Ablauf für Einsteiger. Als abgeschlossen gilt die Aufgabe, wenn der Überblick Komponenten, Lebenszyklus und Rendern in dieser Reihenfolge erklärt, das vorgeschlagene Hello World-Beispiel verwendet und optional auf Thinking in React verlinkt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.